/* =============================================================
   Designsystemet
   =============================================================

   Felles struktur for alle sites. Fargene, formene og typografien
   kommer fra temaets egen site.css, som lastes etter denne og setter
   variablene under.

   Hvorfor felles: differensieringen mellom sitene ligger i HTML-en og
   innholdet — hver site har sin egen views-mappe og skriver sine egne
   tekster. CSS er ikke det som avgjør om to sider ser ut som duplikater
   for en søkemotor, og tre nesten like stilark ville i praksis betydd at
   to av dem alltid var et halvt år etter den tredje.

   Formspråket er arvet fra rentaltech.no: nordisk og lyst, én bærende
   farge per site, pill-formede knapper, generøs luft, ingen skygger
   utover det som trengs for å løfte et kort fra bakgrunnen.

   Rekkefølge i filen:
     1. Grunnmur          reset, typografi, ramme
     2. Sidehode          topp, meny, mobilskuff
     3. Hero              forsidens første skjerm
     4. Seksjoner         bånd, overskriftsblokker, nøkkeltall
     5. Knapper og lenker
     6. Kort              hengerkort, guidekort, områdekort
     7. Innholdsblokker   steg, hukliste, faktaboks, varsel, tabell
     8. Modellsiden       galleri, kjøpsboks, kalkulator, spesifikasjoner
     9. Trekkspill        FAQ
    9b. Vurderinger      snitt, kort og partnersvar
    10. Skjema
    11. Bunn
    12. Samtykke
    13. Utlenke til bookingen
    14. Responsivt
   ============================================================= */

/* ---------- 1. Grunnmur ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

:root {
    /* Temaet overstyrer disse. Verdiene her er en nøytral fallback, slik
       at en site uten eget stilark fortsatt er lesbar framfor usynlig. */
    --merke-dyp:  #12386B;
    --merke:      #3D7DD8;
    --merke-lys:  #EAF1FB;
    --merke-mork: #0D2B54;
    --aksent:     #2E7D6B;
    /* Mørkere variant av aksenten, for hvit tekst oppå. Aksentfargen selv
       er stemt for streker og flater (3:1); småtekst krever 4,5:1. */
    --aksent-dyp: #266757;
    /* Farge for liten, farget tekst — «overtittel» og lignende. Egen token
       fordi 0,78 rem ikke er «stor tekst» i WCAG, og dermed trenger 4,5:1
       der --merke bare trenger 3:1 som grensesnittelement. */
    --merke-tekst: var(--merke-dyp);

    --tekst:      #1A1D21;
    --tekst-svak: #5A626B;
    --linje:      #E3E7ED;
    --linje-sterk:#CDD5E0;
    --flate:      #FFFFFF;
    --flate-lys:  #F6F8FA;
    --flate-mork: #12386B;

    --ok:         #1B7A4B;
    --feil:       #B4232A;

    --ramme:      1120px;
    --radius:     14px;
    --radius-sm:  10px;
    --radius-pill:999px;

    --skrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Åtte trinn. Alt av avstand i systemet bruker disse, slik at
       rytmen holder seg når en seksjon flyttes fra én side til en annen. */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

    --seksjon-luft: 88px;
    --loft: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
    --loft-sterk: 0 2px 4px rgba(16, 24, 40, .06), 0 16px 40px rgba(16, 24, 40, .10);

    color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--skrift);
    font-size: 17px;
    line-height: 1.65;
    color: var(--tekst);
    background: var(--flate);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--tekst);
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 650; }
h4 { font-size: 1.02rem; font-weight: 650; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child, dl:last-child { margin-bottom: 0; }

a { color: var(--merke-dyp); text-underline-offset: .18em; }
a:hover { color: var(--merke-mork); }

img, svg, video { max-width: 100%; height: auto; display: block; }

strong, b { font-weight: 650; }

:focus-visible {
    outline: 3px solid var(--merke);
    outline-offset: 2px;
    border-radius: 3px;
}

.ramme {
    width: 100%;
    max-width: var(--ramme);
    margin-inline: auto;
    padding-inline: var(--s5);
}
.ramme--smal { max-width: 760px; }
.ramme--mellom { max-width: 920px; }

.hopp-til-innhold { position: absolute; left: -9999px; }
.hopp-til-innhold:focus {
    left: var(--s4); top: var(--s4);
    z-index: 60;
    background: var(--merke-dyp);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
}

.skjult {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Løpende småtekst */
.overtittel {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    font-weight: 650;
    color: var(--merke-tekst);
    margin-bottom: .7rem;
}
.ingress { font-size: 1.1rem; color: var(--tekst-svak); max-width: 60ch; }
.svak { color: var(--tekst-svak); }
.liten { font-size: .92rem; }
.mikro { font-size: .82rem; color: var(--tekst-svak); }

.stabel > * + * { margin-top: var(--s5); }
.stabel-tett > * + * { margin-top: var(--s3); }

/* ---------- 2. Sidehode ---------- */

.topp {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--flate) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linje);
}

