:root {
  /* ---------------------------------------------------------------- farge
     Seks. Ikke flere. Hadde 29 hex og 18 rgba før oppryddingen
     3. oktober 2026 – fire grønntoner, seks gråtoner og to varselpaletter
     som gjorde samme jobb. */
  --aksent: #14503c;          /* den ene grønne */
  --aksent-flate: #e8f1ec;    /* samme grønn, som bakgrunn */
  --tekst: #1b2520;           /* brødtekst og overskrifter */
  --tekst-svak: #566a61;      /* underteksten, aldri brødtekst */
  --bak: #ffffff;             /* sidens bunn */
  --flate: #f7f6f2;           /* kort og seksjoner som skal løftes */
  --linje: #e2e6e3;           /* den ene kantlinjefargen */

  /* --------------------------------------------------------------- skrift
     Én skrifttype. Fem størrelser, to vekter. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.875rem;   /* 14 – småtekst, etiketter */
  --t-s: 1rem;        /* 16 – brødtekst */
  --t-m: 1.25rem;     /* 20 – ingress, h3 */
  --t-l: 1.75rem;     /* 28 – h2 */
  --t-xl: 2.5rem;     /* 40 – h1 */
  --vekt: 400;
  --vekt-tung: 600;

  /* ------------------------------------------------------------- avstand
     Seks trinn. Hadde 43 verdier, hvorav 11 ble brukt én gang hver. */
  --r1: 4px;
  --r2: 8px;
  --r3: 16px;
  --r4: 24px;
  --r5: 40px;
  --r6: 64px;

  /* ---------------------------------------------------------------- form */
  --radius: 12px;             /* kort og felt */
  --radius-rund: 999px;       /* brikker og knapper */
  --skygge: 0 -1px 12px rgba(27, 37, 32, .08);   /* bare den faste prislinjen */

  --bredde: 1120px;           /* maks innholdsbredde */
  --lesebredde: 65ch;         /* maks tekstspalte */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-s);
  line-height: 1.65;
  color: var(--tekst);
  background: var(--bak);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: var(--vekt-tung); letter-spacing: -.015em; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--aksent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--aksent); }

small { font-size: var(--t-xs); }
strong { font-weight: var(--vekt-tung); }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

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

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

.hopp {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--aksent); color: var(--bak); padding: var(--r2) var(--r3); border-radius: 0 0 var(--radius) 0;
}
.hopp:focus { left: 0; color: var(--bak); }

/* ------------------------------------------------------------------ layout */

.ramme { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--r3); }

section { padding: var(--r5) 0; }
section.tett { padding: var(--r4) 0; }
.flate-sand { background: var(--flate); }
.flate-gronn { background: var(--aksent); color: var(--bak); }
.flate-gronn h2, .flate-gronn h3 { color: var(--bak); }
.flate-gronn a { color: var(--bak); }
.flate-lys { background: var(--aksent-flate); }

.midt { text-align: center; }
.smal { max-width: 46rem; }
.smal.midt { margin-left: auto; margin-right: auto; }

.rutenett { display: grid; gap: var(--r3); }
.rutenett-2 { grid-template-columns: 1fr; }
.rutenett-3 { grid-template-columns: 1fr; }
.rutenett-4 { grid-template-columns: 1fr; }

.seksjonstopp { max-width: 44rem; margin-bottom: var(--r4); }
.seksjonstopp.midt { margin-left: auto; margin-right: auto; }
.stikkord {
  display: inline-block; font-size: var(--t-xs); font-weight: var(--vekt-tung); letter-spacing: .08em;
  text-transform: uppercase; color: var(--aksent); background: var(--aksent-flate);
  padding: var(--r1) var(--r2); border-radius: var(--radius-rund); margin-bottom: var(--r3);
}
.flate-gronn .stikkord { background: rgba(255, 255, 255, .18); color: var(--bak); }
.ingress { font-size: var(--t-m); color: var(--tekst-svak); }
.flate-gronn .ingress { color: var(--bak); }

/* ----------------------------------------------------------------- knapper */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 3.25rem; padding: var(--r3) var(--r4);
  font: inherit; font-weight: var(--vekt-tung); font-size: var(--t-s);
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  text-decoration: none; text-align: center; transition: background .15s, border-color .15s, transform .05s;
}
.knapp:active { transform: translateY(1px); }
.knapp-primaer { background: var(--aksent); color: var(--bak); border-color: var(--aksent); }
.knapp-primaer:hover { background: var(--aksent); border-color: var(--aksent); color: var(--bak); }
.knapp-sekundaer { background: var(--bak); color: var(--aksent); border-color: var(--linje); }
.knapp-sekundaer:hover { background: var(--aksent-flate); color: var(--aksent); }
.knapp-liten { min-height: 2var(--r2); padding: var(--r2) var(--r3); font-size: var(--t-s); }
.knapp-stor { min-height: 3var(--r2); font-size: var(--t-m); padding: var(--r3) var(--r4); }
.knapp-full { width: 100%; }
.knapp[disabled] { opacity: .45; cursor: not-allowed; }
.flate-gronn .knapp-primaer { background: var(--bak); color: var(--aksent); border-color: var(--bak); }
.flate-gronn .knapp-primaer:hover { background: var(--aksent-flate); color: var(--aksent); }
.flate-gronn .knapp-sekundaer { background: transparent; color: var(--bak); border-color: var(--bak); }

.knapprad { display: flex; flex-wrap: wrap; gap: var(--r2); }
.knapprad.midt { justify-content: center; }

/* ------------------------------------------------------------------- topp */

.topp { position: sticky; top: 0; z-index: 50; background: var(--bak); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linje); }
.topp-rad { display: flex; align-items: center; gap: var(--r3); min-height: 4.25rem; }

.logo { display: flex; align-items: center; gap: var(--r2); text-decoration: none; color: var(--tekst); font-weight: var(--vekt-tung); font-size: var(--t-m); letter-spacing: -.02em; }
.logo-merke { width: 1.4rem; height: 1.4rem; border-radius: var(--radius); background: var(--aksent); flex: none; position: relative; }
.logo-merke::after { content: ""; position: absolute; inset: 5px 5px auto 5px; height: 4px; border-radius: var(--radius); background: var(--bak); opacity: .9; }
/* Ordlogoen tegnes inline som SVG av komponentLogo(), med currentColor.
   Hoeyden settes her og bredden foelger av seg selv, saa den sitter likt i
   toppen og i footeren uten to sett regler. */
.logo-tekst { color: var(--aksent); display: flex; }
.logo-svg { height: 1.35rem; width: auto; display: block; }
.bunn-logo .logo-svg { height: 1.5rem; }

.hovedmeny { display: none; }
.hovedmeny ul { display: flex; gap: var(--r3); list-style: none; margin: 0; padding: 0; }
.hovedmeny a { color: var(--tekst); text-decoration: none; font-weight: var(--vekt-tung); font-size: var(--t-s); }
.hovedmeny a:hover { color: var(--aksent); text-decoration: underline; }

.meny-knapp {
  margin-left: auto; width: 2var(--r2); height: 2var(--r2); flex: none;
  background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius); cursor: pointer;
  display: grid; place-items: center;
}
.meny-strek, .meny-strek::before, .meny-strek::after {
  display: block; width: 18px; height: 2px; background: var(--tekst); border-radius: var(--radius); content: "";
}
.meny-strek { position: relative; }
.meny-strek::before { position: absolute; top: -6px; }
.meny-strek::after { position: absolute; top: 6px; }

.topp-handling { display: none; margin-left: auto; align-items: center; gap: var(--r2); }
.topp-tlf { font-weight: var(--vekt-tung); text-decoration: none; white-space: nowrap; font-size: var(--t-s); }

body.meny-apen .hovedmeny {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bak); border-bottom: 1px solid var(--linje); box-shadow: none; padding: var(--r2) var(--r3) var(--r3);
}
body.meny-apen .hovedmeny ul { flex-direction: column; gap: 0; }
body.meny-apen .hovedmeny li { margin: 0; border-bottom: 1px solid var(--linje); }
body.meny-apen .hovedmeny a { display: block; padding: var(--r3) var(--r1); font-size: var(--t-s); }

/* -------------------------------------------------------------- brødsmuler */

.brodsmuler { background: var(--flate); border-bottom: 1px solid var(--linje); font-size: var(--t-xs); }
.brodsmuler ol {
  list-style: none; margin: 0 auto; padding: var(--r2) var(--r3); max-width: 1140px;
  display: flex; flex-wrap: wrap; gap: var(--r1) var(--r2);
}
.brodsmuler li { margin: 0; color: var(--tekst-svak); display: flex; gap: var(--r2); align-items: center; }
.brodsmuler li + li::before { content: "/"; color: var(--linje); }
.brodsmuler a { color: var(--tekst-svak); }
.brodsmuler [aria-current] { color: var(--tekst); font-weight: var(--vekt-tung); }

/* ------------------------------------------------------------------- hero */

.hero { padding: var(--r5) 0 var(--r5); background: linear-gradient(180deg, var(--aksent-flate) 0%, var(--bak) 100%); }
.hero h1 { margin-bottom: var(--r2); }
.hero-ingress { font-size: var(--t-m); color: var(--tekst-svak); max-width: 34rem; }
.hero-boks { max-width: 38rem; }

.postboks { margin: var(--r4) 0 var(--r3); }
.postboks-rad { display: flex; flex-wrap: wrap; gap: var(--r2); }
.postboks label { display: block; font-weight: var(--vekt-tung); font-size: var(--t-s); margin-bottom: var(--r2); }
.postboks input {
  flex: 1 1 8rem; min-width: 0; min-height: 3.25rem; padding: var(--r2) var(--r3);
  font: inherit; font-size: var(--t-s); border: 1px solid var(--linje); border-radius: var(--radius); background: var(--bak);
}
.postboks input:focus { border-color: var(--aksent); outline: none; }
.postsvar { margin-top: var(--r2); font-weight: var(--vekt-tung); font-size: var(--t-s); min-height: 1.4rem; }
.postsvar.ja { color: var(--aksent); }
.postsvar.nei { color: var(--tekst); }

