@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/outfit-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
:root{--accent:#c62f47;--accent-mork:#a3223a;--accent-text:#ffffff;--lank:#b02a40;--accent-ljus:#fbe8eb;--accent-ikon:#b02a40;--text:#2f2f2b;--text-svag:#5f5f58;--rubriktext:#171715;--yta:#ffffff;--yta-alt:#f6f5f2;--linje:#e6e3dd;--faltkant:#cfccc4;--fokus:#1d6fd6;--huvud:#ffffff;--huvudtext:#2f2f2b;--huvudhover:#f3f1ed;--huvudlinje:#e6e3dd;--mork:#1f1f1d;--mork-text:#d6d6d0;--mork-text-svag:#a3a39b;--overrubrik:#ffb8c4;--radie-stor:16px;--radie-knapp:10px;--loggahojd:2.4rem;--logga-sidfot-filter:invert(1);--rubrik:'Outfit', "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;--brodtext:'Inter', "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;--rubrikvikt:700;--rubrik-transform:none;--rubrik-sparr:-.02em;}
/* Gemensam stil för admb.se och abmarkbygg.se, version 2 (2026-09-14).
   Temavariablerna (:root) och @font-face läggs överst av bygg.py från
   respektive sajt_*.py. Ingen inline-CSS: CSP tillåter bara stilmallar och
   typsnitt från den egna domänen.

   Medvetet varierat enligt Website Factorys anti-generisk-regler: sektionerna
   har olika rytm (sektion / sektion-tat), startsidan blandar mosaik, delad bild,
   mörk stegsektion och kontaktsplit, och kundens egna bilder bär sidan medan
   ikoner bara används som stöd i knappar och kontaktuppgifter. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; font-family: var(--brodtext); font-size: 1.0625rem; line-height: 1.7; color: var(--text); background: var(--yta); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
svg.ikon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.22em; }
a { color: var(--lank); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-mork); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--rubrik); font-weight: var(--rubrikvikt); line-height: 1.1; color: var(--rubriktext); letter-spacing: var(--rubrik-sparr); text-wrap: balance; }
h1, h2 { text-transform: var(--rubrik-transform); }
h1 { font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4rem); }
h2 { font-size: clamp(1.65rem, 1.15rem + 1.9vw, 2.6rem); }
h3 { font-size: 1.25rem; line-height: 1.25; }
p { text-wrap: pretty; }
p, ul, ol { margin: 0 0 1.1em; }
.bred { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.hoppa { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .6rem 1rem; color: #000; background: #fff; }
.hoppa:focus { left: 1rem; }

/* ---------- toppfält och sidhuvud ---------- */
.toppfalt { font-size: .875rem; color: var(--mork-text); background: var(--mork); }
.toppfalt .bred { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.toppfalt a { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.toppfalt-text { display: none; }
@media (min-width: 48rem) { .toppfalt-text { display: block; } }

.sidhuvud { position: sticky; top: 0; z-index: 50; background: var(--huvud); background: color-mix(in srgb, var(--huvud) 90%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--huvudlinje); }
.sidhuvud-inre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-block: .75rem; }
.logga img { width: auto; height: var(--loggahojd); }
.menyknapp { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem; font: inherit; font-weight: 600; color: var(--huvudtext); background: none; border: 1.5px solid currentColor; border-radius: var(--radie-knapp); cursor: pointer; }
.menyikon, .menyikon::before, .menyikon::after { position: relative; display: block; width: 1.15rem; height: 2px; background: currentColor; }
.menyikon::before, .menyikon::after { content: ""; position: absolute; left: 0; }
.menyikon::before { top: -6px; }
.menyikon::after { top: 6px; }

#huvudmeny { display: none; flex-basis: 100%; }
#huvudmeny.oppen { display: block; max-height: calc(100vh - 6rem); overflow-y: auto; }
#huvudmeny ul { list-style: none; margin: 0; padding: 0; }
#huvudmeny a { display: block; padding: .75rem .25rem; font-weight: 600; color: var(--huvudtext); text-decoration: none; border-bottom: 1px solid var(--huvudlinje); }
#huvudmeny ul ul a { padding-left: 1.25rem; font-weight: 400; }
#huvudmeny a[aria-current="page"], #huvudmeny .aktiv > a { color: var(--accent-ikon); }
#huvudmeny .meny-knapp > a { margin-top: .75rem; text-align: center; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radie-knapp); }

@media (min-width: 66rem) {
  .menyknapp { display: none; }
  .sidhuvud-inre { flex-wrap: nowrap; }
  #huvudmeny { display: block; flex-basis: auto; }
  #huvudmeny > ul { display: flex; align-items: center; gap: .15rem; }
  #huvudmeny > ul > li { position: relative; }
  #huvudmeny a { padding: .55rem .8rem; border: 0; border-radius: var(--radie-knapp); transition: background-color .15s, color .15s; }
  #huvudmeny a:hover { background: var(--huvudhover); }
  #huvudmeny .har-undermeny > a::after { content: ""; display: inline-block; margin-left: .4rem; vertical-align: middle; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
  #huvudmeny ul ul { display: none; position: absolute; left: 0; top: calc(100% + .4rem); min-width: 17rem; padding: .45rem; background: var(--huvud); border: 1px solid var(--huvudlinje); border-radius: var(--radie-stor); box-shadow: 0 24px 48px -20px rgb(0 0 0 / .35); }
  #huvudmeny ul ul::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; }
  #huvudmeny li:hover > ul, #huvudmeny li:focus-within > ul { display: block; }
  #huvudmeny ul ul a { padding: .55rem .8rem; }
  #huvudmeny .meny-knapp { margin-left: .75rem; }
  #huvudmeny .meny-knapp > a { margin: 0; padding: .65rem 1.2rem; }
  #huvudmeny .meny-knapp > a:hover { color: var(--accent-text); background: var(--accent-mork); }
}

/* ---------- knappar ---------- */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem; padding: .75rem 1.5rem; font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; color: var(--accent-text); background: var(--accent); border: 2px solid var(--accent); border-radius: var(--radie-knapp); cursor: pointer; box-shadow: 0 10px 24px -12px var(--accent); transition: transform .15s ease, background-color .15s, border-color .15s, color .15s; }
.knapp:hover { color: var(--accent-text); background: var(--accent-mork); border-color: var(--accent-mork); transform: translateY(-2px); }
.knapp .ikon { width: 1.1em; height: 1.1em; transition: transform .15s; }
.knapp:hover .ikon-pil { transform: translateX(3px); }
.knapp-ljus { color: var(--rubriktext); background: #fff; border-color: #fff; box-shadow: none; }
.knapp-ljus:hover { color: var(--rubriktext); background: rgb(255 255 255 / .88); border-color: transparent; }
.knapp-kontur { color: #fff; background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .55); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.knapp-kontur:hover { color: var(--rubriktext); background: #fff; border-color: #fff; }
.knappar { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- hjälte ---------- */
.hjalte { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(34rem, 84vh, 50rem); color: #fff; background: var(--mork); }
.hjalte-bild, .sidrubrik-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hjalte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(12 12 12 / .85) 0%, rgb(12 12 12 / .6) 45%, rgb(12 12 12 / .15) 100%), linear-gradient(0deg, rgb(12 12 12 / .55), transparent 45%); }
.hjalte-text { padding-block: 4.5rem 7.5rem; }
.hjalte h1 { max-width: 16ch; color: #fff; }
.hjalte .ingress { max-width: 36rem; margin-bottom: 2rem; font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); color: rgb(255 255 255 / .9); }
.hjalte-fortroende { margin: 1.4rem 0 0; font-size: .9rem; color: rgb(255 255 255 / .7); }
.overrubrik { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lank); }
.overrubrik::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
.hjalte .overrubrik { color: var(--overrubrik); }

.hjalte-fakta { position: relative; z-index: 2; margin-top: -4rem; }
.hjalte-fakta ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; overflow: hidden; background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie-stor); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .4); }
.hjalte-fakta li { display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 1.4rem 1.5rem; border-bottom: 1px solid var(--linje); }
.hjalte-fakta li:last-child { border-bottom: 0; }
@media (min-width: 64rem) { .hjalte-fakta li { border-bottom: 0; border-right: 1px solid var(--linje); } .hjalte-fakta li:last-child { border-right: 0; } }
.hjalte-fakta .ikon { width: 2.6rem; height: 2.6rem; padding: .6rem; color: var(--accent-ikon); background: var(--accent-ljus); border-radius: var(--radie-knapp); }
.hjalte-fakta strong { display: block; font-family: var(--rubrik); font-size: 1.2rem; font-weight: var(--rubrikvikt); line-height: 1.2; color: var(--rubriktext); }
.hjalte-fakta span { display: block; margin-top: .15rem; font-size: .92rem; line-height: 1.45; color: var(--text-svag); }