.topp__rad {
    display: flex;
    align-items: center;
    gap: var(--s5);
    min-height: 76px;
}

.merkelogo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--merke-dyp);
    font-weight: 700;
    letter-spacing: -.02em;
    font-size: 1.05rem;
    line-height: 1.1;
    flex: 0 0 auto;
}
.merkelogo svg { flex: 0 0 auto; }
.merkelogo__navn { display: flex; flex-direction: column; }
.merkelogo__navn span:last-child {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tekst-svak);
}

.meny { margin-left: auto; display: none; }
.meny ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.meny a {
    text-decoration: none;
    font-size: .95rem;
    font-weight: 550;
    color: var(--tekst-svak);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.meny a:hover,
.meny a[aria-current="page"] { color: var(--merke-dyp); border-bottom-color: var(--merke); }

.topp__cta { display: none; flex: 0 0 auto; }

.menyknapp {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    padding: var(--s2) var(--s4);
    background: var(--flate);
    border: 1px solid var(--linje-sterk);
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--merke-dyp);
    cursor: pointer;
}
.menyknapp .strek { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.menyknapp .strek::before,
.menyknapp .strek::after {
    content: ""; position: absolute; left: 0;
    width: 16px; height: 2px; background: currentColor; border-radius: 2px;
}
.menyknapp .strek::before { top: -5px; }
.menyknapp .strek::after { top: 5px; }

.skuff { border-bottom: 1px solid var(--linje); background: var(--flate); }
.skuff__innhold { padding: var(--s3) var(--s5) var(--s5); }
.skuff ul { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.skuff li + li { border-top: 1px solid var(--linje); }
.skuff a { display: block; padding: var(--s3) 0; text-decoration: none; font-weight: 600; color: var(--tekst); }

/* Brødsmuler */
.smuler { border-bottom: 1px solid var(--linje); background: var(--flate-lys); font-size: .85rem; }
.smuler ol {
    display: flex; flex-wrap: wrap; gap: var(--s2);
    list-style: none; margin: 0; padding: var(--s3) var(--s5);
    max-width: var(--ramme); margin-inline: auto;
}
.smuler li + li::before { content: "›"; margin-right: var(--s2); color: var(--tekst-svak); }
.smuler a { color: var(--tekst-svak); text-decoration: none; }
.smuler a:hover { color: var(--merke-dyp); text-decoration: underline; }
.smuler [aria-current="page"] { color: var(--tekst); font-weight: 550; }

/* ---------- 3. Hero ---------- */

.hero {
    background:
        radial-gradient(900px 420px at 82% -10%, var(--merke-lys), transparent 70%),
        var(--flate);
    border-bottom: 1px solid var(--linje);
}
.hero__rad { padding-block: var(--s8) var(--s8); }

.hero__rutenett { display: grid; gap: var(--s7); align-items: center; }
.hero__tekst { max-width: 42rem; }
.hero h1 { margin-bottom: var(--s4); }
.hero .ingress { font-size: 1.16rem; }

.hero__media { position: relative; }
.hero__media img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--loft-sterk);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--flate-lys);
}

/* Prislapp som legger seg over herobildet */
.prislapp {
    position: absolute;
    left: var(--s5);
    bottom: var(--s5);
    background: var(--flate);
    border-radius: var(--radius-sm);
    padding: var(--s3) var(--s5);
    box-shadow: var(--loft-sterk);
}
.prislapp b { display: block; font-size: 1.5rem; color: var(--merke-dyp); letter-spacing: -.02em; }
.prislapp span { font-size: .82rem; color: var(--tekst-svak); }

