/* Delad stil för HELA sidbruket.se – förstasidan och alla undersidor.

   Palett: grönt, grått, vitt, svart. Vald av ägaren 2026-08-07.
   Omarbetad 2026-08-07 (andra omgången): ägaren tyckte den första versionen
   var för tam. Livet kommer nu från fyra håll, och backa inte på dem utan
   att veta varför:
     1. Djupgrönt används som RIKTIG YTA, inte bara som liten accent.
     2. Rubrikerna är större och får ta plats.
     3. Avsnitten har olika rytm – kort, steg, spalter – i stället för
        samma rubrik-plus-stycke hela vägen ner.
     4. Ett eget motiv: förskjutna ark, för sid + bruk. Se .motiv nedan.

   Alla textfärger är kontrollmätta mot sina faktiska bakgrunder i
   webbläsaren och ligger över WCAG AA. Siffrorna står vid varje variabel.
   Ändra ingen färg utan att räkna om.

   OBS: sätt ALDRIG overflow-x på body. Det gör body till en scroll-container
   och slår ihjäl position: sticky för allt på sidan. Ligger den på html i
   stället gäller den för viewporten och sticky fortsätter fungera. */

:root {
  --vit: #ffffff;
  --papper: #f7f8f7;          /* sidans botten */
  --dis: #eaeee9;             /* dämpad yta – mörkare än förut, syntes knappt */
  --ink: #151a18;             /* nästan svart, med en aning grönt i sig */
  --brod: #4a5250;            /* brödtext – 7,6:1 mot papper */
  --dampad: #5b6461;          /* finstilt – 5,7:1 mot papper */
  --linje: #dde3de;
  --gron: #245a45;            /* accent – 7,5:1 mot papper, 8,0:1 mot vitt */
  --gron-djup: #1f4d3c;

  /* Mörka ytor. Djupgrönt, inte svart – svart blev hårt mot det gröna. */
  --skog: #16332a;
  --skog-djup: #112a21;
  --pa-skog: #f1f6f3;         /* 12,5:1 */
  --pa-skog-dampad: #a8c3b5;  /* 7,2:1 */
  --pa-skog-accent: #a8d8bf;  /* 8,6:1 */

  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ark: 1120px;
  --kant: clamp(20px, 5vw, 56px);
  --rundning: 8px;
  --skugga: 0 1px 2px rgba(21,26,24,.04), 0 8px 24px -12px rgba(21,26,24,.16);
  --skugga-lyft: 0 2px 4px rgba(21,26,24,.05), 0 18px 40px -16px rgba(21,26,24,.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--papper); color: var(--brod);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
::selection { background: var(--gron); color: #fff; }
:focus-visible { outline: 2px solid var(--gron); outline-offset: 3px; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }

.hoppa {
  position: absolute; left: -9999px; top: 0;
  background: var(--skog); color: #fff; padding: 12px 20px; z-index: 100;
}
.hoppa:focus { left: 8px; top: 8px; }

/* ---------- Motivet: vägen ---------- */
/* Bytt 2026-08-08 på ägarens begäran, från tre förskjutna ark till en väg
   med stationer. Varje rubrik på förstasidan är en station (ring med punkt),
   och en linje ritas mellan dem medan man scrollar (se .vag nedan och
   skriptet i index.html). Passar sidans budskap: "du vet inte var du ska
   börja" – vägen visar ordningen.

   Ringen har genomskinlig mitt så att väglinjen kan passera genom den.
   Två färgvarianter räcker (ljus/mörk botten) eftersom en svg som laddas
   som background-image inte kan ärva currentColor. */

.motiv-mark {
  display: block; width: 22px; height: 22px; margin-bottom: 12px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='none' stroke='%23245a45' stroke-width='3.5'/%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23245a45'/%3E%3C/svg%3E");
}
.band-mork .motiv-mark, .hero .motiv-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='14' fill='none' stroke='%23a8d8bf' stroke-width='3.5'/%3E%3Ccircle cx='20' cy='20' r='5.5' fill='%23a8d8bf'/%3E%3C/svg%3E");
}

/* ---------- Topprad ---------- */

.topp {
  position: sticky; top: 0; z-index: 20;
  background: rgba(247, 248, 247, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
}
.topp-indre {
  max-width: var(--ark); margin: 0 auto; padding: 13px var(--kant);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 28px; flex-wrap: wrap;
}
.marke { text-decoration: none; color: var(--ink); line-height: 1.2; }
.marke b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.005em; }
.marke span { display: block; font-size: 0.69rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gron); }