/* ---------- sidrubrik (undersidor) ---------- */
.sidrubrik { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--mork); }
.sidrubrik::before { content: ""; position: absolute; right: -12rem; bottom: -22rem; z-index: -1; width: 44rem; height: 44rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%); }
.sidrubrik.med-bild { display: grid; align-items: end; min-height: 23rem; }
.sidrubrik.med-bild::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(12 12 12 / .85), rgb(12 12 12 / .45) 70%, rgb(12 12 12 / .25)), linear-gradient(0deg, rgb(12 12 12 / .5), transparent 50%); }
.sidrubrik-text { padding-block: 3.5rem 3.25rem; }
.sidrubrik h1 { max-width: 22ch; margin-bottom: .35em; color: #fff; }
.sidrubrik .ingress { max-width: 44rem; margin: 0; font-size: 1.15rem; color: rgb(255 255 255 / .88); }
.smulor ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; padding: 0; font-size: .88rem; color: rgb(255 255 255 / .75); }
.smulor li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.smulor a { color: #fff; }

/* ---------- innehåll ---------- */
.innehall { padding-block: clamp(3rem, 6vw, 5rem); }
.innehall-rutnat { display: grid; gap: 3rem; }
@media (min-width: 62rem) { .innehall-rutnat { grid-template-columns: minmax(0, 1fr) 21rem; gap: 4.5rem; } }
.text { max-width: 46rem; }
.text > :first-child { margin-top: 0; }
.text h2 { margin-top: 1.8em; }
.text ul:not([class]), .text ol:not([class]) { padding-left: 1.2rem; }
.text li { margin-bottom: .35em; }
.textbild { width: 100%; margin: 0 0 2.25rem; border-radius: var(--radie-stor); box-shadow: 0 24px 50px -30px rgb(0 0 0 / .55); }
.bocklista { list-style: none; display: grid; gap: .6rem; padding: 0; }
.bocklista li { position: relative; margin: 0; padding-left: 2.1rem; }
.bocklista li::before { content: ""; position: absolute; left: 0; top: .22em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accent-ljus); }
.bocklista li::after { content: ""; position: absolute; left: .45rem; top: .6em; width: .45rem; height: .25rem; border-left: 2px solid var(--accent-ikon); border-bottom: 2px solid var(--accent-ikon); transform: rotate(-45deg); }
@media (min-width: 40rem) { .bocklista.tva { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.pris { position: relative; margin: 2rem 0; padding: 1.4rem 1.6rem 1.4rem 1.9rem; background: var(--yta-alt); border: 1px solid var(--linje); border-radius: var(--radie-stor); }
.pris::before { content: ""; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 4px; background: var(--accent); border-radius: 0 4px 4px 0; }
.pris h2, .pris h3 { margin-top: 0; font-size: 1.2rem; text-transform: none; }
.pris > :last-child, .pris ul:last-child { margin-bottom: 0; }
.not { font-size: .92rem; color: var(--text-svag); }

.sidokolumn { display: grid; align-content: start; gap: 1.25rem; }
@media (min-width: 62rem) { .sidokolumn { position: sticky; top: 7rem; } }
.ruta { padding: 1.6rem; background: var(--yta-alt); border: 1px solid var(--linje); border-radius: var(--radie-stor); }
.ruta h2 { font-size: 1.35rem; text-transform: none; }
.ruta-accent { color: var(--accent-text); background: linear-gradient(150deg, var(--accent), var(--accent-mork)); border: 0; box-shadow: 0 24px 48px -28px var(--accent-mork); }
.ruta-accent h2 { color: var(--accent-text); }
.ruta-accent a:not(.knapp) { font-weight: 600; color: var(--accent-text); }
.ruta-tel { margin: 1rem 0 0; }
.kontaktlista { list-style: none; display: grid; gap: .9rem; margin: 0; padding: 0; }
.kontaktlista li { display: grid; grid-template-columns: 2.4rem 1fr; align-items: start; gap: .8rem; margin: 0; line-height: 1.5; }
.kontaktlista .ikon { width: 2.4rem; height: 2.4rem; padding: .55rem; color: var(--accent-ikon); background: var(--accent-ljus); border-radius: var(--radie-knapp); }
.kontaktlista .etikett { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-svag); }

/* ---------- sektioner ---------- */
.sektion { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.sektion-tat { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sektion-alt { background: var(--yta-alt); }
.sektion-mork { color: var(--mork-text); background: var(--mork); }
.sektion-mork h2, .sektion-mork h3 { color: #fff; }
.sektion-mork .overrubrik { color: var(--overrubrik); }
.sektion-huvud { max-width: 46rem; margin-bottom: 2.75rem; }
.sektion-huvud > :last-child { margin-bottom: 0; }
.delad { display: grid; align-items: center; gap: 2.5rem; }
.delad + .delad { margin-top: clamp(4rem, 8vw, 6rem); }
@media (min-width: 56rem) { .delad { grid-template-columns: 1fr 1fr; gap: 4.5rem; } .delad.omvand > :first-child { order: 2; } }
.delad > img { width: calc(100% - 1.25rem); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radie-stor); box-shadow: 1.25rem 1.25rem 0 var(--accent-ljus); }
.delad.omvand > img { margin-left: 1.25rem; box-shadow: -1.25rem 1.25rem 0 var(--accent-ljus); }
.sektion-alt .delad > img { box-shadow: 1.25rem 1.25rem 0 color-mix(in srgb, var(--accent) 22%, var(--yta-alt)); }
.sektion-alt .delad.omvand > img { box-shadow: -1.25rem 1.25rem 0 color-mix(in srgb, var(--accent) 22%, var(--yta-alt)); }
.ortlista { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; }
.ortlista li { margin: 0; padding: .35rem .95rem; font-size: .95rem; background: var(--yta); border: 1px solid var(--linje); border-radius: 999px; }

/* ---------- kort: standardrutnät och mosaik ---------- */
.kortlista { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; }
.kort { margin: 0; }
.kort a { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--text); text-decoration: none; background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie-stor); transition: transform .25s ease, box-shadow .25s ease; }
.kort a:hover { color: var(--text); transform: translateY(-4px); box-shadow: 0 28px 50px -30px rgb(0 0 0 / .5); }
.kort-media { overflow: hidden; }
.kort-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.kort a:hover .kort-bild { transform: scale(1.06); }
.kort-text { position: relative; display: grid; gap: .3rem; padding: 1.2rem 1.35rem 1.45rem; }
.kort-text strong { padding-right: 2.75rem; font-family: var(--rubrik); font-size: 1.25rem; font-weight: var(--rubrikvikt); line-height: 1.2; color: var(--rubriktext); }
.kort-text > span:not(.kort-pil) { font-size: .95rem; line-height: 1.5; color: var(--text-svag); }
.kort-pil { position: absolute; top: 1.05rem; right: 1.1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; color: var(--accent-ikon); background: var(--accent-ljus); border-radius: 50%; transition: transform .2s, background-color .2s, color .2s; }
.kort-pil .ikon { width: 1rem; height: 1rem; }
.kort a:hover .kort-pil { color: var(--accent-text); background: var(--accent); transform: translateX(3px); }

@media (min-width: 62rem) {
  .kortlista.mosaik { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaik .kort:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaik .kort:nth-child(n+6) { grid-column: span 2; }
  .mosaik .kort:nth-child(n+6) a { flex-direction: row; }
  .mosaik .kort:nth-child(n+6) .kort-media { flex: 0 0 42%; }
  .mosaik .kort:nth-child(n+6) .kort-bild { height: 100%; aspect-ratio: auto; }
  .mosaik .kort:nth-child(n+6) .kort-text { align-content: center; }
  .mosaik .kort:first-child a { justify-content: flex-end; min-height: 34rem; border: 0; }
  .mosaik .kort:first-child .kort-media { position: absolute; inset: 0; }
  .mosaik .kort:first-child .kort-bild { height: 100%; aspect-ratio: auto; }
  .mosaik .kort:first-child a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 10 10 / .85), rgb(10 10 10 / .1) 60%); }
  .mosaik .kort:first-child .kort-text { z-index: 1; padding: 2.25rem; }
  .mosaik .kort:first-child .kort-text strong { font-size: 2rem; color: #fff; }
  .mosaik .kort:first-child .kort-text > span:not(.kort-pil) { font-size: 1.05rem; color: rgb(255 255 255 / .85); }
  .mosaik .kort:first-child .kort-pil { top: auto; right: 2.25rem; bottom: 2.4rem; width: 3rem; height: 3rem; color: var(--accent-text); background: var(--accent); }
}