.hero-tlf { margin-top: var(--r3); font-size: var(--t-s); color: var(--tekst-svak); }
.hero-tlf a { font-weight: var(--vekt-tung); font-size: var(--t-s); }

/* ------------------------------------------------------------------ tillit */

.tillit {
  list-style: none; margin: 0; padding: var(--r3) 0; display: flex; flex-wrap: wrap;
  gap: var(--r2) var(--r4); font-size: var(--t-xs); color: var(--tekst-svak);
}
.tillit li { margin: 0; display: flex; gap: var(--r2); }
.tillit strong { color: var(--tekst); }
.tillit li::before { content: "✓"; color: var(--aksent); font-weight: var(--vekt-tung); }

/* -------------------------------------------------------------- fastpriser */

.fastpris { background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius); box-shadow: none; overflow: hidden; }
.faner { display: flex; overflow-x: auto; border-bottom: 1px solid var(--linje); background: var(--flate); -webkit-overflow-scrolling: touch; }
.fane {
  flex: 1 0 auto; padding: var(--r3); font: inherit; font-weight: var(--vekt-tung); font-size: var(--t-s);
  background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; color: var(--tekst-svak);
  white-space: nowrap;
}
.fane.er-valgt { color: var(--aksent); background: var(--bak); border-bottom-color: var(--aksent); }
.merke { display: inline-block; font-size: var(--t-xs); font-weight: var(--vekt-tung); text-transform: uppercase; letter-spacing: .04em; background: var(--aksent-flate); color: var(--tekst); padding: var(--r1) var(--r2); border-radius: var(--radius-rund); margin-left: var(--r1); }

.prispanel { padding: var(--r3); }
.prispanel-hva { font-weight: var(--vekt-tung); color: var(--aksent); margin-bottom: var(--r3); }
.prisliste { list-style: none; margin: 0; padding: 0; }
.prisrad {
  display: grid; grid-template-columns: 1fr auto; gap: var(--r1) var(--r2); align-items: baseline;
  padding: var(--r3) 0; border-top: 1px solid var(--linje); margin: 0;
}
.prisrad:first-child { border-top: 0; }
.prisrad-navn { font-weight: var(--vekt-tung); display: flex; flex-direction: column; }
.prisrad-navn small { font-weight: var(--vekt); color: var(--tekst-svak); }
.prisrad-pris { color: var(--tekst-svak); font-size: var(--t-s); text-align: right; }
.prisrad-pris strong { font-size: var(--t-m); color: var(--tekst); display: block; }
.prisrad-lenke { grid-column: 1 / -1; font-size: var(--t-xs); font-weight: var(--vekt-tung); align-self: center; }
.prisnote { padding: var(--r3); background: var(--flate); border-top: 1px solid var(--linje); font-size: var(--t-xs); color: var(--tekst-svak); margin: 0; }

/* ----------------------------------------------------------------- ikonrad */

.ikonrad { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); grid-template-columns: repeat(2, 1fr); }
.ikonrad li { margin: 0; display: flex; gap: var(--r2); align-items: flex-start; font-size: var(--t-s); font-weight: var(--vekt-tung); }
.ikonrad .ikon {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: var(--aksent-flate);
  display: grid; place-items: center; font-size: var(--t-m);
}
.flate-gronn .ikonrad .ikon { background: rgba(255, 255, 255, .18); }

/* ------------------------------------------------------------------- steg */

.steg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r3); counter-reset: s; }
.steg li { margin: 0; padding-left: var(--r5); position: relative; counter-increment: s; }
.steg li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--aksent); color: var(--bak);
  display: grid; place-items: center; font-weight: var(--vekt-tung);
}
.steg h3 { margin-bottom: var(--r1); }
.steg p { color: var(--tekst-svak); margin: 0; }
.flate-gronn .steg li::before { background: var(--bak); color: var(--aksent); }
.flate-gronn .steg p { color: var(--bak); }

/* ----------------------------------------------------------------- kort */

.kort { background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius); padding: var(--r4); box-shadow: none; }
.kort h3 { margin-bottom: var(--r2); }
.kort p { color: var(--tekst-svak); }
.kort-lenke { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.kort-lenke:hover { border-color: var(--linje); box-shadow: none; color: inherit; }
.kort-lenke .les-mer { font-weight: var(--vekt-tung); color: var(--aksent); }

.pakkekort { display: grid; gap: var(--r3); grid-template-columns: 1fr; }
.pakke {
  background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius); padding: var(--r4);
  display: flex; flex-direction: column; gap: var(--r2); box-shadow: none; position: relative;
}
.pakke.er-anbefalt { border: 2px solid var(--aksent); box-shadow: none; }
.pakke-merke {
  position: absolute; top: -.8rem; left: 1.5rem; background: var(--aksent); color: var(--bak);
  font-size: var(--t-xs); font-weight: var(--vekt-tung); text-transform: uppercase; letter-spacing: .05em;
  padding: var(--r1) var(--r2); border-radius: var(--radius-rund); margin: 0;
}
.pakke h3 { margin: 0; }
.pakke-hva { color: var(--aksent); font-weight: var(--vekt-tung); font-size: var(--t-s); margin: 0; }
.pakke-pris { margin: var(--r2) 0; color: var(--tekst-svak); font-size: var(--t-s); }
.pakke-pris strong { display: block; font-size: var(--t-l); color: var(--tekst); line-height: 1.1; }
.pakke-pris small { display: block; color: var(--tekst-svak); }
.pakke-passer { font-size: var(--t-s); }
.pakke .knapp { width: 100%; }
.pakke .knapp-sekundaer { margin-top: auto; }

.hake { list-style: none; margin: var(--r2) 0 var(--r3); padding: 0; font-size: var(--t-s); }
.hake li { margin: 0 0 var(--r2); padding-left: var(--r4); position: relative; }
.hake li::before { content: "✓"; position: absolute; left: 0; color: var(--aksent); font-weight: var(--vekt-tung); }
.flate-gronn .hake li::before { color: var(--bak); }

/* -------------------------------------------------------- veggtilstandskort */

.tilstandskort { display: grid; gap: var(--r3); grid-template-columns: 1fr; }
.tilstandskort figure { margin: 0; background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius); overflow: hidden; }
.tilstandskort img, .bildeplass {
  width: 100%; aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, var(--aksent-flate), var(--aksent-flate) 12px, var(--flate) 12px, var(--flate) 24px);
  display: grid; place-items: center; color: var(--tekst-svak); font-size: var(--t-xs); text-align: center; padding: var(--r3);
}
.tilstandskort figcaption { padding: var(--r3); }
.tilstandskort figcaption strong { display: block; }
.tilstandskort figcaption span { color: var(--tekst-svak); font-size: var(--t-s); }

.forretter { display: grid; gap: var(--r3); grid-template-columns: 1fr 1fr; }
.forretter figure { margin: 0; }
.forretter figcaption { font-size: var(--t-xs); font-weight: var(--vekt-tung); padding-top: var(--r2); }

/* -------------------------------------------------------------------- faq */

.faq { max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--linje); padding: var(--r1) 0; }
.faq summary {
  cursor: pointer; font-weight: var(--vekt-tung); padding: var(--r3) var(--r4) var(--r3) 0; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: var(--r3); font-size: var(--t-l); color: var(--aksent); font-weight: var(--vekt); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--r3); color: var(--tekst-svak); }

/* ------------------------------------------------------- forutsetningsboks */

.forutsetninger { background: var(--flate); border: 1px solid var(--linje); border-left: 2px solid var(--aksent); border-radius: var(--radius); padding: var(--r3); font-size: var(--t-s); }
.forutsetninger h3 { font-size: var(--t-s); margin-bottom: var(--r2); }
.forutsetninger ul { margin: 0; padding-left: 1.2em; color: var(--tekst-svak); }

.varsel { border-radius: var(--radius); padding: var(--r3); font-size: var(--t-s); border: 1px solid; }
.varsel-gul { background: var(--aksent-flate); border-color: var(--linje); color: var(--tekst); }
.varsel-rod { background: var(--aksent-flate); border-color: var(--linje); color: var(--tekst); }
.varsel-gronn { background: var(--aksent-flate); border-color: var(--linje); color: var(--aksent); }

.soneliste { list-style: none; margin: 0; padding: 0; }
.soneliste li { display: flex; flex-wrap: wrap; gap: var(--r1) var(--r2); align-items: baseline; padding: var(--r2) 0; border-top: 1px solid var(--linje); margin: 0; }
.soneliste li:first-child { border-top: 0; }
.soneliste span { color: var(--tekst-svak); font-size: var(--t-s); }
.soneliste em { color: var(--aksent); font-style: normal; font-weight: var(--vekt-tung); font-size: var(--t-s); margin-left: auto; }

/* ------------------------------------------------------------------ tabell */

.tabellramme { overflow-x: auto; border: 1px solid var(--linje); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
th, td { padding: var(--r3); text-align: left; border-bottom: 1px solid var(--linje); }
th { background: var(--flate); font-weight: var(--vekt-tung); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td.tall, th.tall { text-align: right; white-space: nowrap; }

/* ============================================================= kalkulator */

.kalk { background: var(--flate); padding: var(--r4) 0 var(--r5); }
.kalk-ramme { max-width: 44rem; margin: 0 auto; padding: 0 var(--r3); }

.kalk-kort { background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius); padding: var(--r4); box-shadow: none; }

.felt { margin-bottom: var(--r4); }
.felt > label, .felt > .feltnavn { display: block; font-weight: var(--vekt-tung); margin-bottom: var(--r2); }
.felt .hjelp { font-size: var(--t-xs); color: var(--tekst-svak); font-weight: var(--vekt); margin: -var(--r1) 0 var(--r2); }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 3.25rem; padding: var(--r2) var(--r3); font: inherit; font-size: var(--t-s);
  border: 1px solid var(--linje); border-radius: var(--radius); background: var(--bak); color: var(--tekst);
}
textarea { min-height: 6rem; }
input:focus, select:focus, textarea:focus { border-color: var(--aksent); outline: none; }
input[aria-invalid="true"] { border-color: var(--tekst); }