.knapperad { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* Bildeplassholder — brukes når modellen ennå ikke har bilde i API-et */
.bildeplass {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background:
        linear-gradient(135deg, var(--merke-lys), var(--flate-lys));
    border: 1px dashed var(--linje-sterk);
    color: var(--tekst-svak);
    font-size: .9rem;
    text-align: center;
    padding: var(--s5);
}

/* ---------- 4. Seksjoner ---------- */

.seksjon { padding-block: var(--seksjon-luft); }
.seksjon--lys { background: var(--flate-lys); border-block: 1px solid var(--linje); }
.seksjon--tett { padding-block: var(--s7); }

.seksjon--mork {
    background: var(--flate-mork);
    color: #fff;
}
.seksjon--mork h1,
.seksjon--mork h2,
.seksjon--mork h3 { color: #fff; }
.seksjon--mork .overtittel { color: var(--merke-lys); }
.seksjon--mork .ingress,
.seksjon--mork .svak,
.seksjon--mork p { color: color-mix(in srgb, #fff 78%, transparent); }
.seksjon--mork a { color: #fff; }
.seksjon--mork .knapp--sekundar {
    border-color: color-mix(in srgb, #fff 35%, transparent);
    color: #fff;
    background: transparent;
}
.seksjon--mork .knapp--sekundar:hover { border-color: #fff; background: color-mix(in srgb, #fff 10%, transparent); }
.seksjon--mork .knapp--primar { background: #fff; color: var(--merke-dyp); }
.seksjon--mork .knapp--primar:hover { background: var(--merke-lys); }

.seksjon__topp { max-width: 46rem; margin-bottom: var(--s7); }
.seksjon__topp--bred { max-width: none; }

/* Overskrift til venstre, lenke til høyre */
.seksjon__hode {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s4);
    margin-bottom: var(--s7);
}
.seksjon__hode > div { max-width: 46rem; }
.seksjon__hode p:last-child { margin-bottom: 0; }

.nokkeltall {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s8);
    list-style: none;
    margin: var(--s8) 0 0;
    padding: var(--s6) 0 0;
    border-top: 1px solid var(--linje);
}
.nokkeltall__tall {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--merke-dyp);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.nokkeltall__tekst { font-size: .9rem; color: var(--tekst-svak); }

.todelt { display: grid; gap: var(--s7); align-items: start; }
.todelt--tekstforst { grid-template-columns: 1fr; }

/* ---------- 5. Knapper og lenker ---------- */

.knapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 13px 24px;
    min-height: 48px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: .97rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.knapp--primar { background: var(--merke-dyp); color: #fff; }
.knapp--primar:hover { background: var(--merke-mork); color: #fff; }
.knapp--sekundar { border-color: var(--linje-sterk); color: var(--merke-dyp); background: var(--flate); }
.knapp--sekundar:hover { border-color: var(--merke); color: var(--merke-mork); }
.knapp--stor { padding: 16px 30px; min-height: 56px; font-size: 1.03rem; }
.knapp--blokk { display: flex; width: 100%; }
.knapp--liten { padding: 9px 18px; min-height: 40px; font-size: .9rem; }

/* Lenke som ser ut som en lenke, men oppfører seg som en avslutning */
.videre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: .97rem;
}
.videre::after { content: "→"; transition: transform .12s ease; }
.videre:hover::after { transform: translateX(3px); }

/* ---------- 6. Kort ---------- */

.kortrad { display: grid; gap: var(--s5); }
.kortrad--2 { grid-template-columns: 1fr; }
.kortrad--3 { grid-template-columns: 1fr; }

.kort {
    background: var(--flate);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.kort:hover { box-shadow: var(--loft); border-color: var(--linje-sterk); }

.kort__media { display: block; background: var(--flate-lys); }
.kort__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kort__media .bildeplass { border: 0; border-radius: 0; }

.kort__kropp {
    padding: var(--s5) var(--s5) var(--s6);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    flex: 1;
}
.kort__kategori {
    font-size: .78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--tekst-svak);
}
.kort h3 { margin: 0; font-size: 1.15rem; }
.kort h3 a { text-decoration: none; color: var(--tekst); }
.kort h3 a:hover { color: var(--merke-dyp); text-decoration: underline; }
.kort p { color: var(--tekst-svak); margin: 0; }
.kort__handling { margin-top: auto; padding-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Kort med farget topplinje — brukes på guider og innholdssider */
.kort--stripe { border-top: 4px solid var(--merke); }
.kort--stripe-aksent { border-top-color: var(--aksent); }

/* Faktalinjer i et hengerkort */
.spekliste { display: grid; gap: 0; margin: 0; font-size: .92rem; }
.spekliste > div {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--linje);
}
.spekliste > div:last-child { border-bottom: 0; }
.spekliste dt { color: var(--tekst-svak); }
.spekliste dd { margin: 0; font-weight: 600; text-align: right; }

/* Førerkortmerket. Den viktigste opplysningen på et hengerkort:
   feil førerkort er den vanligste grunnen til at en booking avbestilles. */
.forerkort {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    background: var(--flate-lys);
    border: 1px solid var(--linje);
    border-radius: var(--radius-sm);
    padding: var(--s3) var(--s4);
    font-size: .88rem;
    color: var(--tekst-svak);
    margin: 0;
}
.forerkort__merke {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 24px;
    padding-inline: 7px;
    border-radius: 5px;
    background: var(--merke-dyp);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.forerkort--be { background: color-mix(in srgb, var(--aksent) 8%, var(--flate)); border-color: color-mix(in srgb, var(--aksent) 30%, var(--linje)); }
/* Merket bærer hvit tekst, så det trenger den mørke varianten. */
.forerkort--be .forerkort__merke { background: var(--aksent-dyp); }

/* Pris i et kort */
.pris { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin: 0; }
.pris__tall { font-size: 1.6rem; font-weight: 700; color: var(--merke-dyp); letter-spacing: -.02em; }
.pris__enhet { font-size: .88rem; color: var(--tekst-svak); }
.pris--stor .pris__tall { font-size: 2.4rem; }

/* Merkelapper */
.merkelapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--flate-lys);
    border: 1px solid var(--linje);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    font-size: .84rem;
    color: var(--tekst-svak);
}
.merkelappliste { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }

/* ---------- 7. Innholdsblokker ---------- */

.steg {
    display: grid;
    gap: var(--s6);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: steg;
}
.steg > li { counter-increment: steg; border-top: 2px solid var(--merke); padding-top: var(--s4); }
.steg > li::before {
    content: "Steg " counter(steg);
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--merke-tekst);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: var(--s2);
}
.steg h3 { margin-bottom: var(--s2); }
.steg p { color: var(--tekst-svak); margin: 0; }

.hukliste { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.hukliste li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    color: var(--tekst-svak);
}
.hukliste li::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 16px; height: 8px;
    border-left: 2px solid var(--merke);
    border-bottom: 2px solid var(--merke);
    transform: rotate(-45deg);
}

.faktaboks {
    background: var(--flate-lys);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    padding: var(--s6);
}
.faktaboks h3 { margin-bottom: var(--s3); }
.faktaboks--fremhevet {
    background: var(--merke-lys);
    border-color: color-mix(in srgb, var(--merke) 25%, var(--linje));
}

.varsel {
    border: 1px solid var(--linje);
    border-left: 4px solid var(--merke);
    background: var(--flate-lys);
    border-radius: var(--radius-sm);
    padding: var(--s4) var(--s5);
}
.varsel h2, .varsel h3 { font-size: 1rem; margin-bottom: var(--s1); }
.varsel--ok { border-left-color: var(--ok); }
.varsel--feil { border-left-color: var(--feil); }

.tomtilstand {
    border: 1px dashed var(--linje-sterk);
    border-radius: var(--radius);
    background: var(--flate-lys);
    padding: var(--s8) var(--s6);
    text-align: center;
}
.tomtilstand p { color: var(--tekst-svak); max-width: 46ch; margin-inline: auto; }

.brodtekst { max-width: 68ch; }
.brodtekst > * + * { margin-top: var(--s4); }
.brodtekst h2 { margin-top: var(--s7); }
.brodtekst h3 { margin-top: var(--s6); }
.brodtekst ul, .brodtekst ol { padding-left: var(--s5); }
.brodtekst li + li { margin-top: var(--s2); }
.brodtekst a { font-weight: 550; }

.spek { width: 100%; border-collapse: collapse; font-size: .97rem; margin: 0; }
.spek th, .spek td { text-align: left; padding: var(--s3) 0; border-bottom: 1px solid var(--linje); }
.spek th { font-weight: 450; color: var(--tekst-svak); width: 52%; }
.spek td { font-weight: 600; text-align: right; }
/* Underetikett i en radoverskrift — org.nr under et selskapsnavn. */
.spek th .mikro { display: block; font-weight: 400; }

.lenkeliste { list-style: none; padding: 0; margin: 0; }
.lenkeliste li { border-bottom: 1px solid var(--linje); }
.lenkeliste a { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; text-decoration: none; color: var(--tekst); font-weight: 550; }
.lenkeliste a:hover { color: var(--merke-dyp); }
.lenkeliste span { color: var(--tekst-svak); font-weight: 400; font-size: .9rem; white-space: nowrap; }

/* Kart som statisk lenke — et innebygd kart koster mer enn det gir på
   en side der de fleste allerede vet hvor stedet er. */
.kartlenke {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    border: 1px solid var(--linje);
    background:
        repeating-linear-gradient(45deg, var(--flate-lys) 0 12px, var(--flate) 12px 24px);
    text-decoration: none;
    font-weight: 600;
    color: var(--merke-dyp);
    text-align: center;
    padding: var(--s6);
}
.kartlenke:hover { border-color: var(--merke); }

/* ---------- 8. Modellsiden ---------- */

.modelltopp { display: grid; gap: var(--s7); align-items: start; }

.galleri { display: grid; gap: var(--s3); }
.galleri__hoved {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--flate-lys);
    box-shadow: var(--loft);
}
.galleri__miniatyrer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: var(--s2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.galleri__miniatyrer button {
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.galleri__miniatyrer img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.galleri__miniatyrer button[aria-current="true"] { border-color: var(--merke); }

.kjopsboks {
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    background: var(--flate);
    padding: var(--s6);
    box-shadow: var(--loft);
    align-self: start;
}
.kjopsboks__pris { padding-bottom: var(--s4); border-bottom: 1px solid var(--linje); margin-bottom: var(--s4); }

/* Kalkulator */
.kalkulator fieldset { border: 0; margin: 0 0 var(--s4); padding: 0; }
.kalkulator legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: var(--s3); }

.valg { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.valg__post { position: relative; }
.valg__post input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.valg__post span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-height: 64px;
    padding: var(--s3);
    border: 1.5px solid var(--linje-sterk);
    border-radius: var(--radius-sm);
    font-size: .88rem;
    color: var(--tekst-svak);
    text-align: center;
}
.valg__post span strong { color: var(--tekst); font-size: .97rem; }
.valg__post input:checked + span {
    border-color: var(--merke-dyp);
    background: var(--merke-lys);
    color: var(--merke-dyp);
}
.valg__post input:focus-visible + span { outline: 3px solid var(--merke); outline-offset: 2px; }

.dogn { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.dogn input {
    width: 88px;
    min-height: 46px;
    padding: var(--s2) var(--s3);
    border: 1.5px solid var(--linje-sterk);
    border-radius: var(--radius-sm);
    font: inherit;
}

.sum { border-top: 2px solid var(--merke-dyp); padding-top: var(--s4); margin-top: var(--s5); }
.sum__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.sum__linjer { list-style: none; padding: 0; margin: var(--s3) 0 0; font-size: .9rem; }
.sum__linjer li {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px dotted var(--linje-sterk);
    color: var(--tekst-svak);
}

/* ---------- 9. Trekkspill ---------- */

.trekkspill { border-top: 1px solid var(--linje); }
.trekkspill__post { border-bottom: 1px solid var(--linje); }
.trekkspill h3 { margin: 0; font-size: 1.05rem; }
.trekkspill button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    background: none;
    border: 0;
    padding: var(--s5) 0;
    text-align: left;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--tekst);
    cursor: pointer;
}
.trekkspill button:hover { color: var(--merke-dyp); }
.trekkspill .tegn { flex: 0 0 auto; position: relative; width: 20px; height: 20px; }
.trekkspill .tegn::before,
.trekkspill .tegn::after { content: ""; position: absolute; background: var(--merke); border-radius: 2px; }
.trekkspill .tegn::before { left: 0; top: 9px; width: 20px; height: 2px; }
.trekkspill .tegn::after { left: 9px; top: 0; width: 2px; height: 20px; transition: transform .15s ease; }
.trekkspill button[aria-expanded="true"] .tegn::after { transform: scaleY(0); }
.trekkspill__panel { padding-bottom: var(--s5); max-width: 66ch; color: var(--tekst-svak); }

/* ---------- 9b. Vurderinger ----------
   Sosialt bevis fra det offentlige API-et. Snittet står som tall framfor
   som fem grafiske stjerner alene: «4,8 av 5, basert på 63 vurderinger»
   er mer troverdig — og mer etterprøvbart — enn en stjernerad.

   Stjernene er dekorasjon og merket aria-hidden i malene; tallet ved
   siden av er det skjermleseren skal lese. */

.snitt {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s3);
    margin: 0 0 var(--s6);
}
.snitt__tall {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--merke-dyp);
    line-height: 1;
    letter-spacing: -.02em;
}
.snitt__av { color: var(--tekst-svak); font-size: .95rem; }

.stjerner { letter-spacing: .12em; color: var(--aksent-dyp); white-space: nowrap; }
.stjerner .tom { color: var(--linje-sterk); }

.vurderinger {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--s5);
}

