/* brf.siffralabs.se (brfsajt.py, LISTOR-P2-44). Riktningen Papper, "mera som startup men ändå siffralabs fonter"
   (Sami, kort 2332): Be Vietnam Pro, Siffras marinblå #061a57 som text, marinblå knapp med vit text (16,2:1; Sami kort 2342: "inte så super
   rosa knapp"), korallen i karta, staplar och taggar, pappersytan #F6F4EE som band. Förebilder för finishen: Ramp Rate, YC:s register (docs/brf-sajt/forebilder/finish). */
@font-face{font-family:'Be Vietnam Pro';font-weight:400;font-display:swap;src:url('/fonts/be-vietnam-pro-400.woff2') format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-weight:500;font-display:swap;src:url('/fonts/be-vietnam-pro-500.woff2') format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-weight:600;font-display:swap;src:url('/fonts/be-vietnam-pro-600.woff2') format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-weight:700;font-display:swap;src:url('/fonts/be-vietnam-pro-700.woff2') format('woff2')}

:root{
 --yta:#FFFFFF;--papper:#F6F4EE;--text:#061a57;--svag:#4a5578;--linje:rgba(6,26,87,.12);--linje-stark:#061a57;
 --knapp:#061a57;--knapp-hover:#1b3275;--pa-knapp:#FFFFFF;--lank:#061a57;
 --tagg:#ffe2e0;--pa-tagg:#061a57;--stapel:#e86167;--spar:#fef4f4;
 --karta:#e9e6dc;--karta-kant:#F6F4EE;--karta-mark:#ff7378;
 --t1:#efece3;--t2:#ffd9d6;--t3:#ffb1ad;--t4:#f47f83;--t5:#c9434d;
 /* BRF-P2-12: ramen som siffralabs.se och Företagsdata (.inre{width:min(1200px,100% - 48px)}): 1200 px innehåll och 24 px
    kant, 16 px under 580 px. Förut var 1200 px hela rutan med 40 px inre marginal, så innehållet började 40 px längre in. */
 --ram:1200px;--sid:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--yta);color:var(--text);font:400 16px/1.6 'Be Vietnam Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:'tnum' 0}
a{color:var(--lank);text-underline-offset:3px;text-decoration-thickness:1px}
svg{display:block}
.ram{max-width:calc(var(--ram) + 2*var(--sid));margin:0 auto;padding-left:var(--sid);padding-right:var(--sid)}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:4px}

/* Sidhuvud och menyer */
/* BRF-P2-08: toppen som på siffralabs.se. Ingen kant och samma färg som första sektionen (heron eller bandet), så att
   toppen går ihop med den; när man skrollat blir den vit med en hårlinje (brf.js sätter .fast, som .nav.fast där). */
header.sajt{background:var(--yta);position:sticky;top:0;z-index:20;transition:background-color .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s cubic-bezier(.2,.8,.2,1)}
body:has(>main>.hero:first-child) header.sajt:not(.fast),body:has(>main>.band:first-child) header.sajt:not(.fast){background:var(--papper)}
header.sajt.fast{background:color-mix(in srgb,var(--yta) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--linje)}
.huvud-in{display:flex;align-items:center;gap:8px;height:84px}
/* Märket (loggan till siffralabs.se, strecket och BRF) kommer ur Företagsdatas gemensamma /design/topp.css (BRF-P2-09),
   som länkas efter brf.css, så att en ändring där slår igenom på Brf och Företagsdata. Här sätts bara färgerna och
   loggan 50 px under 580 px (BRF-P2-13: som siffralabs.se, där toppen är 84 px med 54 px logga ned till 581 px och
   72 px med 50 px logga under; mobilmenyn tar över redan vid 980 px). Menyn står till höger (margin-left:auto på nav.meny). */