/* ---------- steg ---------- */
.steg { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 0; padding: 0; counter-reset: steg; }
.steg li { position: relative; margin: 0; padding: 1.6rem 1.5rem 1.5rem; counter-increment: steg; background: var(--yta-alt); border: 1px solid var(--linje); border-radius: var(--radie-stor); }
.steg li::before { content: counter(steg, decimal-leading-zero); display: block; margin-bottom: .75rem; font-family: var(--rubrik); font-size: 2.75rem; font-weight: var(--rubrikvikt); line-height: 1; color: var(--accent-ikon); }
.steg strong { display: block; margin-bottom: .3rem; font-family: var(--rubrik); font-size: 1.2rem; font-weight: var(--rubrikvikt); color: var(--rubriktext); }
.sektion-mork .steg li { background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .1); }
.sektion-mork .steg li::before { color: var(--accent); }
.sektion-mork .steg strong { color: #fff; }

/* ---------- CTA ---------- */
.ctaband { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.sektion + .ctaband, .sektion-alt + .ctaband { padding-top: clamp(3rem, 6vw, 5rem); }
.ctaband-inre { position: relative; display: grid; align-items: center; gap: 1.5rem; overflow: hidden; padding: clamp(2rem, 4.5vw, 3.5rem); color: var(--accent-text); background: linear-gradient(120deg, var(--accent), var(--accent-mork)); border-radius: calc(var(--radie-stor) + 6px); box-shadow: 0 40px 70px -40px var(--accent-mork); }
.ctaband-inre::before { content: ""; position: absolute; right: -6rem; top: -8rem; width: 22rem; height: 22rem; border: 2.5rem solid rgb(255 255 255 / .09); border-radius: 50%; }
@media (min-width: 56rem) { .ctaband-inre { grid-template-columns: 1fr auto; } }
.ctaband h2 { position: relative; margin-bottom: .3em; color: var(--accent-text); }
.ctaband p { position: relative; margin: 0; font-size: 1.1rem; }
.ctaband .knappar { position: relative; }
.ctaband .knapp-kontur { color: var(--accent-text); background: transparent; border-color: var(--accent-text); }
.ctaband .knapp-kontur:hover { color: var(--accent); background: var(--accent-text); }

/* ---------- mejlruta (sajterna har inga formulär) ---------- */
.formular { display: grid; gap: 1.1rem; margin: 1.75rem 0; padding: clamp(1.4rem, 3.5vw, 2.25rem); background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie-stor); box-shadow: 0 24px 50px -36px rgb(0 0 0 / .45); }
.mejlruta h2 { margin: 0; font-size: 1.35rem; }
.mejlruta .bocklista { margin: 0; }
.formular-info { margin: 0; font-size: .88rem; color: var(--text-svag); }
.formular-info a { overflow-wrap: anywhere; }
.knapp-sekundar { color: var(--rubriktext); background: transparent; border-color: var(--faltkant); box-shadow: none; }
.knapp-sekundar:hover { color: var(--rubriktext); background: var(--yta-alt); border-color: var(--rubriktext); }

/* ---------- frågor och relaterat ---------- */
.fragor { margin-top: 3.25rem; padding: clamp(1.4rem, 3vw, 2.25rem); background: var(--yta-alt); border-radius: var(--radie-stor); }
.fragor h2 { margin-top: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.fragor h3 { margin: 0; padding: 1.25rem 0 .4rem; font-size: 1.12rem; border-top: 1px solid var(--linje); }
.fragor h2 + h3 { padding-top: .5rem; border-top: 0; }
.fragor p { margin: 0 0 1rem; }
.fragor p:last-child { margin-bottom: 0; }
.relaterat { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: .75rem; margin: 0; padding: 0; }
.relaterat li { margin: 0; }
.relaterat a { position: relative; display: grid; gap: .2rem; height: 100%; padding: 1rem 3rem 1.05rem 1.15rem; color: var(--text); text-decoration: none; background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie-stor); transition: border-color .2s, transform .2s; }
.relaterat a:hover { border-color: var(--accent); transform: translateY(-2px); }
.relaterat-namn { font-family: var(--rubrik); font-size: 1.1rem; font-weight: var(--rubrikvikt); color: var(--rubriktext); }
.relaterat a > span:not(.relaterat-namn) { font-size: .9rem; line-height: 1.45; color: var(--text-svag); }
.relaterat .ikon { position: absolute; top: 1.1rem; right: 1rem; width: 1.1rem; height: 1.1rem; color: var(--accent-ikon); }

/* ---------- referenser, galleri, prislistor, maskiner ---------- */
.referens { padding-block: 2.25rem; border-top: 1px solid var(--linje); }
.referens:first-child { padding-top: 0; border-top: 0; }
.referens h2 { margin: 0 0 .25em; font-size: 1.5rem; text-transform: none; }
.referens .uppdrag { margin-bottom: .6em; font-size: .92rem; font-weight: 600; letter-spacing: .02em; color: var(--accent-ikon); }
.galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .75rem; margin: 1.1rem 0 0; }
.galleri a { display: block; overflow: hidden; border-radius: var(--radie-knapp); }
.galleri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.galleri a:hover img { transform: scale(1.06); }
.tabell-omslag { margin: 1.75rem 0; overflow-x: auto; border: 1px solid var(--linje); border-radius: var(--radie-stor); }
.pristabell { width: 100%; border-collapse: collapse; font-size: .97rem; }
.pristabell th, .pristabell td { padding: .7rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linje); }
.pristabell tr:last-child td { border-bottom: 0; }
.pristabell th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-svag); background: var(--yta-alt); }
.pristabell td:last-child { font-weight: 600; white-space: nowrap; color: var(--rubriktext); }
.pristabell tbody tr:hover { background: var(--yta-alt); }
.maskin { display: grid; align-items: center; gap: 1.5rem; margin-bottom: 1rem; padding: 1.1rem; background: var(--yta); border: 1px solid var(--linje); border-radius: var(--radie-stor); }
@media (min-width: 40rem) { .maskin { grid-template-columns: 13rem 1fr; } }
.maskin img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radie-knapp); }
.maskin h3 { margin-bottom: .3em; }
.maskin p { margin-bottom: .5em; }
.maskin p:last-child { margin: 0; }
.maskin strong { display: inline-block; padding: .2rem .7rem; font-size: .95rem; color: var(--accent-ikon); background: var(--accent-ljus); border-radius: 999px; }