/* valgkort (radio/checkbox som kort) */
.valg { display: grid; gap: var(--r2); }
.valg-2 { grid-template-columns: 1fr 1fr; }
.valg-3 { grid-template-columns: repeat(3, 1fr); }

/*
  Tre kort ved siden av hverandre blir rundt 100 px hver på en vanlig mobil.
  Det holder til «God» og «Middels», men ikke til et kort med forklaring under –
  da får vi ett ord per linje. Under 40rem stables de i stedet.
  Gjelder tilstand, møblering, underlag og «er veggene mørke i dag».
*/
@media (max-width: 40rem) {
  .valg-3 { grid-template-columns: 1fr; }
}
.valgkort {
  position: relative; display: flex; gap: var(--r2); align-items: flex-start;
  border: 1px solid var(--linje); border-radius: var(--radius); padding: var(--r3); background: var(--bak); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.valgkort:hover { border-color: var(--linje); }
.valgkort input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.valgkort .tittel { font-weight: var(--vekt-tung); display: block; }
.valgkort .under { font-size: var(--t-xs); color: var(--tekst-svak); display: block; }
.valgkort .pris { font-weight: var(--vekt-tung); color: var(--aksent); font-size: var(--t-s); }
.valgkort:has(input:checked) { border-color: var(--aksent); background: var(--aksent-flate); }
.valgkort:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }
.valgkort.sentrert { flex-direction: column; align-items: center; text-align: center; gap: var(--r1); }
.valgkort .bildeplass { aspect-ratio: 16 / 10; border-radius: var(--radius); margin-bottom: var(--r2); }
.valgkort .merke { position: absolute; top: -.7rem; right: .7rem; background: var(--aksent); color: var(--bak); }

.utregning { background: var(--aksent-flate); border-radius: var(--radius); padding: var(--r3); font-size: var(--t-s); }
.utregning strong { font-size: var(--t-m); }

/* romliste */
.romliste { display: grid; gap: var(--r2); margin-bottom: var(--r3); }

.oppstilling { margin-bottom: var(--r4); }
.oppstilling h3 { font-size: var(--t-s); margin-bottom: var(--r1); }
.oppstilling .romtittel { display: flex; justify-content: space-between; gap: var(--r3); align-items: baseline; padding: var(--r3) 0 var(--r2); border-top: 1px solid var(--linje); font-weight: var(--vekt-tung); }
.oppstilling .romtittel small { font-weight: var(--vekt); color: var(--tekst-svak); }
.oppstilling ul { list-style: none; margin: 0 0 var(--r2); padding: 0; font-size: var(--t-s); }
.oppstilling ul li { display: flex; justify-content: space-between; gap: var(--r3); padding: var(--r1) 0; border-bottom: 1px solid var(--linje); margin: 0; }

.oppstilling .sum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.oppstilling .totalrad { display: flex; justify-content: space-between; gap: var(--r3); padding: var(--r3) 0; border-top: 1px solid var(--linje); font-weight: var(--vekt-tung); font-size: var(--t-m); }
.oppstilling .delsum { display: flex; justify-content: space-between; gap: var(--r3); padding: var(--r1) 0; font-size: var(--t-s); color: var(--tekst-svak); }

.samtykkeboks { display: flex; gap: var(--r2); align-items: flex-start; background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius); padding: var(--r3); font-size: var(--t-s); }
.samtykkeboks input { width: 1.4rem; height: 1.4rem; flex: none; margin-top: var(--r1); accent-color: var(--aksent); }

.filliste { font-size: var(--t-xs); color: var(--tekst-svak); margin-top: var(--r2); }

.samtykke-innhold {
  max-width: 36rem; margin: 0 auto; background: var(--bak); border: 1px solid var(--linje);
  border-radius: var(--radius); box-shadow: var(--skygge); padding: var(--r3); font-size: var(--t-s);
}
.samtykke-valg { display: flex; flex-wrap: wrap; gap: var(--r2) var(--r3); margin: var(--r3) 0; }
.samtykke-valg label { display: flex; gap: var(--r2); align-items: center; font-weight: var(--vekt-tung); }
.samtykke-valg input { accent-color: var(--aksent); width: 1.1rem; height: 1.1rem; }
.samtykke-knapper { display: flex; flex-wrap: wrap; gap: var(--r2); }
.samtykke-knapper .knapp { flex: 1 1 10rem; }
.samtykke-lenke { margin: var(--r3) 0 0; font-size: var(--t-xs); }

/* ------------------------------------------------------------------- bunn */

.bunn { background: var(--tekst); color: var(--bak); padding: var(--r5) 0 var(--r4); font-size: var(--t-s); }
.bunn a { color: var(--bak); text-decoration: none; }
.bunn a:hover { color: var(--bak); text-decoration: underline; }
.bunn h3 { color: var(--bak); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--r3); }
.bunn-topp { display: grid; gap: var(--r5); }
.bunn-logo { font-size: var(--t-m); font-weight: var(--vekt-tung); color: var(--bak); margin-bottom: var(--r2); }

.bunn-om { max-width: 22rem; }
.bunn-om .knapp { margin-top: var(--r3); }
.bunn-kontakt { margin-top: var(--r3); }
.bunn-kontakt a { font-weight: var(--vekt-tung); color: var(--bak); }
.bunn-lenker { display: grid; gap: var(--r4); grid-template-columns: 1fr 1fr; }
.bunn-lenker ul { list-style: none; margin: 0; padding: 0; }
.bunn-lenker li { margin-bottom: var(--r2); }
.bunn-juss { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: var(--r5); padding-top: var(--r4); font-size: var(--t-xs); color: var(--bak); }
.bunn-juss p { margin: 0 0 var(--r1); }

/* ========================================================== mellomstore */

@media (min-width: 600px) {
  .rutenett-2 { grid-template-columns: 1fr 1fr; }
  .rutenett-4 { grid-template-columns: 1fr 1fr; }
  .ikonrad { grid-template-columns: repeat(3, 1fr); }
  .tilstandskort { grid-template-columns: repeat(3, 1fr); }

  .prisrad { grid-template-columns: 1fr auto auto; }
  .prisrad-lenke { grid-column: auto; }
  .bunn-lenker { grid-template-columns: repeat(4, 1fr); }
  section { padding: var(--r6) 0; }
}

@media (min-width: 900px) {
  .hovedmeny { display: block; }
  .meny-knapp { display: none; }
  .topp-handling { display: flex; }
  .rutenett-3 { grid-template-columns: repeat(3, 1fr); }
  .rutenett-4 { grid-template-columns: repeat(4, 1fr); }
  .pakkekort { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: var(--r6) 0 var(--r6); }
  .hero-rad { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--r5); align-items: center; }
  .steg { grid-template-columns: repeat(2, 1fr); gap: var(--r4); }
  .bunn-topp { grid-template-columns: 20rem 1fr; gap: var(--r6); }
  .forretter { gap: var(--r4); }
}

@media (min-width: 1100px) {
  .pakkekort { grid-template-columns: repeat(4, 1fr); }
  .steg { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* fargekortet -------------------------------------------------------------
   Ett kort per flate som er med i jobben. Tekstfelt og fire glansknapper –
   kunden skriver fargen, vi slår ikke opp noe. */
.flatekort {
  border: 1px solid var(--linje); border-radius: var(--radius);
  padding: var(--r3); margin-bottom: var(--r3); background: var(--flate);
}
.flatekort h3 { margin: 0 0 var(--r3); font-size: var(--t-m); }
.flatekort input[type="text"] { width: 100%; }
.hjelp-inline { font-weight: var(--vekt); color: var(--tekst-svak); font-size: var(--t-xs); }

.fargerom h4 { margin: var(--r4) 0 var(--r2); font-size: var(--t-s); color: var(--tekst-svak); }
.fargerom:first-child h4 { margin-top: 0; }

.lenkeknapp {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--aksent); font-weight: var(--vekt-tung); text-decoration: underline;
}

/* glans */
.glansrad { display: flex; flex-wrap: wrap; gap: var(--r2); }
/*
  Glansknappene er ekte radioknapper. Selve sirkelen er skjult for øyet, men
  finnes for skjermlesere og for tastaturnavigasjon – piltastene flytter
  mellom dem, slik en radiogruppe skal.
*/
.glansknapp {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: var(--vekt-tung); min-width: 3rem; min-height: 2var(--r2); padding: var(--r2) var(--r2);
  background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius); cursor: pointer; color: var(--tekst);
}
.glansknapp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.glansknapp:hover { border-color: var(--linje); }
.glansknapp.er-valgt { border-color: var(--aksent); background: var(--aksent-flate); color: var(--aksent); }
.glansknapp:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }
.glans-annet { margin-top: var(--r2); }

/* oppsummeringstabell */
.fargetabell { font-size: var(--t-xs); }
.fargetabell th { white-space: nowrap; }

@media (min-width: 720px) {
}

/* ---------------------------------------------- areal, mål og romliste */

.malfelt { margin-top: var(--r2); padding: var(--r3); background: var(--aksent-flate); border-radius: var(--radius); }

.lenkeknapp-fare { color: var(--tekst); }
.lenkeknapp-fare:hover { color: var(--tekst); }

@media (min-width: 560px) {

}

.medikke { margin: var(--r4) 0; }
.kryss { list-style: none; margin: var(--r2) 0 var(--r3); padding: 0; font-size: var(--t-s); }
.kryss li { margin: 0 0 var(--r2); padding-left: var(--r4); position: relative; color: var(--tekst-svak); }
.kryss li::before { content: "×"; position: absolute; left: 0; color: var(--tekst); font-weight: var(--vekt-tung); }

.garantiboks {
  border: 2px solid var(--aksent); border-radius: var(--radius); padding: var(--r3); margin: 0 0 var(--r3);
}
.garantiboks h3 { margin: 0 0 var(--r1); font-size: var(--t-s); color: var(--aksent); }
.garantiboks p { margin: 0; font-size: var(--t-s); }
.betalingslinje {
  font-size: var(--t-s); color: var(--tekst-svak); margin: 0 0 var(--r4);
  padding-left: var(--r4); position: relative;
}
.betalingslinje::before { content: "✓"; position: absolute; left: 0; color: var(--aksent); font-weight: var(--vekt-tung); }