.vurdering {
    background: var(--flate);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    padding: var(--s5);
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.vurdering blockquote {
    margin: 0;
    color: var(--tekst);
    font-size: 1rem;
}
.vurdering blockquote::before { content: "«"; }
.vurdering blockquote::after { content: "»"; }
.vurdering footer {
    margin-top: auto;
    font-size: .85rem;
    color: var(--tekst-svak);
}

/* Partnerens svar. Visuelt underordnet vurderingen det svarer på — det
   er kunden som har ordet, utleieren som kommenterer. */
.svar {
    margin: 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--linje);
    font-size: .9rem;
    color: var(--tekst-svak);
}
.svar__merke {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 650;
    color: var(--merke-tekst);
    margin-bottom: 2px;
}

/* ---------- 10. Skjema ---------- */

.skjema { display: grid; gap: var(--s5); max-width: 600px; }
.felt { display: grid; gap: var(--s2); }
.felt label { font-weight: 600; font-size: .95rem; }
.felt input, .felt select, .felt textarea {
    border: 1.5px solid var(--linje-sterk);
    border-radius: var(--radius-sm);
    padding: var(--s3) var(--s4);
    min-height: 48px;
    width: 100%;
    font: inherit;
    background: var(--flate);
    color: var(--tekst);
}
.felt input:focus, .felt select:focus, .felt textarea:focus { border-color: var(--merke); }
.felt textarea { min-height: 150px; resize: vertical; }
.felt [aria-invalid="true"] { border-color: var(--feil); }
.felt--avkryssing { display: flex; gap: var(--s3); align-items: flex-start; }
.felt--avkryssing input { width: 20px; height: 20px; min-height: 0; margin-top: 4px; flex: 0 0 auto; }
.felt--avkryssing label { font-weight: 400; font-size: .9rem; color: var(--tekst-svak); }
.feilmelding { color: var(--feil); font-size: .88rem; font-weight: 600; }
.hjelp { font-size: .85rem; color: var(--tekst-svak); }
.honning { position: absolute; left: -9999px; }

