/* redovisning.karlberg.nu — säljsidan för bokföringstjänsten.
   Ljus, varm och redaktionell: pappersfärgad botten, djup granton som enda
   accent, mässing till det som ska fånga ögat. Två mörka sektioner (priset och
   kontakten) bryter sidan och bär de två besluten vi vill att läsaren fattar.

   ⚠️ Inga tal om pris eller datum står i den här filen eller i index.html som
   text — de kommer ur env via app/server.js. Se kommentaren där. */

:root {
  --papper: #f6f3ec;
  --papper-2: #fffdf8;
  --papper-3: #efeade;
  --black: #131c18;
  --ink: #16211d;
  --ink-2: #1d2a25;
  --text: #16211d;
  --svag: #56605a;
  --dov: #838d86;
  --linje: rgba(22, 33, 29, .13);
  --linje-2: rgba(22, 33, 29, .24);
  --gron: #1f5c46;
  --gron-ljus: #2f7d5f;
  --gron-blek: #d9e7e0;
  --massing: #a8762c;
  --massing-blek: #f2e4cd;
  --rod: #a8412c;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radie: 16px;
  --huvud-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* ⛔ `height: auto` MÅSTE stå här. Bilderna bär width/height som attribut
   (för att slippa layouthopp), och utan den här raden använder webbläsaren
   höjdattributet rakt av medan bredden krymper — alla foton blir för höga
   utan ett enda fel i konsolen. Syntes först i skärmbilden. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
figure { margin: 0; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: calc(var(--huvud-h) + 14px); }

.inre { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.inre.smal { max-width: 820px; }

.hoppa {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--papper); padding: 12px 20px; border-radius: 0 0 10px 0;
}
.hoppa:focus { left: 0; }

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

/* ── Typografi ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.012em; }
h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 6.4vw, 78px);
  line-height: 1.02; letter-spacing: -.022em;
}
h1 em { font-style: italic; color: var(--gron); }
h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.1vw, 46px);
  line-height: 1.1; letter-spacing: -.018em;
}
h3 { font-size: 19px; line-height: 1.32; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.etikett {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gron); margin: 0 0 14px;
}
.etikett::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.etikett.ljus { color: var(--massing-blek); }

.lead { font-size: 18.5px; color: var(--svag); max-width: 62ch; }
.mork .lead { color: rgba(246, 243, 236, .74); }

.rubrik-liten {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dov); font-weight: 500; margin: 0 0 28px;
}

/* ── Huvud ──────────────────────────────────────────────────────────────── */

.huvud {
  position: sticky; top: 0; z-index: 50; height: var(--huvud-h);
  background: rgba(246, 243, 236, .86);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--linje);
}
.huvud .inre { height: 100%; display: flex; align-items: center; gap: 22px; }
.logga { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--gron); }
.logga svg { width: 30px; height: 30px; flex: none; }
.logga span { font-family: var(--serif); font-size: 23px; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.meny { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.meny a { text-decoration: none; color: var(--svag); transition: color .18s; }
.meny a:hover { color: var(--gron); }

/* ── Knappar ────────────────────────────────────────────────────────────── */

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gron); color: #fff; font: inherit; font-weight: 600; font-size: 16px;
  border: 1px solid var(--gron); border-radius: 999px; padding: 14px 28px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.knapp:hover { background: var(--gron-ljus); border-color: var(--gron-ljus); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(31, 92, 70, .8); }
.knapp:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.knapp.liten { padding: 9px 20px; font-size: 15px; }
.knapp.bred { width: 100%; }
.knapp.sekundar { background: transparent; color: var(--ink); border-color: var(--linje-2); }
.knapp.sekundar:hover { background: transparent; border-color: var(--ink); box-shadow: none; }
.mork .knapp { background: var(--massing); border-color: var(--massing); color: #fff; }
.mork .knapp:hover { background: #bd8734; border-color: #bd8734; box-shadow: 0 10px 24px -12px rgba(168, 118, 44, .9); }

/* ── Hjälten ────────────────────────────────────────────────────────────── */

.hjalte { padding: clamp(48px, 7vw, 90px) 0 clamp(40px, 6vw, 76px); }
.hjalte-rutnat { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hjalte h1 { margin-bottom: 22px; }
.ingress { font-size: 19px; color: var(--svag); max-width: 52ch; }
.ingress strong { color: var(--ink); font-weight: 600; }
.knappar { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.markeringar {
  list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--linje);
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dov);
}
.markeringar li { display: flex; align-items: center; gap: 8px; }
.markeringar li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--massing); }

.hjalte-bild img { border-radius: var(--radie); box-shadow: 0 30px 60px -34px rgba(22, 33, 29, .5); width: 100%; }
.hjalte-bild figcaption { margin-top: 12px; font-size: 13.5px; color: var(--dov); font-style: italic; }

/* ── Band med tre kort ──────────────────────────────────────────────────── */

.band { padding: clamp(40px, 5vw, 64px) 0; border-block: 1px solid var(--linje); background: var(--papper-3); }
.rutnat { display: grid; gap: 22px; }
.rutnat.tre { grid-template-columns: repeat(3, 1fr); }
.rutnat.tva { grid-template-columns: repeat(2, 1fr); }

.kort { background: var(--papper-2); border: 1px solid var(--linje); border-radius: var(--radie); padding: 26px 24px; }
.kort .siffra { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--massing); display: block; margin-bottom: 12px; }
.kort h3 { margin-bottom: 8px; }
.kort p { color: var(--svag); font-size: 16px; }