/* ---------- sidfot ---------- */
.sidfot { font-size: .95rem; color: var(--mork-text); background: var(--mork); }
.sidfot a { color: #fff; }
.sidfot h2 { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.sidfot .kontaktlista .etikett { color: var(--mork-text-svag); }
.sidfot .kontaktlista .ikon { color: #fff; background: rgb(255 255 255 / .08); }
.sidfot-logga img { width: auto; height: 2.6rem; margin-bottom: 1.25rem; filter: var(--logga-sidfot-filter); }
.sidfot-rutnat { display: grid; gap: 2.5rem; padding-block: 4rem 3rem; }
@media (min-width: 48rem) { .sidfot-rutnat { grid-template-columns: 1.3fr 1fr 1fr; } }
.sidfot-lankar { list-style: none; display: grid; gap: .5rem; margin: 0; padding: 0; }
.sidfot-botten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: 1.4rem; font-size: .85rem; border-top: 1px solid rgb(255 255 255 / .1); }
.sidfot-botten p { margin: 0; }

/* ---------- mobilens åtgärdsrad ---------- */
.mobilbar { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .45rem; background: var(--mork); background: color-mix(in srgb, var(--mork) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: var(--radie-stor); box-shadow: 0 16px 40px -12px rgb(0 0 0 / .55); }
.mobilbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; font-weight: 600; text-decoration: none; border-radius: var(--radie-knapp); }
.mobilbar-ring { color: #fff; background: rgb(255 255 255 / .1); }
.mobilbar-offert { color: var(--accent-text); background: var(--accent); }
body { padding-bottom: 5rem; }
@media (min-width: 48rem) { .mobilbar { display: none; } body { padding-bottom: 0; } }

.mobilbar-en { grid-template-columns: 1fr; }

.sektion-alt .ruta { background: var(--yta); }
.meddelande { max-width: 44rem; padding-block: 4rem; }

/* ---------- rörelse ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hjalte-text > * { animation: upp .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hjalte-text > :nth-child(2) { animation-delay: .08s; }
  .hjalte-text > :nth-child(3) { animation-delay: .16s; }
  .hjalte-text > :nth-child(n+4) { animation-delay: .24s; }
  .hjalte-fakta ul { animation: upp .9s .3s cubic-bezier(.2, .7, .2, 1) both; }
  @supports (animation-timeline: view()) {
    .kort, .delad > *, .steg li, .referens, .maskin, .relaterat li {
      animation: upp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes upp { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}