.siffra-topp{--topp-svag:var(--svag);--topp-linje:var(--linje);--topp-text:var(--text)}
.ord{font-weight:700;font-size:19px;letter-spacing:-.025em;white-space:nowrap;color:var(--text);text-decoration:none;margin:0}
.ord span{font-weight:400;color:var(--svag)}
nav.meny{display:flex;align-items:center;gap:2px;font-size:15px;font-weight:400;height:100%;margin-left:auto;margin-right:6px}
.meny-del{height:100%;display:flex;align-items:center}
.meny-del summary,.meny-lank{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:12px 14px;color:var(--text);text-decoration:none}
.lnk{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .3s cubic-bezier(.16,1,.3,1)}
.meny-del summary::-webkit-details-marker{display:none}
.meny-del summary svg{width:10px;height:10px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.meny-del[open] summary svg{transform:rotate(180deg)}
.meny-del summary:hover .lnk,.meny-lank:hover .lnk,.meny-del[open] summary .lnk,.meny-lank[aria-current] .lnk,.meny-del[data-aktiv] summary .lnk{background-size:100% 1.5px}
.panel{position:absolute;left:0;right:0;top:84px;background:var(--yta);border-bottom:1px solid var(--linje);animation:panel .18s cubic-bezier(.2,.8,.2,1)}
@keyframes panel{from{opacity:0;transform:translateY(-4px)}}
.panel-in{max-width:calc(var(--ram) + 2*var(--sid));margin:0 auto;padding:28px var(--sid) 32px}
.panel-smal{max-width:calc(var(--ram) + 2*var(--sid))}
.panel-rubrik{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--svag);margin:0 0 12px}
.kol{display:grid;gap:2px 32px}
.kol-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.panel-smal .kol{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.kol a{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;margin:0 -10px;border-radius:6px;color:var(--text);text-decoration:none;font-weight:500}
.kol a span{color:var(--svag);font-weight:400;font-variant-numeric:tabular-nums}
.kol a:hover{background:var(--papper)}
.panel-smal .kol a{flex-direction:column;gap:2px;padding:14px;margin:0;border:1px solid var(--linje)}
.panel-smal .kol a small{color:var(--svag);font-weight:400;font-size:13px}
.panel-fot{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--linje)}
.panel-fot a{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.panel-fot svg,.fler svg{width:14px;height:14px}
.sok{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--linje);border-radius:999px;padding:0 14px;height:40px;width:270px;background:var(--yta);color:var(--svag)}
.huvud-in>.sok{margin-left:0}
.sok:focus-within{border-color:var(--text)}
.sok svg{width:15px;height:15px;flex:none}
.sok input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--text);width:100%;min-width:0}
.sok input::placeholder{color:var(--svag)}
.mobilmeny{display:none}