.takk-detaljer {
  margin: var(--r2) 0 0; padding: var(--r3); background: var(--flate);
  border: 1px solid var(--linje); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-xs); line-height: 1.6; white-space: pre-wrap; overflow-x: auto;
}



/* ------------------------------------------------------- priseksempler */

.eksempler { display: grid; gap: var(--r3); grid-template-columns: 1fr; }
.eksempel {
  background: var(--bak); border: 1px solid var(--linje); border-radius: var(--radius);
  padding: var(--r3); box-shadow: none;
}
.eksempel-rom { font-weight: var(--vekt-tung); font-size: var(--t-s); margin: 0 0 var(--r1); }
.eksempel-rom small { display: block; font-weight: var(--vekt); color: var(--tekst-svak); }
.eksempel-pakke { color: var(--aksent); font-weight: var(--vekt-tung); font-size: var(--t-s); margin: 0 0 var(--r2); }
.eksempel-pris { font-size: var(--t-l); font-weight: var(--vekt-tung); line-height: 1.1; margin: 0 0 var(--r1); }
.eksempel-pris small { display: block; font-size: var(--t-xs); font-weight: var(--vekt); color: var(--tekst-svak); }
.eksempel-dager { margin: 0; font-size: var(--t-xs); color: var(--tekst-svak); }
.prisliste-dato { margin: var(--r3) 0 0; color: var(--tekst-svak); }

@media (min-width: 720px) { .eksempler { grid-template-columns: repeat(3, 1fr); } }

/* Lenkelister (forsiden: rom og steder) -------------------------------- */
.lenkeliste { list-style: none; margin: 0; padding: 0; }
.lenkeliste li { border-bottom: 1px solid var(--linje); }
.lenkeliste li:last-child { border-bottom: 0; }
.lenkeliste a {
  display: block;
  padding: var(--r2) var(--r1);
  font-weight: var(--vekt-tung);
  text-decoration: none;
}
.lenkeliste a:hover { text-decoration: underline; }
.lenkeliste-steder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--r3); }

/* Innholdsliste i vilkårene ------------------------------------------- */
.vilkar-innhold {
  background: var(--flate);
  border-left: 2px solid var(--aksent);
  padding: var(--r3);
  margin: var(--r4) 0 var(--r5);
}
.vilkar-innhold p { margin: 0 0 var(--r2); }
.vilkar-innhold ul { margin: 0; padding-left: var(--r3); }
.vilkar-innhold li { margin: var(--r1) 0; }

/* Feltet for førtidig oppstart når det faktisk gjelder. */
.felt.er-fremhevet {
  border-left: 2px solid var(--aksent);
  padding-left: var(--r3);
}

/* Kvitteringen på /takk ------------------------------------------------- */
.kvittering-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--r2); }
.kvittering-topp h2 { margin: 0; }
.tilbudsid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-xs); font-weight: var(--vekt-tung); color: var(--aksent);
  background: var(--aksent-flate); padding: var(--r1) var(--r2); border-radius: var(--radius-rund); margin: 0;
}
.kvittering-firma {
  margin-top: var(--r4); padding-top: var(--r3); border-top: 1px solid var(--linje);
  font-size: var(--t-xs); color: var(--tekst-svak);
}

/*
  Utskrift av kvitteringen. Kunden skal kunne lagre den som PDF og ha et
  dokument som står på egne bein: pris, dato, vilkår og firmaopplysninger,
  uten meny, knapper eller samtykkebanner.
*/
@media print {
  .topp, .bunn, .samtykke, .navigasjon, .brodsmuler,
  .skjul-ved-utskrift { display: none !important; }

  body { font-size: 11pt; color: var(--tekst); background: var(--bak); }
  section { padding: 0; }
  .ramme { max-width: none; padding: 0; }

  .kvittering {
    border: 1px solid var(--linje); border-radius: 0; padding: var(--r4);
    break-inside: avoid; box-shadow: none;
  }
  .takk-detaljer { white-space: pre-wrap; font-size: 9pt; border: 1px solid var(--linje); }

  .varsel { border: 1px solid var(--linje); background: none !important; }

  /* Lenker er ubrukelige på papir uten adressen. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--tekst-svak); }
  a[href^="/"]::after { content: " (sparkla.no" attr(href) ")"; font-size: 9pt; color: var(--tekst-svak); }

  .kort, .garantiboks { break-inside: avoid; }

  /* ---- ferdigrapporten på /admin/ferdigrapport ---- */
  /* Bare rapporten skal på papir. Skjemaet, varselet og forhåndsvisnings-
     overskriften er verktøy, ikke dokument. */
  .side-rapport .kun-skjerm { display: none !important; }

  .side-rapport .rapport {
    border: 0; border-radius: 0; padding: 0;
  }
  .side-rapport .rapport-tabell { font-size: 10pt; }
  .side-rapport .rapport-fakta { margin-bottom: var(--r4); }
  .side-rapport .rapport h3 { break-after: avoid; }
  .side-rapport .rapport-tabell tr,
  .side-rapport .rapport-bilderutenett img { break-inside: avoid; }

  /* Adressen bak hver lenke er nyttig ellers, men rapporten oppgir
     adressene i klartekst der de trengs – da blir det dobbelt opp. */
  .side-rapport a[href^="http"]::after,
  .side-rapport a[href^="/"]::after { content: none; }
}

/* Bildestatus og innsendingsstatus ------------------------------------- */
.filstatus { font-size: var(--t-s); margin: 0; }
.filstatus:empty { display: none; }
.filstatus.er-ok { color: var(--aksent); font-weight: var(--vekt-tung); }
.filstatus.er-feil {
  color: var(--tekst); font-weight: var(--vekt-tung);
  background: var(--aksent-flate); border-radius: var(--radius); padding: var(--r2) var(--r3);
}

.innsendingsstatus {
  margin: var(--r3) 0; padding: var(--r3); border-radius: var(--radius);
  font-weight: var(--vekt-tung); font-size: var(--t-s);
}
.innsendingsstatus.er-feil { background: var(--aksent-flate); color: var(--tekst); border: 1px solid var(--linje); }
.innsendingsstatus.er-venter { background: var(--aksent-flate); color: var(--aksent); border: 1px solid var(--linje); }
.innsendingsstatus:empty { display: none; }

/*
 * Kunden kjøper malingen selv: besparelsen, mengden og vilkårene.
 *
 * Boksen er grønn fordi den er gode nyheter – prisen går ned. Vilkårene står i
 * samme boks, i mindre skrift, fordi de hører til valget og ikke skal måtte
 * letes opp i vilkårssiden etterpå.
 */
.kundens-maling {
  margin-top: var(--r3); padding: var(--r3);
  background: var(--aksent-flate); border: 1px solid var(--linje);
  border-radius: var(--radius);
}
.kundens-maling .utregning { background: var(--bak); margin: var(--r2) 0 0; }
.kundens-maling-sum {
  margin: 0; font-weight: var(--vekt-tung); font-size: var(--t-s); color: var(--aksent);
}
/* Vilkårene ligger sammenslått: besparelsen og mengden er det kunden kom for,
   fire avsnitt jus midt i skjemaet skyver «Se prisen» langt ned på mobil. */
.maling-vilkar { margin-top: var(--r3); }
.maling-vilkar summary {
  cursor: pointer; font-weight: var(--vekt-tung); font-size: var(--t-s); color: var(--aksent);
  padding: var(--r2) 0; min-height: 44px; display: flex; align-items: center;
}
.kundens-maling .punktliste {
  margin: var(--r3) 0 0; padding-left: var(--r3);
  font-size: var(--t-xs); line-height: 1.6; color: var(--tekst);
}
.kundens-maling .punktliste li + li { margin-top: var(--r2); }
.kundens-maling .hjelp { margin: var(--r2) 0 0; }

/* Samme beskjed i prisoppstillingen, der kunden ser hva som er trukket fra. */
.spart {
  margin: var(--r2) 0 0; padding: var(--r2) var(--r3);
  background: var(--aksent-flate); border-radius: var(--radius);
  font-size: var(--t-s); color: var(--aksent);
}

/* Minsteprisen skal stå der uansett, og merkes når den faktisk gjelder. */
.minstepris { margin: var(--r2) 0 0; font-size: var(--t-xs); color: var(--tekst-svak); }
.minstepris.er-brukt {
  color: var(--tekst); font-weight: var(--vekt-tung);
  background: var(--aksent-flate); padding: var(--r2) var(--r3); border-radius: var(--radius);
}

/* Angreskjemaet: et dokument kunden kan skrive ut og fylle ut for hånd. */
.angreskjema {
  border: 1px solid var(--linje); border-radius: var(--radius); background: var(--flate);
  padding: var(--r3); overflow-x: auto;
}
.angreskjema pre {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-xs); line-height: 1.8; white-space: pre; color: var(--tekst);
}
.bunn-juss-lenker a { font-weight: var(--vekt-tung); }

/* Datovelgeren: første ledige oppstart, og sluttdato på kortet. */
.forste-ledige {
  margin: 0 0 var(--r3); padding: var(--r2) var(--r3); font-size: var(--t-s);
  background: var(--aksent-flate); border-radius: var(--radius); color: var(--aksent);
}

.valgkort:has(input:checked) .til { color: var(--aksent); }

@media (min-width: 64rem) {

}

/* Forbeholdene i resultatkortet ---------------------------------------- */
.forbehold { margin-top: var(--r4); }

/* «Herav mva» står under totalen, ikke som en linje i summen – avgiften er
   ikke en post kunden kjøper, den er en opplysning om beløpet over. */
.oppstilling .mvarad {
  display: flex; justify-content: space-between; gap: var(--r3);
  padding: var(--r1) 0 0; font-size: var(--t-xs); color: var(--tekst-svak);
}

/* «Annet rom?» – bad, våtrom og trapperom, som ikke får pris fra skjemaet.
   Lav profil med vilje: dette er en utvei for de få, ikke et femte romkort. */