/* ── Sektioner ──────────────────────────────────────────────────────────── */

.sektion { padding: clamp(64px, 8vw, 110px) 0; }
.sektion.ljusband { background: var(--papper-3); border-block: 1px solid var(--linje); }
.sektion.mork { background: var(--ink); color: var(--papper); }
.sektion.mork h2, .sektion.mork h3, .sektion.mork h4 { color: var(--papper); }
.sektion-huvud { max-width: 70ch; margin-bottom: clamp(34px, 4.5vw, 56px); }
.sektion-huvud h2 { margin-bottom: 16px; }

/* ── Stegen ─────────────────────────────────────────────────────────────── */

.steg { list-style: none; margin: 0; padding: 0; counter-reset: s; max-width: 900px; }
.steg > li {
  counter-increment: s; position: relative;
  padding: 26px 0 26px 78px; border-top: 1px solid var(--linje);
}
.steg > li:last-child { border-bottom: 1px solid var(--linje); }
.steg > li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 26px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--massing);
  width: 54px; padding-top: 4px; border-top: 2px solid var(--massing);
}
.steg h3 { font-size: 21px; margin-bottom: 8px; }
.steg p { color: var(--svag); max-width: 62ch; }

/* ── Priset ─────────────────────────────────────────────────────────────── */

.pris-rutnat { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }

.prislapp {
  background: var(--papper); color: var(--ink); border-radius: 20px; padding: 32px 30px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); position: sticky; top: calc(var(--huvud-h) + 20px);
}
.prislapp-etikett { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gron); margin-bottom: 6px; }
.prislapp-tal { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.prislapp-tal .tal { font-family: var(--serif); font-size: 76px; line-height: .92; letter-spacing: -.03em; }
.prislapp-tal .enhet { font-size: 16px; color: var(--svag); font-weight: 500; }
.prislapp-not { font-size: 13px; color: var(--dov); margin: 6px 0 22px; }
.prislapp .knapp { width: 100%; margin-top: 22px; }
.prislapp-fot { margin-top: 16px; font-size: 13.5px; color: var(--svag); line-height: 1.5; }

.bock { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.bock li { position: relative; padding-left: 28px; font-size: 15.5px; }
.bock li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px;
  border-left: 2px solid var(--gron); border-bottom: 2px solid var(--gron);
  transform: rotate(-45deg);
}

.villkor h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin-bottom: 20px; }
.villkorslista { list-style: none; counter-reset: v; margin: 0; padding: 0; display: grid; gap: 2px; }
.villkorslista li {
  counter-increment: v; position: relative; padding: 20px 0 20px 54px;
  border-top: 1px solid rgba(246, 243, 236, .14); color: rgba(246, 243, 236, .74); font-size: 16px;
}
.villkorslista li:last-child { border-bottom: 1px solid rgba(246, 243, 236, .14); }
.villkorslista li::before {
  content: counter(v); position: absolute; left: 0; top: 20px;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(168, 118, 44, .22); color: var(--massing-blek);
  font-family: var(--mono); font-size: 13px;
}
.villkorslista strong { color: var(--papper); font-weight: 600; display: block; margin-bottom: 3px; }
.mark { color: var(--massing-blek); font-weight: 600; }