/* Knappar och köp */
.knapp{display:inline-flex;align-items:center;gap:10px;background:var(--knapp);color:var(--pa-knapp);font:600 14px 'Be Vietnam Pro',sans-serif;border-radius:999px;padding:0 24px;height:44px;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background .15s}
.knapp:hover{background:var(--knapp-hover)}
.knapp:active{transform:scale(.98)}
.knapp svg{width:14px;height:14px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.knapp:hover svg{transform:translateX(3px)}
.kop{border-top:2px solid var(--linje-stark);padding-top:16px}
.kop-rubrik{font-size:14px;font-weight:500;margin:0}
.kop-pris{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin:2px 0 2px;font-variant-numeric:tabular-nums}
.kop-rad{font-size:13px;color:var(--svag);margin:0 0 16px;font-variant-numeric:tabular-nums}
.kop-under{font-size:13px;color:var(--svag);margin:10px 0 0}

/* Toppen */
.hero{background:var(--papper);border-bottom:1px solid var(--linje)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:56px;padding-bottom:40px}
.overrad{font-size:13px;font-weight:600;color:var(--svag);margin:0 0 16px;letter-spacing:.01em}
h1{font-weight:700;letter-spacing:-.04em;font-size:clamp(36px,5.2vw,64px);line-height:1.02;margin:0 0 18px;text-wrap:balance}
.ingress{font-size:18px;line-height:1.55;color:var(--svag);margin:0;max-width:620px;text-wrap:pretty}
.ingress b{color:var(--text);font-weight:600}
.sok-stor{margin:28px 0 0;width:100%;max-width:560px;height:56px;padding:0 6px 0 20px;border-color:var(--text);border-width:1.5px}
.sok-stor svg{width:18px;height:18px}
.sok-stor input{font-size:16px}
.sok-stor button{font:600 14px 'Be Vietnam Pro',sans-serif;background:var(--text);color:#fff;border:0;border-radius:999px;height:42px;padding:0 22px;cursor:pointer;flex:none}
.genvag{font-size:14px;color:var(--svag);margin:14px 0 0}
.hero-karta{margin:0;justify-self:center;width:100%;max-width:330px}
.hero-karta figcaption{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--svag);margin-top:10px}
.skala{display:flex}
.skala i{width:18px;height:8px}
.skala .k-t1{background:var(--t1)}.skala .k-t2{background:var(--t2)}.skala .k-t3{background:var(--t3)}.skala .k-t4{background:var(--t4)}.skala .k-t5{background:var(--t5)}
.tre-tal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--linje)}
.tre-tal div{padding:28px 0;display:flex;flex-direction:column}
.tre-tal div+div{padding-left:32px;border-left:1px solid var(--linje)}
.tre-tal b{font-size:clamp(28px,3.4vw,44px);font-weight:400;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.tre-tal span{font-size:14px;color:var(--svag)}

.band{background:var(--papper);border-bottom:1px solid var(--linje)}
.topp{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:end;padding-top:36px;padding-bottom:44px}
.topp-enkel{padding-top:36px;padding-bottom:28px}
.topp-enkel .ingress{margin-bottom:4px}
.smula{font-size:13px;color:var(--svag);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.smula a{color:var(--svag);text-decoration:none}
.smula a:hover{color:var(--text);text-decoration:underline}
.smula .sep{opacity:.45}
.smula [aria-current]{color:var(--text)}

.flikar{display:flex;gap:28px;border-bottom:1px solid var(--linje);font-size:14px;font-weight:500;overflow-x:auto;scrollbar-width:none}
.flikar a{padding:14px 0;color:var(--svag);text-decoration:none;white-space:nowrap}
.flikar a:hover{color:var(--text)}
.flikar a:first-child{color:var(--text);box-shadow:inset 0 -2px 0 var(--text)}

/* Innehållet */
.innehall{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;padding-top:40px;padding-bottom:80px}
.innehall-en{grid-template-columns:minmax(0,760px)}
.innehall-en section+section{margin-top:44px}
h2{font-weight:700;letter-spacing:-.03em;font-size:26px;line-height:1.2;margin:0 0 6px}
.h2-luft{margin-top:48px}
.mening{color:var(--svag);margin:0 0 18px;font-size:15px}
.tabell{border-top:1px solid var(--linje-stark)}
.rad{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:20px;align-items:center;padding:13px 10px;margin:0 -10px;border-bottom:1px solid var(--linje);font-size:15px;color:var(--text);text-decoration:none;border-radius:0;transition:background .12s}
.rad:hover{background:var(--papper)}
.r-namn{font-weight:600;min-width:0;overflow-wrap:anywhere}
.r-namn small{display:block;font-weight:400;color:var(--svag);font-size:13px}
.r-ar,.r-andel,.r-tal,.r-pris{font-variant-numeric:tabular-nums;text-align:right}
.r-ar,.r-andel{color:var(--svag);font-size:14px}
.rad-lan{grid-template-columns:minmax(0,1fr) auto 56px}
.r-tal{font-weight:500}
.r-pris{font-weight:600;min-width:90px}
/* Kontakt i listan på kommunsidan (BRF-P2-05): att e-post eller telefon finns, inte uppgiften */
.rad:has(.r-kontakt){grid-template-columns:minmax(0,1fr) auto 128px 52px}
.r-kontakt{font-size:13px;color:var(--text);white-space:nowrap}
.r-kontakt-saknas{color:var(--svag)}
.tagg{background:var(--tagg);color:var(--pa-tagg);font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;white-space:nowrap;text-decoration:none}
.tagg-annan-forvaltare-eller-c-o,.tagg-utan-c-o{background:var(--papper)}
.tagg-plats{background:var(--yta);border:1px solid var(--linje)}
.fler{margin-top:18px;font-size:14px;font-weight:600}
.fler a{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.sidor{display:flex;gap:6px;flex-wrap:wrap;margin-top:24px}
.sidor a{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--linje);border-radius:8px;text-decoration:none;font-size:14px;font-variant-numeric:tabular-nums}
.sidor a[aria-current]{background:var(--text);color:#fff;border-color:var(--text)}
.tomt{padding:28px 0;color:var(--svag)}

.sida{display:flex;flex-direction:column;gap:36px}
.sida h3,.staplar-del h3{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;color:var(--svag)}
.staplar{list-style:none;margin:0;padding:0}
.staplar li{display:grid;grid-template-columns:118px minmax(0,1fr) 74px;gap:12px;align-items:center;font-size:14px;padding:5px 0}
.s-namn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-bar{width:100%;height:8px}
.s-bar .spar{fill:var(--spar)}
.s-bar .fyll{fill:var(--stapel)}
.s-tal{text-align:right;font-variant-numeric:tabular-nums}
.s-tal small{color:var(--svag);margin-left:6px;font-size:12px}
.kalla{font-size:12px;color:var(--svag);margin:10px 0 0}
.lista-liten a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--linje);text-decoration:none;color:var(--text);font-size:14px}
.lista-liten a span{color:var(--svag);font-variant-numeric:tabular-nums}
.lista-liten a:hover{text-decoration:underline}

/* Kartor */
.karta{width:100%;height:auto}
.karta path{fill:var(--karta);stroke:var(--karta-kant);stroke-width:.35;stroke-linejoin:round}
.karta .k-mark{fill:var(--karta-mark)}
.karta .k-t1{fill:var(--t1)}.karta .k-t2{fill:var(--t2)}.karta .k-t3{fill:var(--t3)}.karta .k-t4{fill:var(--t4)}.karta .k-t5{fill:var(--t5)}
.karta-land path{stroke-width:.6}
.karta .k-punkt{fill:var(--text);stroke:#fff;stroke-width:.6}
.karta .k-punkt-ring{fill:none;stroke:var(--text);stroke-width:.5;opacity:.5}
.sida-karta{margin:0;background:var(--papper);border-radius:12px;padding:20px}
.sida-karta svg{max-height:340px;margin:0 auto}
.sida-karta figcaption{font-size:12px;color:var(--svag);margin-top:12px}

/* A–Ö */
.bokstaver{display:flex;flex-wrap:wrap;gap:4px;margin-top:24px}
.bokstaver a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--linje);border-radius:8px;text-decoration:none;font-weight:600;font-size:14px}
.bokstaver a:hover{background:var(--papper)}
.az{columns:4 220px;column-gap:40px;padding-top:20px;padding-bottom:80px}
.az section{break-inside:avoid;margin-bottom:28px}
.az h2{font-size:20px;border-bottom:1px solid var(--linje-stark);padding-bottom:6px;margin-bottom:4px}
.az a{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--linje);text-decoration:none;color:var(--text);font-size:15px}
.az a span{color:var(--svag);font-variant-numeric:tabular-nums}
.az a:hover{text-decoration:underline}