.annet-rom { margin-top: var(--r2); }
.annet-rom summary {
  cursor: pointer;
  font-weight: var(--vekt-tung);
  color: var(--aksent);
  padding: var(--r2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.annet-rom summary:hover { text-decoration: underline; }
.annet-rom p { margin: var(--r1) 0 var(--r2); color: var(--tekst-svak); }

/* ======================================================= tre-stegs-flyten ==
   Romradene, sammenfoldingene og fargevalget. Minste trykkflate er 48 px –
   kalkulatoren fylles ut på mobil, ofte stående i rommet som skal males.
   ========================================================================== */

/* --- romradene i steg 2 */
.romrader { display: flex; flex-direction: column; gap: var(--r2); }

/* --- små radioknapper i rekke (takhøyde, undervalg, glans) */
.minivalg-rad { display: flex; flex-wrap: wrap; gap: var(--r2); }

.minivalg { position: relative; display: inline-flex; }
.minivalg input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.minivalg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--r3);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--bak);
  white-space: nowrap;
}
.minivalg input:checked + span {
  border-color: var(--aksent);
  background: var(--aksent-flate);
  font-weight: var(--vekt-tung);
}
.minivalg input:focus-visible + span { outline: 2px solid var(--aksent); outline-offset: 2px; }

/* --- avkryssing med forklaring under */
.avkryss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r2);
  min-height: 48px;
  cursor: pointer;
}
.avkryss input { width: var(--r4); height: var(--r4); margin: 0; flex: none; }
.avkryss small { flex-basis: 100%; color: var(--tekst-svak); margin-left: var(--r4); }

/* --- de to knappene under «Kun sparkling» */
.undervalg {
  display: flex;
  gap: var(--r2);
  flex-wrap: wrap;
  margin: -var(--r1) 0 var(--r2) var(--r3);
  padding-left: var(--r2);
  border-left: 1px solid var(--linje);
}

/* --- sammenfoldinger: lommelykt, tillegg, møblering */
.lommelykt-lenke, .tillegg-mer, .mobler-mer { margin-top: var(--r2); }
.lommelykt-lenke > summary,
.tillegg-mer > summary,
.mobler-mer > summary {
  cursor: pointer;
  color: var(--aksent);
  font-weight: var(--vekt-tung);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.tillegg-mer[open] > summary, .mobler-mer[open] > summary { margin-bottom: var(--r2); }

/* --- fargevalget i bestillingen */
.fargevelger {
  margin-top: var(--r3);
  padding-top: var(--r3);
  border-top: 1px solid var(--linje);
}
.fargerom + .fargerom { margin-top: var(--r4); }
.fargerom h4 { margin: 0 0 var(--r2); }

/* --- fast prislinje nederst fra steg 2 (mobil) */
@media (max-width: 900px) {

}

/* --- trykkflater i hele kalkulatoren */
@media (max-width: 700px) {
  .kalk-kort .knapp { min-height: 48px; }
  .valgkort { min-height: 48px; }

}

/* Glans: tre navngitte valg pluss «Annet». De øvrige trinnene ligger under,
   og kommer fram først når «Annet» er valgt. */
.glansknapp span small { display: block; font-weight: var(--vekt); font-size: var(--t-xs); color: var(--tekst-svak); }
.glans-annet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2);
  margin-top: var(--r2);
  padding-top: var(--r2);
  border-top: 1px solid var(--linje);
}

/* ============================================================= kalender ==
   Månedskalender i bestillingen. Sperrede dager er grå OG disabled – en dag
   som bare ser utilgjengelig ut, kan fortsatt velges med tastatur.
   Trykkflatene er minst 44 px; kalenderen fylles ut med tommelen.
   ========================================================================= */

.kalender { margin: var(--r2) 0 var(--r3); }

.kalender-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--r2);
  margin-bottom: var(--r2);
}

.kalender-maaned { font-size: var(--t-s); text-transform: capitalize; }

.kalender-pil {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--bak);
  font-size: var(--t-m);
  cursor: pointer;
}
.kalender-pil:hover:not(:disabled) { border-color: var(--aksent); }
.kalender-pil:disabled { opacity: .35; cursor: default; }

.kalender-rutenett {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--r1);
}

.kalender-hode {
  text-align: center;
  font-size: var(--t-xs);
  color: var(--tekst-svak);
  padding-bottom: var(--r1);
}

/* Selve dagen. <label> med skjult radio inni, så tastatur og skjermleser
   får et ekte valg og ikke en klikkbar firkant. */
.kalender-dag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--bak);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.kalender-dag input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: inherit;
}
.kalender-dag:hover:not(.er-sperret) { border-color: var(--aksent); }
.kalender-dag:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }

.kalender-dag.er-sperret {
  background: var(--aksent-flate);
  color: var(--tekst-svak);
  border-color: transparent;
  cursor: not-allowed;
  text-decoration: line-through;
}

.kalender-dag.er-valgt {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--bak);
  font-weight: var(--vekt-tung);
}

/* Resten av jobbperioden: samme farge, lysere – det er de samme dagene,
   men kunden har bare valgt den første. */
.kalender-dag.er-i-perioden {
  background: var(--aksent-flate);
  border-color: var(--aksent);
  font-weight: var(--vekt-tung);
}

.kalender-dag.er-utenfor {
  border-color: transparent;
  background: none;
  color: color-mix(in srgb, var(--tekst-svak) 45%, transparent);
  cursor: default;
}

.prikk {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: var(--radius);
  margin-right: var(--r1);
  vertical-align: -1px;
}

@media (max-width: 420px) {
  .kalender-rutenett { gap: var(--r1); }
  .kalender-dag { min-height: 44px; font-size: var(--t-s); }
}

/* ============================================================================
   KONFIGURATOREN – /konfigurator
   ----------------------------------------------------------------------------
   Én side, ingen steg. Venstre halvdel viser rommet, høyre halvdel er valgene.
   Prisen står fast nederst og er alltid synlig; det er hele poenget.

   Mobil først: illustrasjonen på toppen med lav høyde, valgene under, og en
   fast bunnlinje. Fra 900 px deles skjermen i 60/40 og bunnlinjen flytter inn
   i høyrekolonnen, så prisen står ved siden av valget som endrer den.
   ========================================================================= */

.konf {
  --bunn-h: 76px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--flate);
}

/* Toppen av siden har ingen meny og ingen brødsmuler. Alt som ikke er en pris
   eller et valg, trekker oppmerksomhet fra den ene jobben siden har. */
.side-kalkulator .topp,
.side-kalkulator .bunn,
.side-kalkulator .brodsmuler { display: none; }

/* ------------------------------------------------------------- rommet --- */

.konf-rom {
  background: var(--aksent-flate);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--r3);
}
.konf-rom svg {
  display: block; width: 100%; max-width: 420px; height: auto;
  aspect-ratio: 400 / 260;           /* samme som viewBox, så boksen finnes før strekene */
  border-radius: var(--radius);
}
.konf-romtekst {
  margin: var(--r2) 0 0; font-size: var(--t-xs); color: var(--tekst-svak); text-align: center;
  min-height: 1.5em;                 /* én linje, reservert før JS skriver den */
}

/* Veggfargen speiler valget. Overgangen er kort nok til å merkes, lang nok
   til å leses som en endring og ikke et glimt. */
.konf-vegg, .konf-bakvegg { transition: fill .35s ease; }

/* --------------------------------------------------------- konfigurasjon - */

.konf-kropp {
  flex: 1; padding: var(--r4) 1rem calc(var(--bunn-h) + 1.5rem);
}
.konf-innhold { max-width: 32rem; margin: 0 auto; }

.konf-tittel { margin: 0; font-size: var(--t-l); letter-spacing: -.02em; }
.konf-sted { margin: var(--r1) 0 0; font-size: var(--t-xs); color: var(--tekst-svak); }
.konf-sted button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--aksent);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

.konf-seksjon { padding: var(--r4) 0 0; }
.konf-seksjon + .konf-seksjon { margin-top: var(--r4); border-top: 1px solid var(--linje); }
.konf-seksjonsnavn {
  margin: 0 0 var(--r2); font-size: var(--t-xs); font-weight: var(--vekt-tung);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-svak);
}

/* ------------------------------------------------------------ pakkene --- */

.konf-pakker { display: flex; flex-direction: column; gap: var(--r2); }
.konf-pakke {
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r3); border: 1px solid var(--linje); border-radius: var(--radius);
  background: var(--bak); cursor: pointer; text-align: left;
  min-height: 60px; position: relative;
}
.konf-pakke input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.konf-pakke:hover { border-color: var(--linje); }
.konf-pakke:has(input:checked) {
  border-color: var(--aksent); background: var(--aksent-flate);
  box-shadow: inset 0 0 0 1px var(--aksent);
}
.konf-pakke:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }
.konf-pakketekst { flex: 1; min-width: 0; }
.konf-pakkenavn { display: block; font-size: var(--t-s); font-weight: var(--vekt-tung); }
.konf-pakkeunder { display: block; font-size: var(--t-xs); color: var(--tekst-svak); margin-top: var(--r1); }
.konf-pakkepris {
  font-size: var(--t-xs); font-weight: var(--vekt-tung); white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--tekst-svak);
}
.konf-pakke:has(input:checked) .konf-pakkepris { color: var(--aksent); }

/* Undervalget for «Kun sparkling» – to små knapper, bare når gruppa er valgt. */
.konf-undervalg { display: flex; gap: var(--r2); margin-top: var(--r2); padding-left: var(--r1); }
.konf-undervalg label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 44px; padding: var(--r2) var(--r2); border: 1px solid var(--linje);
  border-radius: var(--radius); background: var(--bak); font-size: var(--t-xs); font-weight: var(--vekt-tung);
  cursor: pointer; text-align: center;
}
.konf-undervalg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.konf-undervalg label:has(input:checked) { border-color: var(--aksent); background: var(--aksent-flate); color: var(--aksent); }
.konf-undervalg label:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }

/* -------------------------------------------------------------- rommet -- */