.varning {
  margin-top: 28px; padding: 22px 24px; border-radius: var(--radie);
  background: rgba(168, 118, 44, .13); border: 1px solid rgba(168, 118, 44, .34);
}
.varning h4 { font-size: 16.5px; margin-bottom: 8px; color: var(--massing-blek) !important; }
.varning p { color: rgba(246, 243, 236, .8); font-size: 15.5px; margin: 0; }

/* ── Tjänster ───────────────────────────────────────────────────────────── */

.tjanst { background: var(--papper-2); border: 1px solid var(--linje); border-radius: var(--radie); padding: 26px 24px; }
.tjanst h3 { margin: 12px 0 8px; }
.tjanst p { color: var(--svag); font-size: 15.5px; }
.tjanst-mark {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.tjanst-mark.ingar { background: var(--gron-blek); color: var(--gron); }
.tjanst-mark.extra { background: var(--massing-blek); color: var(--massing); }

/* ── Vägarna in ─────────────────────────────────────────────────────────── */

.vagar { gap: 28px; }
.vag { background: var(--papper-2); border: 1px solid var(--linje); border-radius: var(--radie); overflow: hidden; display: flex; flex-direction: column; }
.vag figure { aspect-ratio: 16 / 9; overflow: hidden; background: var(--papper-3); }
.vag figure img { width: 100%; height: 100%; object-fit: cover; }
.vag-text { padding: 24px; }
.vag-text h3 { margin-bottom: 8px; font-size: 20px; }
.vag-text p { color: var(--svag); font-size: 15.5px; }

/* ── Tidslinjen ─────────────────────────────────────────────────────────── */

.tidslinje { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--linje); }
.datum { padding: 24px 22px 24px 0; border-right: 1px solid var(--linje); padding-right: 22px; }
.datum:last-child { border-right: 0; }
.datum:not(:first-child) { padding-left: 22px; }
.datum-dag { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin-bottom: 2px; }
.datum-vem { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dov); margin-bottom: 10px; }
.datum p:last-child { font-size: 15px; color: var(--svag); margin: 0; }
.datum.ditt { border-top: 2px solid var(--massing); margin-top: -2px; }
.datum.ditt .datum-dag { color: var(--massing); }
.datum.ditt .datum-vem { color: var(--massing); }
.fotnot { margin-top: 26px; font-size: 14px; color: var(--dov); max-width: 70ch; }

/* ── Om ─────────────────────────────────────────────────────────────────── */

.om-rutnat { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 4.5vw, 60px); align-items: center; }
.om-bild img { border-radius: var(--radie); box-shadow: 0 26px 52px -32px rgba(22, 33, 29, .55); }
.om-text h2 { margin-bottom: 18px; }
.om-text p { color: var(--svag); max-width: 60ch; }
.om-fakta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 30px; background: var(--linje); border: 1px solid var(--linje); border-radius: var(--radie); overflow: hidden; }
.om-fakta div { background: var(--papper-3); padding: 16px 18px; }
.om-fakta b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dov); font-weight: 500; margin-bottom: 4px; }
.om-fakta span { font-size: 15.5px; }

/* ── Frågor ─────────────────────────────────────────────────────────────── */