/* Föreningen */
.forening{padding-top:36px;padding-bottom:80px}
.f-huvud h1{font-size:clamp(30px,4vw,48px);margin-bottom:12px}
.taggar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.f-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px}
.tal{display:flex;gap:56px;margin:0 0 28px;flex-wrap:wrap}
.tal b{display:block;font-size:46px;font-weight:400;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.tal span{font-size:14px;border-bottom:1px dotted var(--svag)}
.fakta{display:grid;grid-template-columns:200px minmax(0,1fr);border-top:1px solid var(--linje-stark);font-size:15px;margin:0}
.fakta dt,.fakta dd{padding:12px 0;border-bottom:1px solid var(--linje);margin:0}
.fakta dt{color:var(--svag)}
.fakta dd{font-variant-numeric:tabular-nums}
.saknas{font-size:13px;color:var(--svag);margin:14px 0 0}
.kop-rad-stor{margin-top:36px;padding:24px;background:var(--papper);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.kop-rad-stor p{margin:0;font-weight:500;max-width:360px}

/* Sidfot */
.fot{background:var(--text);color:#fff;padding:56px 0 32px;margin-top:0}
.fot a{color:#fff;text-decoration:none;display:block;font-size:14px;padding:3px 0;opacity:.85}
.fot a:hover{opacity:1;text-decoration:underline}
.fot .ord{color:#fff}
.fot .ord span{color:#ffaaa3}
.fot-grid{display:grid;grid-template-columns:1.3fr 1.6fr .8fr .8fr;gap:40px}
.fot-text{font-size:14px;opacity:.8;max-width:300px;margin:10px 0 0}
.fot-text a{display:inline;padding:0;text-decoration:underline}
.fot-rubrik{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin:0 0 10px}
.fot-lan{columns:2;column-gap:20px}
.fot-under{font-size:12px;opacity:.65;margin:40px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.15)}

@media(max-width:580px){:root{--sid:16px}}
@media(max-width:980px){
 nav.meny,.huvud-in>.sok{display:none}
 .huvud-in{justify-content:space-between}
 .mobilmeny{display:block}
 .mobilmeny summary{list-style:none;width:44px;height:44px;display:grid;place-content:center;gap:6px;cursor:pointer}
 .mobilmeny summary::-webkit-details-marker{display:none}
 .mobilmeny summary span{display:block;width:20px;height:2px;background:var(--text);transition:transform .2s}
 .mobilmeny[open] summary span:first-child{transform:translateY(4px) rotate(45deg)}
 .mobilmeny[open] summary span:last-child{transform:translateY(-4px) rotate(-45deg)}
 .mobil-in{position:absolute;left:0;right:0;top:84px;background:var(--yta);border-bottom:1px solid var(--linje);padding:12px var(--sid) 20px}
 .mobil-in>a{display:block;padding:12px 0;border-bottom:1px solid var(--linje);text-decoration:none;font-weight:600;font-size:17px}
 .sok-mobil{display:flex;width:100%;margin:4px 0 8px;height:46px}
 .hero-in,.topp,.innehall,.f-grid{grid-template-columns:minmax(0,1fr);gap:36px}
 .hero-in{padding-top:36px}
 .hero-karta{max-width:170px;justify-self:start}
 .tre-tal{grid-template-columns:minmax(0,1fr)}
 .tre-tal div{padding:18px 0}
 .tre-tal div+div{padding-left:0;border-left:0;border-top:1px solid var(--linje)}
 .rad{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
 .rad .tagg{grid-row:2;justify-self:start}
 .rad .r-ar{grid-row:1/3;grid-column:2;align-self:center}
 .rad:has(.r-kontakt){grid-template-columns:auto minmax(0,1fr) auto}
 .rad:has(.r-kontakt) .r-namn{grid-column:1/3}
 .rad .r-kontakt{grid-row:2;grid-column:2;justify-self:start;align-self:center}
 .rad:has(.r-kontakt) .r-ar{grid-column:3}
 .fakta{grid-template-columns:minmax(0,1fr)}
 .fakta dt{border-bottom:0;padding-bottom:0;font-size:13px}
 .fakta dd{padding-top:2px}
 .tal{gap:32px}
 .fot-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 .sok-stor button{padding:0 16px}
 .staplar li{grid-template-columns:110px minmax(0,1fr) 74px}
 /* Telefonen utan onödiga radbrytningar (LISTOR-P2-50) */
 h1,.f-huvud h1{font-size:clamp(26px,7.4vw,36px);letter-spacing:-.035em;line-height:1.08}
 .forening .smula>[aria-current],.forening .smula>.sep:nth-last-child(2){display:none}
 .flikar{margin:0 calc(-1*var(--sid));padding:0 var(--sid);gap:24px;scroll-padding:0 var(--sid);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
 .flikar a:last-child{padding-right:var(--sid)}
 .rad-lan{grid-template-columns:minmax(0,1fr) auto minmax(44px,auto)}
 .rad-lan .r-andel{grid-row:auto;grid-column:auto}
 .hero-karta figcaption{width:max-content;max-width:calc(100vw - 2*var(--sid))}
 .staplar li{grid-template-columns:96px minmax(0,1fr) auto}
 .s-tal{white-space:nowrap}
}
/* BRF-P2-13: mobiltoppen (72 px, loggan 50 px) först under 580 px som på siffralabs.se; efter 980-blocket så att den vinner. */
@media(max-width:580px){
 .huvud-in{height:72px}
 header.siffra-topp .brand-logga{width:50px;height:50px}
 .mobil-in{top:72px}
}
/* Infografiken (LISTOR-P2-48): registreringsår per årtionde och förvaltarnas andel, platsen mot hela landet.
   Rörelsen följer animation-skillen: staplar växer underifrån först, talen sist, expo-kurvan, inget studs. Utan JS
   eller med prefers-reduced-motion står allt färdigt. */
:root{--kurva-expo:cubic-bezier(.19,1,.22,1);--f-hsb:#061a57;--f-rb:#c9434d;--f-sbc:#f47f83;--f-annan:#ffd0cc;--f-utan:#d9d4c6}
.siffror{padding:40px 0 8px}
.siffror h2{margin-bottom:20px}
.siffror-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.graf{margin:0;background:var(--papper);border-radius:12px;padding:24px 24px 18px;display:flex;flex-direction:column}
.graf figcaption{margin-bottom:20px}
.graf-rubrik{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0 0 4px;text-wrap:balance}
.graf-mening{font-size:14px;color:var(--svag);margin:0;text-wrap:pretty}
.graf .kalla{margin-top:auto;padding-top:12px}
.dold{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ar-staplar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end}
.ar-staplar li{display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0}
.ar-tal{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:6px;white-space:nowrap}
.ar-svg{width:100%;height:150px;overflow:visible}
.ar-fyll{fill:var(--stapel)}
.ar-land{stroke:var(--text);stroke-width:2;vector-effect:non-scaling-stroke}
.ar-namn{font-size:13px;color:var(--svag);padding-top:8px;border-top:1px solid var(--linje-stark);white-space:nowrap}
.graf-nyckel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--svag);margin:14px 0 0}
.graf-nyckel i{display:inline-block;flex:none}
.nyckel-stapel{width:12px;height:12px;border-radius:2px;background:var(--stapel)}
.nyckel-streck{width:16px;height:2px;background:var(--text);margin-left:10px}
.fv-staplar{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.fv-rad{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.fv-plats{font-size:13px;font-weight:600}
.fv-svg{width:100%;height:28px;border-radius:4px;overflow:hidden}
.fv-svg rect{stroke:var(--papper);stroke-width:2;vector-effect:non-scaling-stroke}
.f-hsb{fill:var(--f-hsb);background:var(--f-hsb)}.f-rb{fill:var(--f-rb);background:var(--f-rb)}.f-sbc{fill:var(--f-sbc);background:var(--f-sbc)}
.f-annan{fill:var(--f-annan);background:var(--f-annan)}.f-utan{fill:var(--f-utan);background:var(--f-utan)}
.fv-tabell{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.fv-tabell th,.fv-tabell td{padding:7px 0;border-bottom:1px solid var(--linje);text-align:right;font-weight:400}
.fv-tabell thead th{font-size:12px;color:var(--svag);border-bottom-color:var(--linje-stark);padding-top:0}
.fv-tabell th:first-child{text-align:left}
.fv-tabell tbody th{font-weight:500;white-space:nowrap}
.fv-tabell tbody th i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:10px;vertical-align:-1px}
.fv-tabell td{padding-left:16px;white-space:nowrap}
.fv-tabell td small{color:var(--svag);font-size:12px;margin-left:8px}
.fv-tabell tr:last-child>*{border-bottom:0}

/* Rörelsen: brf.js sätter .js-rorelse på <html> innan sidan ritas och .syns när grafen kommer in. */
.js-rorelse [data-rorelse] .ar-fyll{transform-box:fill-box;transform-origin:50% 100%;transition:transform .9s var(--kurva-expo)}
.js-rorelse [data-rorelse] .ar-land{transition:opacity .4s var(--kurva-expo) .5s}
.js-rorelse [data-rorelse] .ar-tal{transition:opacity .4s var(--kurva-expo),transform .4s var(--kurva-expo)}
.js-rorelse [data-rorelse] .fv-svg{transition:clip-path 1s var(--kurva-expo)}
.js-rorelse [data-rorelse] .fv-rad+.fv-rad .fv-svg{transition-delay:.12s}
.js-rorelse [data-rorelse]:not(.syns) .ar-fyll{transform:scaleY(0)}
.js-rorelse [data-rorelse]:not(.syns) .ar-land{opacity:0}
.js-rorelse [data-rorelse]:not(.syns) .ar-tal{opacity:0;transform:translateY(6px)}
.js-rorelse [data-rorelse]:not(.syns) .fv-svg{clip-path:inset(0 100% 0 0)}
.ar-staplar li:nth-child(2) .ar-fyll{transition-delay:50ms}.ar-staplar li:nth-child(3) .ar-fyll{transition-delay:100ms}
.ar-staplar li:nth-child(4) .ar-fyll{transition-delay:150ms}.ar-staplar li:nth-child(5) .ar-fyll{transition-delay:200ms}
.ar-staplar li:nth-child(6) .ar-fyll{transition-delay:250ms}
.ar-staplar li:nth-child(1) .ar-tal{transition-delay:.45s}.ar-staplar li:nth-child(2) .ar-tal{transition-delay:.5s}
.ar-staplar li:nth-child(3) .ar-tal{transition-delay:.55s}.ar-staplar li:nth-child(4) .ar-tal{transition-delay:.6s}
.ar-staplar li:nth-child(5) .ar-tal{transition-delay:.65s}.ar-staplar li:nth-child(6) .ar-tal{transition-delay:.7s}
/* Raderna i tabellerna: bakgrunden glider in under pekaren i stället för att blinka. */
.rad,.lista-liten a,.az a{transition:background-color .12s cubic-bezier(.4,0,.2,1)}

@media(max-width:980px){
 .siffror{padding-top:32px}
 .siffror-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .graf{padding:20px 16px 14px}
 .ar-staplar{gap:6px}
 .ar-svg{height:120px}
 .ar-tal{font-size:13px}
 .ar-namn{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* LISTOR-P2-49: illustrationer, kartan och mikrorörelserna. Förebilder i docs/brf-sajt/forebilder/illustration/:
   Linear Method (tunna linjer, streckat och skraffering), Notion (tuschlinjer), OWID (kartan pekas på och svarar). */
:root{--tryck:#ece8dc}
/* Illustrationerna: linjer i textens färg, det som saknas i registret streckat, en korallfärgad detalj. */
.illu{color:var(--text);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.illu .i-streck{stroke-dasharray:3 3}
.illu .i-korall{fill:var(--karta-mark);stroke:none}
.illu .i-skraff{stroke:none}
.illu .i-fyll,.illu circle.i-lupp{fill:var(--yta)}
.h2-illu{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.h2-illu h2{margin-bottom:12px}
.h2-illu .illu{width:120px;height:auto;flex:none}
.saknas{display:flex;align-items:center;gap:16px}
.saknas .illu{width:84px;height:auto;flex:none}
.saknas p{margin:0}
.tomt{display:flex;align-items:center;gap:20px}
.tomt .illu{width:132px;height:auto;flex:none}
.tomt p{margin:0;max-width:44ch}
/* Bilden avtäcks från vänster när den kommer in; det streckade och skrafferingen sist, korallen glider ut sist av allt. */
.js-rorelse .illu{transition:clip-path 1s var(--kurva-expo)}
.js-rorelse .illu .i-streck,.js-rorelse .illu .i-skraff{transition:opacity .4s var(--kurva-expo) .5s}
.js-rorelse .illu .i-korall{transform-box:fill-box;transform-origin:0 50%;transition:transform .5s var(--kurva-expo) .7s}
.js-rorelse .illu:not(.syns){clip-path:inset(0 100% 0 0)}
.js-rorelse .illu:not(.syns) .i-streck,.js-rorelse .illu:not(.syns) .i-skraff{opacity:0}
.js-rorelse .illu:not(.syns) .i-korall{transform:scaleX(0)}

/* Kartan: varje kommun är en länk. Kanten och rutan ritas av brf.js. */
.hero-karta,.sida-karta{position:relative}
.karta a{cursor:pointer;outline:none}
.karta a path{transition:fill .12s cubic-bezier(.4,0,.2,1)}
.karta a:active path{fill:var(--text)}
.karta .k-hov{fill:none;stroke:var(--text);stroke-width:1.6;vector-effect:non-scaling-stroke;pointer-events:none;opacity:0;transition:opacity .12s}
.karta .k-hov.pa{opacity:1}
.k-tips{position:absolute;left:0;top:0;z-index:3;pointer-events:none;background:var(--text);color:#fff;font:600 12px/1.2 'Be Vietnam Pro',sans-serif;padding:6px 9px;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .12s}
.k-tips.pa{opacity:1}
/* Sveriges karta sveper upp från Skåne när sidan öppnas; i länets karta fylls de markerade kommunerna och punkten ringas in. */
@keyframes k-svep{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.js-rorelse .karta-land{animation:k-svep 1.3s var(--kurva-expo) .05s both}
.js-rorelse .sida-karta[data-rorelse] .k-mark{transition:fill .6s var(--kurva-expo) .15s}
.js-rorelse .sida-karta[data-rorelse]:not(.syns) .k-mark{fill:var(--karta)}
.js-rorelse .sida-karta[data-rorelse] .k-punkt-ring{transform-box:fill-box;transform-origin:50% 50%;transition:transform .9s var(--kurva-expo) .45s,opacity .9s var(--kurva-expo) .45s}
.js-rorelse .sida-karta[data-rorelse]:not(.syns) .k-punkt-ring{transform:scale(.2);opacity:0}

/* Tryck och länkar: raden mörknar under fingret, länkstrecket dras från vänster. */
.rad:active,.lista-liten a:active,.az a:active,.kol a:active,.bokstaver a:active{background:var(--tryck)}
.smula a,.fot a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--kurva-expo),opacity .15s}
.smula a:hover,.fot a:hover{text-decoration:none;background-size:100% 1px}
@media(max-width:980px){
 .h2-illu .illu{width:96px}
 .tomt .illu{width:96px}
 .saknas .illu{width:72px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Köpet och gränsen (LISTOR-P2-59). Den låsta delen och gränsen är tonade ytor, inga kantstreck. */
.knapp[disabled]{opacity:.45;cursor:not-allowed}
.knapp[hidden]{display:none}
.knapp-ljus{background:var(--yta);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.knapp-ljus:hover{background:var(--papper)}
.last{margin-top:0;padding:20px 24px 24px;background:var(--papper);border-radius:0 0 12px 12px;display:grid;gap:14px;justify-items:start}
.last-rader{display:grid;gap:10px;width:100%}
.last-rader i{display:block;height:10px;border-radius:4px;background:var(--karta);width:62%}
.last-rader i:nth-child(2){width:48%}.last-rader i:nth-child(3){width:56%}
.last-text{margin:0;font-size:15px;color:var(--svag);max-width:520px}
.last-text b{color:var(--text);font-weight:600}
.grans{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.grans-del{padding:22px 24px;border-radius:12px;border:1px solid var(--linje)}
.grans-kop{background:var(--papper);border-color:transparent}
.grans h2{font-size:17px;letter-spacing:-.015em;margin:0 0 10px}
.grans ul,.kop-ingar{list-style:none;margin:0 0 18px;padding:0;font-size:14px}
.grans li,.kop-ingar li{padding:6px 0 6px 22px;position:relative}
.grans li::before,.kop-ingar li::before{content:'';position:absolute;left:2px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--stapel)}
.grans-del:not(.grans-kop) li::before{background:var(--karta)}
.kop-val{margin-top:24px;max-width:560px}
.kop-val label,.kop-form label,.kop-form legend{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.kop-val-rad{display:flex;gap:10px}
.kop-val select,.kop-form input[type=email],.kop-form input:not([type]){font:inherit;font-size:16px;color:var(--text);background:var(--yta);border:1.5px solid var(--linje-stark);border-radius:10px;height:48px;padding:0 14px;width:100%;min-width:0}
.kop-val select{flex:1}
.kop-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:64px;padding-top:12px;padding-bottom:80px;align-items:start}
.kop-summa{border-top:2px solid var(--linje-stark);padding-top:16px}
.kop-belopp{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0 0 20px;font-size:14px;max-width:360px;font-variant-numeric:tabular-nums}
.kop-belopp dt,.kop-belopp dd{margin:0;padding:6px 0;border-bottom:1px solid var(--linje)}
.kop-belopp dt{color:var(--svag)}
.kop-belopp dd{text-align:right}
.kop-trappa{margin:0 0 24px;max-width:360px}
.kop-belopp dt:nth-last-of-type(1),.kop-belopp dd:last-child{font-weight:600;color:var(--text);border-bottom:0}
.kop-h{font-size:17px;letter-spacing:-.015em;margin:8px 0 6px}
.kop-form{background:var(--papper);border-radius:12px;padding:28px}
.kop-form h2{font-size:22px;margin:0 0 18px}
.kop-form input{margin-bottom:16px}
.kop-format{border:0;padding:0;margin:0 0 16px;display:flex;gap:20px;flex-wrap:wrap}
.kop-format legend{width:100%;padding:0}
.kop-format label,.kop-ja{display:flex;align-items:center;gap:8px;font-weight:400!important;font-size:15px!important;margin:0}
.kop-format input,.kop-ja input{margin:0;width:18px;height:18px;accent-color:var(--text)}
.kop-ja{margin:0 0 20px!important}
.kop-satt{border:0;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kop-satt[hidden],.kop-faktura[hidden]{display:none}
.kop-satt legend{grid-column:1/-1;width:100%;padding:0}
.kop-satt label{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;background:var(--yta);border:1.5px solid var(--linje-stark);border-radius:10px;font-weight:600;font-size:15px;cursor:pointer}
.kop-satt label:has(input:checked){border-color:var(--text)}
.kop-satt input{margin:2px 0 0;width:18px;height:18px;flex:none;accent-color:var(--text)}
.kop-satt small{display:block;font-size:13px;font-weight:400;color:var(--svag);margin-top:2px}
.kop-falt-rad{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
.kop-valfri{font-weight:400;color:var(--svag)}
.kop-ar-faktura .kop-betal-not{display:none}
.klar-summa{margin:4px 0 12px;max-width:480px;border-top:2px solid var(--linje-stark)}
.klar-summa[hidden],.klar-mer[hidden],.klar-las[hidden]{display:none}
.klar-summa div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--linje)}
.klar-summa dt{font-size:15px;color:var(--svag);margin:0}
.klar-summa dd{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.klar-mer{margin:0 0 8px}
.klar-mer summary{cursor:pointer;font-size:15px;font-weight:500;padding:8px 0}
.klar-las{align-self:center;font-size:14px;color:var(--svag)}
.kop-knapp{width:100%;justify-content:center;height:52px;font-size:15px}
.kop-status{font-size:14px;color:var(--svag);margin:12px 0 0}
.kop-fel,.kop-status.kop-fel{color:#a3242c;font-size:14px;margin:12px 0 0}
.kop-fel:empty{display:none}
.klar-knappar{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 8px}
.klar .fakta{margin-top:4px}
@media(max-width:980px){
 .grans,.kop-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .kop-form{padding:20px}
 .last{padding:18px 16px 20px}
}
/* Märkena under betalknappen (BRF-P2-02): små vita plattor med samma höjd, Klarna på sin rosa platta. */
.kop-betal{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kop-betal li{display:flex;align-items:center;justify-content:center;width:46px;height:30px;background:#fff;border:1px solid var(--linje);border-radius:6px}
.kop-betal[hidden],.kop-betal li[hidden]{display:none}
.kop-betal img{display:block;max-width:34px;max-height:14px;width:auto;height:auto}
.kop-betal .kop-betal-mastercard img{max-height:18px}
.kop-betal .kop-betal-applepay img{max-width:36px;max-height:22px}
.kop-betal .kop-betal-swish img{max-width:38px;max-height:13px}
.kop-betal .kop-betal-klarna{background:#ffb3c7;border-color:#ffb3c7}
.kop-betal-not{margin-top:8px}

/* BRF-P2-06: husbilderna. Genererade arkitekturfoton som visar stämningen, aldrig på en förenings sida. Platta bilder
   utan ram, skugga, rundning eller bildtext: de fyller ut, de förklarar inget (kort 2565). */
.husbild{margin:0}
.husbild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--papper)}
.husen{padding-top:48px;padding-bottom:8px}
.husen-rad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.husen-rad img{aspect-ratio:4/5}
.husbild-bred{padding-top:32px}
.husbild-bred{padding-bottom:16px}
.husbild-bred img{aspect-ratio:12/5;object-position:50% 38%}
.topp-bild{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center}
.husbild-topp img{aspect-ratio:3/2}
@media(max-width:980px){
 .husen{padding-top:36px}
 .husen-rad{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
 .husen-rad .husbild:first-child{grid-column:1/-1}
 .husen-rad .husbild:first-child img{aspect-ratio:3/2}
 .husen-rad img{aspect-ratio:4/5}
 .husbild-bred{padding-top:24px}
 .husbild-bred img{aspect-ratio:3/2}
 .topp-bild{grid-template-columns:minmax(0,1fr);gap:24px}
}
/* Gratisprovet med kod (BRF-P2-14): en tonad ruta överst i formuläret, ingen kantstapel. */
.kop-kod{background:var(--tagg);color:var(--pa-tagg);border-radius:10px;padding:14px 16px;margin:0 0 18px;font-size:15px}
.kop-kod[hidden]{display:none}
.kop-kod p{margin:0 0 6px}
.kop-kod-av{font:inherit;font-size:13px;color:var(--text);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kop-ar-gratis .kop-betal-not{display:none}