.konf-romtyper { display: flex; gap: var(--r2); }
.konf-romtyper label {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: var(--r2) var(--r1); border: 1px solid var(--linje);
  border-radius: var(--radius); background: var(--bak); cursor: pointer;
  font-size: var(--t-xs); font-weight: var(--vekt-tung); color: var(--tekst-svak); text-align: center;
}
.konf-romtyper input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.konf-romtyper label:has(input:checked) { background: var(--aksent); border-color: var(--aksent); color: var(--bak); }
.konf-romtyper label:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }

.konf-teller { display: flex; align-items: center; gap: var(--r2); margin-top: var(--r2); }
.konf-teller button {
  width: 48px; height: 48px; flex: none; border-radius: var(--radius);
  border: 1px solid var(--linje); background: var(--bak); color: var(--aksent);
  font-size: var(--t-l); font-weight: var(--vekt-tung); line-height: 1; cursor: pointer;
}
.konf-teller button:hover:not(:disabled) { border-color: var(--aksent); background: var(--aksent-flate); }
.konf-teller button:disabled { opacity: .35; cursor: not-allowed; }
.konf-tellerfelt {
  flex: 1; min-width: 0; text-align: center; border: 0; background: none;
  font: inherit; font-size: var(--t-m); font-weight: var(--vekt-tung); color: var(--tekst);
  font-variant-numeric: tabular-nums; padding: var(--r2) 0;
  -moz-appearance: textfield; appearance: textfield;
}
.konf-tellerfelt::-webkit-outer-spin-button,
.konf-tellerfelt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.konf-tellerenhet { font-size: var(--t-xs); font-weight: var(--vekt-tung); color: var(--tekst-svak); }
.konf-flate { margin: var(--r2) 0 0; font-size: var(--t-xs); color: var(--tekst-svak); }

/* Lenker som åpner mer: lav profil, men stort nok treffeområde. */
.konf-mer {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--r1);
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-xs);
  color: var(--aksent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* flere rom */
.konf-romliste { display: flex; flex-direction: column; gap: var(--r2); margin-top: var(--r2); }
.konf-romrad {
  display: flex; align-items: center; gap: var(--r2); padding: var(--r2) var(--r2);
  border: 1px solid var(--linje); border-radius: var(--radius); background: var(--bak); font-size: var(--t-xs);
}
.konf-romrad b { font-weight: var(--vekt-tung); }
.konf-romrad span { flex: 1; color: var(--tekst-svak); }
.konf-romrad .pris { font-weight: var(--vekt-tung); font-variant-numeric: tabular-nums; white-space: nowrap; }
.konf-romrad button {
  background: none; border: 0; padding: var(--r2); cursor: pointer; color: var(--tekst-svak);
  font-size: var(--t-m); line-height: 1; min-width: 44px; min-height: 44px;
}
.konf-romrad button:hover { color: var(--tekst); }

/* ------------------------------------------------------------ bryterne -- */

.konf-bryter {
  display: flex; align-items: center; gap: var(--r2); width: 100%;
  padding: var(--r3) 0; background: none; border: 0; font: inherit;
  text-align: left; cursor: pointer; min-height: 56px;
}
.konf-bryter + .konf-bryter { border-top: 1px solid var(--linje); }
.konf-brytertekst { flex: 1; min-width: 0; }
.konf-bryternavn { display: block; font-size: var(--t-s); font-weight: var(--vekt-tung); }
.konf-bryterhjelp { display: block; font-size: var(--t-xs); color: var(--tekst-svak); margin-top: var(--r1); }
.konf-bryterdiff {
  font-size: var(--t-xs); color: var(--tekst-svak); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.konf-bryterdiff.er-ned { color: var(--aksent); font-weight: var(--vekt-tung); }

/* Selve bryteren. role="switch" på knappen; dette er bare utseendet. */
.konf-spor {
  width: 48px; height: 29px; flex: none; border-radius: var(--radius-rund);
  background: var(--linje); position: relative; transition: background .18s ease;
}
.konf-spor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px;
  border-radius: 50%; background: var(--bak); box-shadow: none;
  transition: transform .18s ease;
}
.konf-bryter[aria-checked="true"] .konf-spor { background: var(--aksent); }
.konf-bryter[aria-checked="true"] .konf-spor::after { transform: translateX(19px); }
.konf-bryter:focus-visible { outline: 2px solid var(--aksent); outline-offset: 3px; border-radius: var(--radius); }

/* -------------------------------------------------------------- datoer -- */

.konf-tidligst { margin: 0 0 var(--r2); font-size: var(--t-xs); color: var(--tekst-svak); }
.konf-tidligst b { color: var(--tekst); }
.konf-datoer { display: flex; gap: var(--r2); flex-wrap: wrap; }
.konf-dato {
  flex: 1 1 4.25rem; min-height: 56px; padding: var(--r2) var(--r1);
  border: 1px solid var(--linje); border-radius: var(--radius); background: var(--bak);
  cursor: pointer; text-align: center; line-height: 1.25; position: relative;
}
.konf-dato input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.konf-dato b { display: block; font-size: var(--t-s); font-weight: var(--vekt-tung); }
.konf-dato small { display: block; font-size: var(--t-xs); color: var(--tekst-svak); }
.konf-dato:has(input:checked) { background: var(--aksent); border-color: var(--aksent); color: var(--bak); }
.konf-dato:has(input:checked) small { color: var(--aksent-flate); }
.konf-dato:has(input:focus-visible) { outline: 2px solid var(--aksent); outline-offset: 2px; }

/* ---------------------------------------------------------- sammendrag -- */

.konf-sammendrag { display: flex; flex-direction: column; gap: var(--r1); font-size: var(--t-xs); }
.konf-sammendrag div { display: flex; justify-content: space-between; gap: var(--r3); }
.konf-sammendrag dt { color: var(--tekst-svak); }
.konf-sammendrag dd { margin: 0; font-weight: var(--vekt-tung); text-align: right; }
.konf-lenkerad { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r2); }

/* ----------------------------------------------------------- bunnlinja -- */

.konf-bunnlinje {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r2) 1rem calc(var(--r2) + env(safe-area-inset-bottom));
  background: var(--aksent); color: var(--bak);
  box-shadow: var(--skygge);
}
.konf-bunnpris { flex: 1; min-width: 0; }
.konf-sum {
  display: block; font-size: var(--t-m); font-weight: var(--vekt-tung); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.konf-sumunder { display: block; font-size: var(--t-xs); color: var(--aksent-flate); }
.konf-bestill {
  flex: none; min-height: 48px; padding: var(--r2) var(--r4);
  background: var(--bak); color: var(--aksent); border: 0; border-radius: var(--radius);
  font: inherit; font-size: var(--t-s); font-weight: var(--vekt-tung); cursor: pointer;
}
.konf-bestill:hover { background: var(--aksent-flate); }
.konf-bestill:focus-visible { outline: 3px solid var(--bak); outline-offset: 3px; }
.konf-bestill:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- varsel - */

.konf-varsel {
  margin: var(--r3) 0 0; padding: var(--r3); border-radius: var(--radius);
  background: var(--aksent-flate); border: 1px solid var(--linje);
  font-size: var(--t-xs); color: var(--tekst);
}
.konf-varsel b { display: block; }
.konf-utenfor { margin: var(--r4) 0 0; }

/* --------------------------------------------------------------- modal -- */

.konf-modal {
  width: min(32rem, calc(100vw - 2rem)); max-height: min(80dvh, 44rem);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--flate); color: var(--tekst); box-shadow: none;
}
.konf-modal::backdrop { background: rgba(27, 37, 32, .45); }
.konf-modaltopp {
  display: flex; align-items: center; gap: var(--r3); padding: var(--r3);
  border-bottom: 1px solid var(--linje); position: sticky; top: 0; background: var(--flate);
  border-radius: var(--radius) var(--radius) 0 0;
}
.konf-modaltopp h2 { margin: 0; flex: 1; font-size: var(--t-m); }
.konf-lukk {
  min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer;
  font-size: var(--t-l); line-height: 1; color: var(--tekst-svak); border-radius: var(--radius);
}
.konf-lukk:hover { background: var(--linje); color: var(--tekst); }
.konf-modalkropp { padding: var(--r3); }
.konf-modalkropp > :first-child { margin-top: 0; }

/* tellerne i tilleggsmodalen */
.konf-tilleggsrad {
  display: flex; align-items: center; gap: var(--r2); padding: var(--r2) 0;
}
.konf-tilleggsrad + .konf-tilleggsrad { border-top: 1px solid var(--linje); }
.konf-tilleggsnavn { flex: 1; font-size: var(--t-s); font-weight: var(--vekt-tung); }
.konf-tilleggsnavn small { display: block; font-weight: var(--vekt); font-size: var(--t-xs); color: var(--tekst-svak); }
.konf-minipluss { display: flex; align-items: center; gap: var(--r2); flex: none; }
.konf-minipluss button {
  width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--linje);
  background: var(--bak); color: var(--aksent); font-size: var(--t-m); cursor: pointer;
}
.konf-minipluss button:disabled { opacity: .35; cursor: not-allowed; }
.konf-minipluss output {
  min-width: 2.5rem; text-align: center; font-weight: var(--vekt-tung);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- bestilling -- */

.konf-bestilling { max-width: 32rem; margin: 0 auto; }
.konf-tilbake {
  display: inline-flex; align-items: center; gap: var(--r2); min-height: 44px;
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-xs);
  color: var(--aksent); cursor: pointer;
}
.konf-bestilling .felt { margin-bottom: var(--r2); }
.konf-feltpar { display: flex; gap: var(--r2); }
.konf-feltpar > * { flex: 1; min-width: 0; }

.konf-oppsummering {
  margin: var(--r3) 0; padding: var(--r3); border-radius: var(--radius);
  background: var(--aksent-flate); border: 1px solid var(--linje); font-size: var(--t-xs);
}
.konf-oppsummering h3 { margin: 0 0 var(--r2); font-size: var(--t-s); }
.konf-oppsummering p { margin: var(--r1) 0 0; }
.konf-etterknapp { margin: var(--r2) 0 0; font-size: var(--t-xs); color: var(--tekst-svak); text-align: center; }