.fragor { border-top: 1px solid var(--linje); }
.fragor details { border-bottom: 1px solid var(--linje); }
.fragor summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 18px; font-weight: 500; transition: color .18s;
}
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary:hover { color: var(--gron); }
.fragor summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--massing); border-bottom: 2px solid var(--massing);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s;
}
.fragor details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragor details p { padding: 0 8% 24px 0; color: var(--svag); max-width: 70ch; }

/* ── Kontakt ────────────────────────────────────────────────────────────── */

.kontakt-rutnat { display: grid; grid-template-columns: 1fr minmax(330px, 480px); gap: clamp(30px, 5vw, 64px); align-items: start; }
.kontakt-text h2 { margin-bottom: 16px; }
.kontakt-punkter { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.kontakt-punkter li { position: relative; padding-left: 28px; color: rgba(246, 243, 236, .78); font-size: 16px; }
.kontakt-punkter li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px;
  border-left: 2px solid var(--massing); border-bottom: 2px solid var(--massing); transform: rotate(-45deg);
}
.kontakt-direkt { margin-top: 26px; font-size: 15.5px; color: rgba(246, 243, 236, .7); }
.kontakt-direkt a { color: var(--massing-blek); }

.formular { background: var(--papper); color: var(--ink); border-radius: 20px; padding: 28px 26px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.falt { display: grid; gap: 6px; margin-bottom: 14px; }
.falt-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.falt label { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--svag); }
.falt label span { color: var(--rod); }
.falt input, .falt select, .falt textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--papper-2);
  border: 1px solid var(--linje-2); border-radius: 10px; padding: 12px 13px; width: 100%;
}
.falt textarea { resize: vertical; min-height: 96px; }
.falt input:focus, .falt select:focus, .falt textarea:focus { border-color: var(--gron); outline: none; box-shadow: 0 0 0 3px rgba(31, 92, 70, .16); }
.falt-hjalp { font-size: 13px; color: var(--dov); margin: -4px 0 14px; }
.honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .knapp { margin-top: 6px; }
.formular-svar { margin: 14px 0 0; font-size: 15px; min-height: 0; }
.formular-svar.ok { color: var(--gron); font-weight: 500; }
.formular-svar.fel { color: var(--rod); }
.formular-not { margin-top: 14px; font-size: 13px; color: var(--dov); }

/* ── Foten ──────────────────────────────────────────────────────────────── */

.fot { background: var(--papper-3); border-top: 1px solid var(--linje); padding: 48px 0 26px; font-size: 15px; color: var(--svag); }
.fot-inre { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 28px; }
.fot-marke { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.fot-rubrik { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dov); margin-bottom: 8px; }
.fot a { color: var(--gron); text-decoration: none; }
.fot a:hover { text-decoration: underline; }
.fot-rad { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linje); font-size: 13.5px; color: var(--dov); }

/* ── Smalare skärmar ────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hjalte-rutnat, .om-rutnat, .pris-rutnat, .kontakt-rutnat { grid-template-columns: 1fr; }
  .om-bild { order: 2; }
  .prislapp { position: static; }
  .rutnat.tre { grid-template-columns: 1fr 1fr; }
  .tidslinje { grid-template-columns: 1fr 1fr; }
  .datum { border-right: 0; border-bottom: 1px solid var(--linje); padding-inline: 0 !important; }
  .datum:nth-child(odd) { padding-right: 18px !important; }
  .datum:nth-child(even) { padding-left: 18px !important; border-left: 1px solid var(--linje); }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .inre { padding-inline: 16px; }
  .meny { display: none; }
  .rutnat.tre, .rutnat.tva, .om-fakta { grid-template-columns: 1fr; }
  .tidslinje { grid-template-columns: 1fr; }
  .datum { border-left: 0 !important; padding-inline: 0 !important; }
  .fot-inre { grid-template-columns: 1fr; gap: 22px; }
  .steg > li { padding-left: 0; padding-top: 44px; }
  .steg > li::before { top: 22px; }
  .falt-par { grid-template-columns: 1fr; gap: 0; }
  .prislapp-tal .tal { font-size: 64px; }
  .knappar .knapp { flex: 1 1 auto; }
}