.meny { display: flex; gap: 6px 24px; flex-wrap: wrap; font-size: 0.94rem; }
.meny a { text-decoration: none; color: var(--brod); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .18s, border-color .18s; }
.meny a:hover { color: var(--ink); border-bottom-color: var(--gron); }
.meny a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gron); }

.kampanj { background: var(--gron); color: #fff; font-size: 0.88rem; }
.kampanj p { max-width: var(--ark); margin: 0 auto; padding: 10px var(--kant); color: inherit; }
/* Ärver vit text. Utan detta slår den globala strong/b-regeln till och
   sätter --ink på grön botten – 2,2:1, långt under godkänt. */
.kampanj strong, .kampanj b { color: inherit; font-weight: 600; }

/* ---------- Grundlayout ---------- */

.ark { max-width: var(--ark); margin: 0 auto; padding: 0 var(--kant); }
.spalt { max-width: 34em; }

/* Helbreddsband. Bredden sätts av wrappern, aldrig av negativa vw-marginaler –
   vw räknar med rullningslisten och ger sidledsscroll på Windows. */
.band { width: 100%; background: var(--dis); border-block: 1px solid var(--linje); }
.band-mork { width: 100%; background: var(--skog); color: var(--pa-skog); }

.avsnitt { padding: clamp(52px, 9vh, 96px) 0; }
.avsnitt + .avsnitt { border-top: 1px solid var(--linje); }
.band .avsnitt + .avsnitt, .band-mork .avsnitt + .avsnitt { border-top: none; }

/* ---------- Typografi ---------- */

h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; color: var(--ink); line-height: 1.16; }
h1 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); letter-spacing: -0.022em; line-height: 1.08; max-width: 15em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); letter-spacing: -0.015em; margin-bottom: 16px; max-width: 18em; }
h3 { font-size: 1.14rem; margin-bottom: 5px; }
p { max-width: 34em; margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }
strong, b { color: var(--ink); font-weight: 600; }

.ingress { font-size: clamp(1.08rem, 1.9vw, 1.3rem); line-height: 1.58; max-width: 33em; margin-top: 22px; }
.finstilt { font-size: 0.86rem; color: var(--dampad); max-width: 34em; margin-top: 16px; }
.eyebrow { font-size: 0.73rem; letter-spacing: 0.19em; text-transform: uppercase; color: var(--gron); margin-bottom: 12px; }

a.text { color: var(--gron); text-decoration-color: var(--linje); text-underline-offset: 3px; transition: color .18s, text-decoration-color .18s; }
a.text:hover { color: var(--gron-djup); text-decoration-color: currentColor; }

/* Mot mörk botten. BÅDA de mörka ytorna måste stå med i varje selektor –
   .hero och .band-mork. Står bara .band-mork får hero-knappen grön text på
   djupgrön botten, vilket är 1,7:1 och helt oläsbart. Det hände 2026-08-07. */