/* -------------------------------------------------- desktop: 60 / 40 ---- */

@media (min-width: 900px) {
  .konf { flex-direction: row; height: 100dvh; overflow: hidden; }

  .konf-rom {
    flex: 0 0 60%; height: 100dvh; padding: var(--r5);
  }
  .konf-rom svg { max-width: min(46rem, 100%); }

  .konf-hoyre {
    flex: 0 0 40%; height: 100dvh; display: flex; flex-direction: column;
    border-left: 1px solid var(--linje); background: var(--flate); min-width: 0;
  }
  .konf-kropp { flex: 1; overflow-y: auto; padding: var(--r4) var(--r4) var(--r4); }
  .konf-innhold { max-width: none; }

  /* Bunnlinja hører til høyrekolonnen her, ikke til vinduet. */
  .konf-bunnlinje {
    position: static; box-shadow: var(--skygge);
    padding: var(--r3) var(--r4);
  }
}

/* Over 1400 px vokser ikke kolonnen videre – lesebredden er satt av teksten,
   ikke av skjermen. */
@media (min-width: 1400px) {
  .konf-innhold, .konf-bestilling { max-width: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  .konf-vegg, .konf-bakvegg, .konf-spor, .konf-spor::after { transition: none; }
}

/* Synlig for skjermlesere, usynlig på skjerm. Brukt der et felt har en
   etikett som ville vært støy ved siden av en tydelig knapp. */
.visuelt-skjult {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* I bestillingsvisningen heter knappen «Bestill med betalingsplikt», og den
   teksten presser prisen til tre linjer på 375 px. Da stables de i stedet:
   prisen øverst, knappen i full bredde under. Knappen er dessuten det eneste
   man skal gjøre på det stedet i flyten, så den fortjener plassen. */
.konf-bunnlinje.er-bestilling { flex-wrap: wrap; }
.konf-bunnlinje.er-bestilling .konf-bunnpris { flex: 1 0 100%; }
.konf-bunnlinje.er-bestilling .konf-bestill { flex: 1 0 100%; margin-top: var(--r2); }

@media (min-width: 900px) {
  /* På desktop er kolonnen bred nok til at de står side om side. */
  .konf-bunnlinje.er-bestilling { flex-wrap: nowrap; }
  .konf-bunnlinje.er-bestilling .konf-bunnpris { flex: 1; }
  .konf-bunnlinje.er-bestilling .konf-bestill { flex: none; margin-top: 0; }
}

/* ============================================================================
   ORDREBEKREFTELSEN på /takk
   ----------------------------------------------------------------------------
   Dette er ikke en «takk for henvendelsen»-side. Kunden har nettopp bundet
   seg til en pris, og skal kjenne igjen det hen bekreftet: beløp, ordrenummer
   og hva som skjer videre. Derfor hodet først, så de to tingene folk faktisk
   gjør – legger datoen i kalenderen og skriver ut.
   ========================================================================= */

.kvittering {
  border: 1px solid var(--linje); border-radius: var(--radius); background: var(--bak);
  padding: var(--r4) var(--r4); margin: 0 0 var(--r4); box-shadow: none;
}

.kvittering-hode { text-align: center; padding-bottom: var(--r3); }
.kvittering-hake {
  width: 3rem; height: 3rem; margin: 0 auto var(--r3); border-radius: 50%;
  background: var(--aksent); color: var(--bak); font-size: var(--t-l); line-height: 3rem;
}
.kvittering-hode h1 { margin: 0 0 var(--r2); font-size: var(--t-l); letter-spacing: -.02em; }
.kvittering-ordrenr { margin: 0 0 var(--r3); font-size: var(--t-xs); color: var(--tekst-svak); }
.kvittering-ordrenr strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--aksent); background: var(--aksent-flate);
  padding: var(--r1) var(--r2); border-radius: var(--radius-rund); font-size: var(--t-xs);
}
.kvittering-sum { margin: 0; }
.kvittering-sum strong {
  display: block; font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kvittering-sum span { font-size: var(--t-xs); color: var(--tekst-svak); }
.kvittering-hva { margin: var(--r2) 0 0; font-size: var(--t-s); color: var(--tekst-svak); }

.kvittering-knapper {
  display: flex; flex-wrap: wrap; gap: var(--r2); justify-content: center;
  padding: var(--r3) 0; border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje);
}
.kvittering-knapper .knapp { flex: 1 1 14rem; justify-content: center; }

.kvittering-overskrift {
  margin: var(--r4) 0 var(--r3); font-size: var(--t-xs); font-weight: var(--vekt-tung);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-svak);
}

.kvittering .varsel { margin-top: var(--r3); }

.kvittering-mer { margin-top: var(--r4); }
.kvittering-mer summary {
  cursor: pointer; font-weight: var(--vekt-tung); font-size: var(--t-s); color: var(--aksent);
  min-height: 44px; display: flex; align-items: center;
}
.kvittering-mer .takk-detaljer { margin-top: var(--r2); }

/* Tidslinja ---------------------------------------------------------------
   Fire punkter, der det første er der vi er nå. Streken mellom prikkene er
   et ::after på hvert steg unntatt det siste, så den aldri henger ut under
   det nederste punktet. */
.tidslinje { list-style: none; margin: 0; padding: 0; }
.tidslinje-steg { display: flex; gap: var(--r3); position: relative; padding-bottom: var(--r3); }
.tidslinje-steg:last-child { padding-bottom: 0; }
.tidslinje-prikk {
  flex: none; width: .85rem; height: .85rem; margin-top: var(--r1); border-radius: 50%;
  background: var(--linje); position: relative; z-index: 1;
}
.tidslinje-steg.er-naa .tidslinje-prikk {
  background: var(--aksent);
  box-shadow: 0 0 0 4px var(--aksent-flate);
}
.tidslinje-steg:not(:last-child)::after {
  content: ""; position: absolute; left: .375rem; top: 1.15rem; bottom: -.15rem;
  width: 2px; background: var(--linje);
}
.tidslinje-tekst { display: flex; flex-direction: column; gap: var(--r1); }
.tidslinje-tekst strong { font-size: var(--t-s); }
.tidslinje-tekst span { font-size: var(--t-xs); color: var(--tekst-svak); }

@media (min-width: 700px) {
  .kvittering { padding: var(--r5) var(--r4); }
}

/* Sidens ene overskrift. Står over kvitteringen, og sentreres sammen med den
   når det faktisk er en bestilling å vise. */
.takk-tittel { margin: 0 0 var(--r3); letter-spacing: -.02em; }
.ramme:has(.kvittering:not(.er-skjult)) .takk-tittel {
  text-align: center; font-size: var(--t-l); margin-bottom: var(--r3);
}

/* Ventelisten inne i «utenfor område»-boksen. Egen bakgrunn, så feltene ikke
   flyter sammen med varselet de står i. */
.konf-venteliste { margin-top: var(--r3); }
.konf-venteliste .felt { margin-bottom: var(--r2); }
.konf-venteliste textarea { min-height: 4.5rem; }


/* seksjonsluft ------------------------------------------------------------
   40 px på mobil, 64 px fra 700 px. Luft er det billigste virkemidlet for å
   få en side til å virke rolig, og det eneste som ikke krever at noe fjernes. */
section { padding: var(--r5) 0; }
@media (min-width: 700px) { section { padding: var(--r6) 0; } }

/* Lesebredde: en tekstspalte på 65 tegn. Lengre linjer mister leseren
   mellom slutten av én linje og starten av den neste. */
/* Lesebredden gjelder tekst. Et listeelement som er en prisrad, et kort
   eller en knapperad, er oppsett – da klemmer 65ch det sammen og etterlater
   en halv skjerm tom til høyre. */
.ramme p, .ramme li { max-width: var(--lesebredde); }
.ramme .prisrad, .ramme .steg li, .ramme .eksempler li,
.ramme .valg li, .ramme .bunn-lenker li, .ramme .knapprad { max-width: none; }
.ramme { max-width: var(--bredde); }

/* avstand uten inline-stil ------------------------------------------------
   Erstatter 112 style="margin-top:…" i markupen. Fire ulike verdier på
   samme slags element var fire gjetninger, ikke finjustering. */
.knapprad { margin-top: var(--r4); }
.garantiboks, .varsel, .kort, .rutenett, .tabellramme { margin-top: var(--r4); }
.bildeplass { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.viktig { color: var(--tekst); font-weight: var(--vekt-tung); }

.garantilinje { color: var(--tekst-svak); margin-top: var(--r4); }

/* Romtegningen: farge og glans ------------------------------------------
   Myk overgang når fargen endres. 300 ms er langt nok til å leses som en
   endring og kort nok til ikke å stå i veien for neste valg. */
.konf-vegg, .konf-bakvegg, .konf-tak { transition: fill .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .konf-vegg, .konf-bakvegg, .konf-tak { transition: none; }
}



/* guider ------------------------------------------------------------------
   Artikkelsider. Smal spalte, luft rundt overskriftene, og en tydelig
   forfatterboks – leseren skal vite hvem som har skrevet det. */
.guide h2 { margin-top: var(--r5); }
.guide h3 { margin-top: var(--r4); }
.guide-meta { font-size: var(--t-xs); color: var(--tekst-svak); margin-top: var(--r2); }

.guide-toc {
  background: var(--flate); border: 1px solid var(--linje); border-radius: var(--radius);
  padding: var(--r3) var(--r4); margin: var(--r4) 0;
}
.guide-toctittel { font-weight: var(--vekt-tung); margin: 0 0 var(--r2); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-svak); }
.guide-toc ol { margin: 0; padding-left: var(--r4); }
.guide-toc li { margin-bottom: var(--r1); }

.guide-forfatter {
  display: grid; gap: var(--r3); margin: var(--r5) 0 var(--r4);
  padding: var(--r4); background: var(--flate); border-radius: var(--radius);
}
.guide-forfatter .bildeplass { width: 96px; height: 96px; border-radius: 50%; aspect-ratio: 1; }
.guide-forfatternavn { font-weight: var(--vekt-tung); margin: 0 0 var(--r2); }
.guide-kontakt { font-size: var(--t-xs); margin-top: var(--r2); }
@media (min-width: 560px) {
  .guide-forfatter:has(.bildeplass) { grid-template-columns: 96px 1fr; align-items: start; }
}