/* ---------- 11. Bunn ---------- */

.bunn {
    background: var(--flate-lys);
    border-top: 1px solid var(--linje);
    padding-top: var(--s8);
    font-size: .95rem;
}
.bunn__rutenett { display: grid; gap: var(--s6); padding-bottom: var(--s7); }
.bunn h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tekst-svak);
    margin-bottom: var(--s3);
}
.bunn ul { list-style: none; padding: 0; margin: 0; }
.bunn li { padding: 3px 0; }
.bunn a { text-decoration: none; color: var(--tekst-svak); }
.bunn a:hover { color: var(--merke-dyp); text-decoration: underline; }
.bunn__merke p { color: var(--tekst-svak); margin-top: var(--s3); max-width: 34ch; }

/* Det superlokale lenkeområdet. Sier både til leseren og til søkemotoren
   hvilket geografisk område siten faktisk dekker. */
.omrader { border-top: 1px solid var(--linje); padding-block: var(--s6); }
.omrader h2 { margin-bottom: var(--s4); }
.omraderad { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.omraderad a, .omraderad span {
    display: inline-block;
    background: var(--flate);
    border: 1px solid var(--linje);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: .88rem;
    text-decoration: none;
    color: var(--tekst-svak);
}
.omraderad a:hover { border-color: var(--merke); color: var(--merke-dyp); }
.omraderad span { border-style: dashed; }

.bunn__linje {
    border-top: 1px solid var(--linje);
    padding-block: var(--s5) var(--s6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s6);
    justify-content: space-between;
    font-size: .85rem;
    color: var(--tekst-svak);
}
.bunn__linje p { margin: 0; }

/* Områdekort på oversiktssiden */
.omradegitter { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
.omradekort {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    background: var(--flate);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    padding: var(--s5);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.omradekort:hover { border-color: var(--merke); box-shadow: var(--loft); }
.omradekort strong { font-size: 1.08rem; color: var(--tekst); letter-spacing: -.01em; }
.omradekort span { font-size: .88rem; color: var(--tekst-svak); }

/* ---------- 12. Samtykke ---------- */

.samtykke {
    position: fixed;
    inset: auto var(--s4) var(--s4) var(--s4);
    max-width: 540px;
    margin-inline: auto;
    background: var(--flate);
    border: 1px solid var(--linje-sterk);
    border-radius: var(--radius);
    padding: var(--s5);
    box-shadow: var(--loft-sterk);
    z-index: 50;
    font-size: .92rem;
}
.samtykke p { margin-bottom: var(--s4); color: var(--tekst-svak); }
.samtykke__knapper { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- 13. Utlenke til bookingen ----------
   Bookingen ligger hos BookATrailer, ikke her. Pilen på knappen sier det
   før klikket, dialogen bekrefter det ved klikket. Uten JavaScript åpnes
   dialogen aldri og lenken går rett fram — men pilen og mikroteksten står
   der uansett, så handoffen er synlig også da. */

.knapp--utlenke::after {
    content: "\2197";
    font-size: .9em;
    line-height: 1;
}

.utlenke {
    width: min(460px, calc(100vw - var(--s6)));
    padding: var(--s6);
    border: 1px solid var(--linje-sterk);
    border-radius: var(--radius);
    background: var(--flate);
    color: var(--tekst);
    box-shadow: var(--loft-sterk);
}
.utlenke::backdrop { background: rgba(16, 24, 40, .55); }
.utlenke h2 { font-size: 1.2rem; margin-bottom: var(--s3); }
.utlenke p { color: var(--tekst-svak); margin-bottom: var(--s4); font-size: .95rem; }
.utlenke__vert { color: var(--tekst); overflow-wrap: anywhere; }
.utlenke__husk {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s5);
    font-size: .88rem;
    color: var(--tekst-svak);
}
.utlenke__knapper { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- 14. Responsivt ---------- */

@media (min-width: 640px) {
    .kortrad--2 { grid-template-columns: repeat(2, 1fr); }
    .omradegitter { grid-template-columns: repeat(2, 1fr); }
    .valg { grid-template-columns: repeat(4, 1fr); }
    .steg { grid-template-columns: repeat(3, 1fr); }
    .vurderinger { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .meny { display: block; }
    .topp__cta { display: inline-flex; }
    .menyknapp { display: none; }
    .skuff { display: none !important; }

    .hero__rutenett { grid-template-columns: 1.05fr .95fr; }
    .kortrad--3 { grid-template-columns: repeat(3, 1fr); }
    .omradegitter { grid-template-columns: repeat(3, 1fr); }
    .vurderinger { grid-template-columns: repeat(3, 1fr); }
    .todelt { grid-template-columns: 1.15fr .85fr; }
    .todelt--likt { grid-template-columns: 1fr 1fr; }
    .modelltopp { grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr); }
    .bunn__rutenett { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
    .kjopsboks { position: sticky; top: 96px; }
}

@media (max-width: 899px) {
    :root { --seksjon-luft: 64px; }
    .hero__rad { padding-block: var(--s7); }
    .nokkeltall { gap: var(--s6); margin-top: var(--s7); }
    .bunn__rutenett { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    body { font-size: 16px; }
    .ramme { padding-inline: var(--s4); }
    .bunn__rutenett { grid-template-columns: 1fr; }
    .nokkeltall { gap: var(--s5); }
    .nokkeltall__tall { font-size: 1.7rem; }
    .kjopsboks, .faktaboks { padding: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .topp, .bunn, .samtykke, .knapperad, .kjopsboks { display: none !important; }
    body { font-size: 12pt; }
}