.band-mork h1, .band-mork h2, .band-mork h3,
.hero h1, .hero h2, .hero h3 { color: var(--pa-skog); }
.band-mork p, .hero p { color: var(--pa-skog-dampad); }
.band-mork strong, .band-mork b, .hero strong, .hero b { color: var(--pa-skog); }
.band-mork .eyebrow, .hero .eyebrow { color: var(--pa-skog-accent); }
.band-mork .finstilt, .hero .finstilt { color: var(--pa-skog-dampad); }
.band-mork a.text, .hero a.text { color: var(--pa-skog-accent); text-decoration-color: rgba(168,216,191,.4); }
.band-mork a.text:hover, .hero a.text:hover { color: #c3e6d3; text-decoration-color: currentColor; }

/* ---------- Knappar ---------- */

.knapp {
  display: inline-block; background: var(--gron); color: #fff;
  text-decoration: none; border: 1px solid var(--gron); cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.97rem;
  padding: 13px 28px; border-radius: var(--rundning);
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.knapp:hover { background: var(--gron-djup); border-color: var(--gron-djup); transform: translateY(-1px); box-shadow: var(--skugga); }
.knapp[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.knapp-tunn { background: transparent; color: var(--gron); border-color: #c6d2ca; }
.knapp-tunn:hover { background: transparent; color: var(--gron-djup); border-color: var(--gron); box-shadow: none; }
.knapprad { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; margin-top: 30px; }

.band-mork .knapp, .hero .knapp { background: var(--pa-skog-accent); border-color: var(--pa-skog-accent); color: var(--skog); }
.band-mork .knapp:hover, .hero .knapp:hover { background: #c3e6d3; border-color: #c3e6d3; }
.band-mork .knapp-tunn, .hero .knapp-tunn { background: transparent; color: var(--pa-skog-accent); border-color: rgba(168,216,191,.45); }
.band-mork .knapp-tunn:hover, .hero .knapp-tunn:hover { background: rgba(168,216,191,.1); color: #c3e6d3; border-color: var(--pa-skog-accent); }

/* ---------- Hero ---------- */

.hero { background: var(--skog); color: var(--pa-skog); position: relative; overflow: hidden; }
.hero-indre {
  max-width: var(--ark); margin: 0 auto; padding: clamp(56px, 11vh, 118px) var(--kant);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-figur { justify-self: center; width: 100%; max-width: 360px; }
.hero-figur svg { width: 100%; height: auto; display: block; }

/* ---------- Sidhuvud på undersidor ---------- */

.sidtopp { padding: clamp(46px, 8vh, 84px) 0 clamp(30px, 5vh, 52px); }

/* ---------- Listor ---------- */

ul.punkter { list-style: none; max-width: 34em; margin-top: 18px; }
ul.punkter li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--linje); }
ul.punkter li::before { content: "–"; position: absolute; left: 0; top: 10px; color: var(--gron); }
ul.punkter.ingar li::before { content: "✓"; font-size: 0.9em; }
ul.punkter.ingar-ej li::before { content: "×"; color: var(--dampad); }
.band-mork ul.punkter li, .hero ul.punkter li { border-bottom-color: rgba(168,195,181,.22); }
.band-mork ul.punkter li::before, .hero ul.punkter li::before { color: var(--pa-skog-accent); }

/* Kortrutnät – används för invändningarna. Ger sidan djup i stället för
   ännu en platt lista, och bryter den enspaltiga rytmen. */
/* min(270px, 100%): utan den svämmar korten över när korridoren gör
   innehållsspalten smalare än kortens minsta bredd. */
.kort-rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 18px; margin-top: 34px; }
.kort {
  background: var(--vit); border: 1px solid var(--linje); border-radius: var(--rundning);
  padding: 24px 24px 26px; box-shadow: var(--skugga);
  transition: transform .22s ease, box-shadow .22s ease;
}
.kort:hover { transform: translateY(-3px); box-shadow: var(--skugga-lyft); }
.kort h3 { font-size: 1.1rem; margin-bottom: 9px; color: var(--gron); line-height: 1.35; }
.kort p { font-size: 0.96rem; margin: 0; max-width: none; }

/* Fråga–svar-par: FAQ och liknande */
.par { margin-top: 26px; max-width: 40em; }
.par > div { padding: 20px 0; border-top: 1px solid var(--linje); }
.par > div:last-child { border-bottom: 1px solid var(--linje); }
.par dt { font-family: var(--font-serif); font-size: 1.14rem; color: var(--ink); margin-bottom: 6px; line-height: 1.35; }
.par dd { margin-left: 0; }
.par dd p { margin-bottom: 10px; }

/* Numrerad gång – två spalter, stora siffror */
.gang { list-style: none; counter-reset: steg; margin-top: 34px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 4px 44px; }
.gang li { counter-increment: steg; position: relative; padding: 20px 0 20px 60px; border-top: 1px solid var(--linje); }
.gang li::before {
  content: counter(steg, decimal-leading-zero);
  position: absolute; left: 0; top: 17px;
  font-family: var(--font-serif); font-size: 1.5rem; color: var(--gron); opacity: .55;
}
.gang h3 { margin-bottom: 3px; }
.gang p { font-size: 0.96rem; max-width: none; }

/* ---------- Priser ---------- */

.paket { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-top: 32px; }
.paket-kort {
  background: var(--vit); border: 1px solid var(--linje); border-radius: var(--rundning);
  padding: 30px 28px 32px; display: flex; flex-direction: column; box-shadow: var(--skugga);
  transition: transform .22s ease, box-shadow .22s ease;
}
.paket-kort:hover { transform: translateY(-3px); box-shadow: var(--skugga-lyft); }
.paket-kort h3 { font-size: 1.5rem; margin-bottom: 3px; }
.paket-kort .vad { font-size: 0.93rem; color: var(--dampad); margin-bottom: 22px; }
.paket-kort ul { list-style: none; font-size: 0.95rem; margin-top: auto; }
.paket-kort ul li { position: relative; padding: 7px 0 7px 24px; }
.paket-kort ul li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: var(--gron); font-size: 0.9em; }

/* Stora pristal – ett av ställena där sidan får ta i */
.prisrad { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.prisrad s { color: var(--dampad); font-size: 1.05rem; }
.prisrad .nu { font-family: var(--font-serif); font-size: clamp(2.3rem, 4.6vw, 3.1rem); line-height: 1; color: var(--gron); letter-spacing: -0.02em; }
.prisrad .enhet { font-size: 0.9rem; color: var(--dampad); }
.pris-not { font-size: 0.84rem; color: var(--dampad); margin-bottom: 22px; }

/* Driftblocket: engångssumma först, sedan driften – årsvis eller månadsvis */
.drift {
  margin-top: 26px; background: var(--vit); border: 1px solid var(--linje);
  border-radius: var(--rundning); padding: 30px clamp(22px, 3.4vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px 44px; align-items: center; box-shadow: var(--skugga);
}
.drift h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: 10px; }
.drift p { font-size: 0.97rem; margin-bottom: 0; }
.drift-val { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.val {
  border: 1px solid var(--linje); border-radius: var(--rundning);
  padding: 18px 18px 20px; position: relative; background: var(--papper);
}
.val-bast { border-color: var(--gron); background: #f2f7f4; }
.val-etikett { display: block; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dampad); margin-bottom: 8px; }
.val-pris { display: block; font-family: var(--font-serif); font-size: 1.85rem; line-height: 1.05; color: var(--ink); }
.val-bast .val-pris { color: var(--gron); }
.val-enhet { display: block; font-size: 0.85rem; color: var(--dampad); margin-top: 2px; }
.val-marke {
  position: absolute; top: -10px; right: 14px; background: var(--gron); color: #fff;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}

.liste { border-top: 1px solid var(--linje); margin-top: 26px; max-width: 44em; }
.liste-rad { display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: baseline; padding: 18px 2px; border-bottom: 1px solid var(--linje); }
.liste-rad h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1rem; margin: 0; }
.liste-rad small { display: block; color: var(--dampad); font-weight: 400; margin-top: 2px; font-size: 0.89rem; }
.liste-rad .pris { font-family: var(--font-serif); color: var(--gron); white-space: nowrap; text-align: right; font-size: 1.15rem; }
.liste-rad .pris span { display: block; font-family: var(--font-sans); font-size: 0.8rem; color: var(--dampad); }

/* ---------- Bild ---------- */

.bildruta { border-radius: var(--rundning); overflow: hidden; box-shadow: var(--skugga); }
.bildruta img { width: 100%; }
.tva-spalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }

/* ---------- Notis och citat ---------- */

.notis { border-left: 3px solid var(--gron); padding: 3px 0 3px 22px; margin: 28px 0; max-width: 34em; }
.notis p { margin-bottom: 8px; }
.band-mork .notis, .hero .notis { border-left-color: var(--pa-skog-accent); }

.stort-citat {
  font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.34; color: var(--ink); max-width: 20em; letter-spacing: -0.012em;
}
.band-mork .stort-citat, .hero .stort-citat { color: var(--pa-skog); }
.efter-citat { margin-top: 22px; }

/* ---------- Formulär ---------- */

form { max-width: 30em; margin-top: 32px; }
.falt { margin-bottom: 16px; }
.falt label { display: block; font-size: 0.79rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--pa-skog-dampad); margin-bottom: 7px; }
.falt input, .falt textarea {
  width: 100%; background: rgba(255,255,255,0.06); color: var(--pa-skog);
  border: 1px solid rgba(241,246,243,0.22); border-radius: var(--rundning);
  padding: 13px 15px; font: inherit; font-size: 0.98rem; line-height: 1.5;
  transition: border-color .2s, background .2s;
}
.falt input:focus, .falt textarea:focus { outline: none; border-color: var(--pa-skog-accent); background: rgba(255,255,255,0.1); }
.falt textarea { min-height: 116px; resize: vertical; }
.honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skicka-rad { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-top: 24px; }
.skicka-rad .alt { font-size: 0.88rem; color: var(--pa-skog-dampad); }
.skicka-rad .alt a { color: var(--pa-skog-accent); }
.status { margin-top: 20px; font-size: 0.95rem; }
.status:empty { margin: 0; }
.status.ok { color: var(--pa-skog-accent); }
.status.fel { color: #f0b9a8; }
.status.fel a { color: #fff; }

/* Enbart för skärmläsare. Utan den läses "3 500 kr 1 750 kr" i rad, och det
   framgår inte vilket som är det överstrukna ordinarie priset. */
.dolt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.avslut { background: var(--vit); border: 1px solid var(--linje); border-radius: var(--rundning); padding: 38px clamp(24px, 4vw, 48px); box-shadow: var(--skugga); }
.avslut h2 { margin-bottom: 10px; }

/* ---------- Sidfot ---------- */

.sidfot { border-top: 1px solid var(--linje); }
.sidfot-indre {
  max-width: var(--ark); margin: 0 auto; padding: 30px var(--kant) 44px;
  display: flex; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap;
  color: var(--dampad); font-size: 0.84rem;
}
.sidfot-lankar { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.sidfot a { color: var(--dampad); text-decoration: none; }
.sidfot a:hover { color: var(--gron); }

/* ---------- Tabell ---------- */

.tabellram { overflow-x: auto; margin-top: 26px; max-width: 44em; }
table { border-collapse: collapse; width: 100%; min-width: 30em; font-size: 0.95rem; }
th, td { text-align: left; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { font-weight: 600; color: var(--ink); font-size: 0.79rem; letter-spacing: 0.08em; text-transform: uppercase; }
td:last-child, th:last-child { text-align: right; padding-right: 0; white-space: nowrap; color: var(--ink); }

/* ---------- Avslöjning vid scroll ---------- */
/* Gömd bara när JS faktiskt kör (html.js) – annars vore halva sidan osynlig
   för den som har JS avstängt. */

.js .fram { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .fram.synlig { opacity: 1; transform: none; }

/* ---------- Småskärm ---------- */

@media (max-width: 900px) {
  .hero-indre { grid-template-columns: 1fr; gap: 38px; }
  .hero-figur { max-width: 260px; justify-self: start; order: -1; }
  .drift { grid-template-columns: 1fr; gap: 24px; }
  .tva-spalt { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .meny { font-size: 0.88rem; gap: 4px 16px; }
  .marke b { font-size: 1.2rem; }
  .paket, .kort-rutnat { grid-template-columns: 1fr; }
  .gang { grid-template-columns: 1fr; gap: 0; }
  .drift-val { grid-template-columns: 1fr; }
  .liste-rad { grid-template-columns: 1fr; }
  .liste-rad .pris { text-align: left; }
  .sidfot-indre { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .fram { opacity: 1; transform: none; }
}