.guide-videre { font-size: var(--t-xs); color: var(--tekst-svak); }

/* Bare i forhåndsvisning: merkene eieren skal fylle ut. */
.guide-merke {
  background: var(--aksent-flate); border-left: 2px solid var(--aksent);
  border-radius: var(--radius); padding: var(--r2) var(--r3); font-size: var(--t-xs);
}

/* oversiktssiden */
.guidegruppe { margin-top: var(--r5); }
.guidegruppe-under { color: var(--tekst-svak); margin-top: 0; }
.guideliste { list-style: none; margin: var(--r3) 0 0; padding: 0; display: grid; gap: var(--r3); }
@media (min-width: 700px) { .guideliste { grid-template-columns: 1fr 1fr; } }
.guidekort {
  background: var(--flate); border-radius: var(--radius); padding: var(--r3); max-width: none;
}
.guidekort h3 { margin: 0 0 var(--r2); font-size: var(--t-m); }
.guidekort p { margin: 0; font-size: var(--t-xs); color: var(--tekst-svak); }

/* ======================================================= siste jobber ====
   Kortene tegnes av komponentJobber() i bygg.mjs fra data/jobber.json.
   Finnes ingen jobber, finnes ingen seksjon – det er bygget som avgjør,
   ikke CSS. Ingenting her skjuler noe; da ville en tom seksjon blitt
   liggende i HTML-en og telt som innhold for Google. */
.jobber {
  list-style: none; margin: var(--r4) 0 0; padding: 0;
  display: grid; gap: var(--r4);
}
@media (min-width: 700px) { .jobber { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .jobber { grid-template-columns: repeat(3, 1fr); } }

.jobb {
  background: var(--bak); border: 1px solid var(--linje);
  border-radius: var(--radius); overflow: hidden; max-width: none;
}
.jobb-tekst { padding: var(--r3); }
.jobb-tekst p { margin: 0 0 var(--r1); }
.jobb-sted {
  font-size: var(--t-xs); color: var(--tekst-svak);
  display: flex; justify-content: space-between; gap: var(--r2);
}
.jobb-rom { font-weight: var(--vekt-tung); font-size: var(--t-m); }
.jobb-pakke { font-size: var(--t-xs); color: var(--tekst-svak); }
.jobb-pris {
  font-weight: var(--vekt-tung); margin-top: var(--r2);
  font-variant-numeric: tabular-nums;
}
.jobb-pris small {
  display: block; font-weight: var(--vekt);
  font-size: var(--t-xs); color: var(--tekst-svak);
}
.jobb-sitat {
  margin: var(--r3) 0 0; padding-top: var(--r3);
  border-top: 1px solid var(--linje); font-size: var(--t-xs);
}
.jobb-sitat p { margin: 0 0 var(--r1); }
.jobb-sitat footer { color: var(--tekst-svak); }

/* =================================================== før/etter-bryter ====
   Styringen er en <input type="range">. Det er med vilje: et egenbygd
   håndtak måtte hatt tabindex, rolle, aria-verdier og tastaturlytter, og
   én av dem blir glemt. En range gir piltaster, Home/End, skjermleser og
   touch gratis, og kan ikke bli utilgjengelig ved et uhell.

   Uten JS: de to bildene side om side. Oppdelingen slår inn først når
   foerretter.js har satt data-klar, for uten JS flytter ikke bryteren noe,
   og et halvt bilde man ikke kan dra i, er en ødelagt seksjon. */
.foerretter {
  /* Hvor mye av før-bildet som vises. Settes av foerretter.js fra verdien
     på bryteren; står her så den har en verdi før JS har kjørt. */
  --andel: 50%;
  display: grid; gap: var(--r2); grid-template-columns: 1fr 1fr;
}
.foerretter-bilde { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foerretter-merke, .foerretter-styring { display: none; }

.foerretter[data-klar] {
  display: block; position: relative; grid-template-columns: none;
  line-height: 0;
}
.foerretter[data-klar] .foerretter-bilde { grid-area: unset; }
.foerretter[data-klar] .foerretter-foer {
  position: absolute; inset: 0; height: 100%;
  /* --andel settes av foerretter.js fra verdien på bryteren. */
  clip-path: inset(0 calc(100% - var(--andel)) 0 0);
}
.foerretter[data-klar] .foerretter-merke {
  display: block; position: absolute; bottom: var(--r2);
  background: var(--tekst); color: var(--bak);
  font-size: var(--t-xs); line-height: 1.4;
  padding: 2px var(--r2); border-radius: var(--radius-rund);
}
.foerretter[data-klar] .foerretter-merke-foer { left: var(--r2); }
.foerretter[data-klar] .foerretter-merke-etter { right: var(--r2); }

/* Skillelinjen der bildene møtes. Rent pynt, derfor aria-hidden i markupen. */
.foerretter[data-klar]::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: var(--andel); width: 2px; background: var(--bak);
  transform: translateX(-1px); pointer-events: none;
}

.foerretter[data-klar] .foerretter-styring {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  appearance: none; background: transparent; cursor: ew-resize;
}
.foerretter-styring::-webkit-slider-thumb {
  appearance: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bak); border: 2px solid var(--aksent); cursor: ew-resize;
}
.foerretter-styring::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bak); border: 2px solid var(--aksent); cursor: ew-resize;
}
.foerretter-styring:focus-visible { outline: 3px solid var(--aksent); outline-offset: 2px; }

/* ====================================================== anmeldelsene =====
   Tegnes av komponentAnmeldelser() under tre anmeldelser: ingenting. */
.vurdering {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--r2);
  margin-top: var(--r3);
}
.vurdering-antall { color: var(--tekst-svak); font-size: var(--t-xs); }
.stjerner { letter-spacing: 2px; }
.stjerne { color: var(--linje); }
.stjerne-full { color: #b8860b; }

.anmeldelser {
  margin: var(--r4) 0 var(--r3); display: grid; gap: var(--r3);
}
@media (min-width: 700px) { .anmeldelser { grid-template-columns: repeat(3, 1fr); } }
.anmeldelse {
  background: var(--flate); border-radius: var(--radius);
  padding: var(--r3); max-width: none;
}
.anmeldelse-tekst { margin: var(--r2) 0; }
.anmeldelse-navn {
  margin: 0; font-size: var(--t-xs); font-weight: var(--vekt-tung);
  display: flex; justify-content: space-between; gap: var(--r2);
}
.anmeldelse-navn small { font-weight: var(--vekt); color: var(--tekst-svak); }

/* ====================================================== ferdigrapporten ==
   Internt verktøy på /admin/ferdigrapport: skjemaet på skjerm, rapporten på
   papir. Utskriftsreglene ligger sammen med resten av dem lenger oppe i
   fila, og de er bevisst få: de skjuler skjemaet og lar rapporten stå. */
.rapport-rad {
  display: grid; gap: var(--r3); align-items: end;
  padding: var(--r3) 0; border-top: 1px solid var(--linje);
}
.rapport-rad:first-child { border-top: 0; }
@media (min-width: 900px) {
  .rapport-rad { grid-template-columns: 1fr 1fr 1.4fr 7rem 1.4fr auto; }
}
.rapport-slett {
  background: none; border: 1px solid var(--linje); border-radius: var(--radius);
  color: var(--tekst-svak); font: inherit; font-size: var(--t-xs);
  padding: var(--r2) var(--r3); cursor: pointer; min-height: 44px;
}
.rapport-slett:hover { border-color: var(--aksent); color: var(--aksent); }
.rapport-slett:focus-visible { outline: 3px solid var(--aksent); outline-offset: 2px; }

.rapport-bildeantall { font-size: var(--t-xs); color: var(--tekst-svak); margin: var(--r3) 0 0; }

/* Selve dokumentet kunden får. */
.rapport {
  border: 1px solid var(--linje); border-radius: var(--radius);
  padding: var(--r4); max-width: none; background: var(--bak);
}
.rapport-topp {
  display: grid; gap: var(--r3); padding-bottom: var(--r3);
  border-bottom: 2px solid var(--aksent); margin-bottom: var(--r4);
}
@media (min-width: 700px) {
  .rapport-topp { grid-template-columns: 1fr auto; align-items: start; }
  .rapport-firma { text-align: right; }
}
.rapport-merke {
  margin: 0; font-size: var(--t-xs); font-weight: var(--vekt-tung);
  letter-spacing: .08em; text-transform: uppercase; color: var(--aksent);
}
.rapport-tittel { margin: var(--r1) 0 0; font-size: var(--t-l); }
.rapport-firma p { margin: 0; font-size: var(--t-xs); color: var(--tekst-svak); }

.rapport-fakta {
  display: grid; gap: var(--r3); margin: 0 0 var(--r5);
}
@media (min-width: 560px) { .rapport-fakta { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rapport-fakta { grid-template-columns: repeat(3, 1fr); } }
.rapport-fakta dt {
  font-size: var(--t-xs); color: var(--tekst-svak); margin-bottom: var(--r1);
}
.rapport-fakta dd { margin: 0; font-weight: var(--vekt-tung); }

.rapport-tabell { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.rapport-tabell th, .rapport-tabell td {
  text-align: left; padding: var(--r2) var(--r3); border-bottom: 1px solid var(--linje);
}
.rapport-tabell th { font-size: var(--t-xs); color: var(--tekst-svak); }
.rapport-tabell .tall { text-align: right; font-variant-numeric: tabular-nums; }

.rapport-bilderutenett {
  display: grid; gap: var(--r3); margin-top: var(--r3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.rapport-bilderutenett img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
}

.rapport-bunn {
  margin-top: var(--r5); padding-top: var(--r3);
  border-top: 1px solid var(--linje);
  font-size: var(--t-xs); color: var(--tekst-svak);
}


/* Skjules bare ved utskrift – på skjerm er det vanlig innhold. */
@media screen {
  .kun-utskrift { display: none; }
}