/* Homito – StaySafe-guiderna (innan-det-hander, om-det-redan-hant).
   Bygger på staysafe.css; egna tillägg längst ned. */

@font-face{font-family:'Metropolis';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/metropolis-400.woff2) format('woff2')}
@font-face{font-family:'Metropolis';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/metropolis-500.woff2) format('woff2')}
@font-face{font-family:'Metropolis';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/metropolis-700.woff2) format('woff2')}
.homito-hoppa{position:absolute;left:-9999px;top:0;z-index:500;padding:14px 22px;background:#1F1F1F;color:#FFFFFF;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.homito-hoppa:focus{left:12px;top:12px;opacity:1}
:focus-visible{outline:2px solid #1F1F1F;outline-offset:3px}
img{max-width:100%}

/* === Homito StaySafe v4.dc.html === */
html{scrollbar-gutter:stable;scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;font-family:'Metropolis',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#1F1F1F;text-decoration:none;transition:opacity .25s ease}
a:hover{opacity:.55}
@keyframes menyIn{from{opacity:0;transform:translate(-50%,-18px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.3}}
[data-screen-label="Meny"] nav a svg{transition:transform .3s ease}
[data-screen-label="Meny"] nav a:hover svg{transform:translate(3px,-3px)}
[data-screen-label="Meny"] nav a > span:first-child{transition:color .25s ease}
[data-screen-label="Meny"] nav a:hover > span:first-child{color:#1F1F1F!important}
[data-screen-label="Meny"] nav a span > span + span{transition:color .25s ease}
[data-screen-label="Meny"] nav a:hover span > span + span{color:#3F3F3F!important}
a[href] span > svg{transition:transform .35s cubic-bezier(.22,.8,.26,1)}
a[href]:hover span > svg{transform:translateX(3px)}

/* ===== ADAPTIV – gäller endast under 900px. Desktop är oförändrad. ===== */
@media (max-width:900px){
[data-m~="gutter"]{padding-left:40px!important;padding-right:40px!important}
[data-m~="intro"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="intro-text"]{padding:clamp(120px,15vh,160px) 40px clamp(48px,7vh,72px)!important}
[data-m~="intro-bild"]{min-height:0!important;height:clamp(360px,46vh,520px)!important}
[data-m~="karusell"]{grid-template-columns:minmax(0,1fr)!important;gap:36px!important;padding:clamp(32px,4vh,48px) clamp(24px,3vw,40px)!important}
[data-m~="tvakol"]{gap:40px 48px!important}
[data-m~="split-text"]{padding:72px 44px!important;gap:52px!important}
[data-m~="boenderad"]{gap:28px!important}
[data-m~="fotgrid"]{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)!important;gap:40px 36px!important;padding-left:40px!important;padding-right:40px!important}
[data-m~="fotgrid"]>a:last-child{grid-column:2/4!important}
[data-m~="fotbotten"]{padding-left:40px!important;padding-right:40px!important}
}
/* ===== IPAD 761–1194px – Öppenhet-splitten. Mobil och desktop oförändrade. ===== */
@media (min-width:761px) and (max-width:1194px){
[data-screen-label="Öppenhet"]{min-height:0!important;align-items:stretch!important}
[data-screen-label="Öppenhet"]>div:first-child{min-height:clamp(430px,56vh,580px)!important}
[data-screen-label="Öppenhet"] [data-m~="split-text"]{justify-content:center!important;gap:40px!important;padding:64px 48px!important}
[data-screen-label="Stay safe"]{min-height:0!important;align-items:stretch!important}
[data-screen-label="Stay safe"] [data-m~="ssbild"]{min-height:clamp(430px,56vh,580px)!important}
[data-screen-label="Stay safe"] [data-m~="split-text"]{justify-content:center!important;gap:40px!important;padding:64px 48px!important}
[data-screen-label="Stay safe"] [data-m~="split-text"]>div>span:first-child{display:none!important}
}
@media (max-width:760px){
[data-m~="gutter"]{padding-left:22px!important;padding-right:22px!important}
[data-m~="topbar"]{top:12px!important;width:calc(100% - 24px)!important;padding:6px 6px 6px 12px!important;border-radius:12px!important}
[data-m~="topbar"] [data-hemmark]{width:30px!important;height:30px!important}
[data-m~="topbar-sprak"],[data-m~="topbar-login"]{display:none!important}
[data-m~="topbar-kontakt"]{padding:11px 12px!important;font-size:9px!important;letter-spacing:.1em!important}
[data-m~="hamburgare"]{padding:17px 10px!important}
[data-m~="hamburgare"] svg{width:26px!important}
[data-m~="menypanel"]{top:86px!important;width:calc(100% - 24px)!important;max-height:calc(100vh - 102px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}
[data-m~="menygrid"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="menybild"]{display:none!important}
[data-m~="menyvanster"]{padding:22px 20px 24px!important}
[data-m~="menymobil"]{display:flex!important;border-top:0!important;margin-top:14px!important;padding-top:0!important}
[data-screen-label="Kontakt"]{scroll-margin-top:76px!important;padding-top:64px!important}
[data-m~="intro-text"]{padding:100px 22px 48px!important}
[data-m~="intro-bild"]{height:320px!important}
[data-m~="etikettgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
[data-m~="etikettgrid"]>span:first-child{padding-top:0!important}
[data-m~="ssrad"]{display:none!important}
[data-screen-label="Stay safe"] [data-m~="split-text"]>div>span:first-child{display:none!important}
[data-m~="ssbild"]{position:relative!important}
[data-m~="ssdis"]{display:block!important}
[data-m~="karusell"]{padding:16px 14px 18px!important;gap:14px!important}
[data-m~="gtext"]{gap:14px!important}
[data-m~="gstack"]{min-height:0!important}
[data-m~="gstack"]>div{gap:9px!important}
[data-m~="gstack"] h3{font-size:19px!important;line-height:1.24!important;letter-spacing:.07em!important}
[data-m~="gstack"] p{font-size:14px!important;line-height:1.55!important}
[data-m~="gstack"]>div>span:last-child{display:none!important}
[data-m~="gnav"]{gap:10px 16px!important;padding-top:13px!important}
[data-m~="motorkort"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="ghuvud"]{height:38px!important;padding:0 14px!important}
[data-m~="gvanster"]{padding:12px 14px 10px!important;border-right:0!important;border-bottom:1px solid rgba(31,31,31,.10)!important}
[data-m~="gfalt"]{gap:5px!important;padding-bottom:10px!important}
[data-m~="grad"]{grid-template-columns:22px minmax(0,1fr) auto!important;gap:8px!important;padding:7px 0!important}
[data-m~="grad"]>span:nth-child(2){font-size:10.5px!important;line-height:1.35!important}
[data-m~="grad"]>span:nth-child(3){font-size:10px!important}
[data-m~="gbed"]{flex-direction:row!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:center!important;gap:6px 16px!important;padding:10px 14px 12px!important}
[data-m~="gbed"]>span:first-child{width:100%!important}
[data-m~="gring"]{width:58px!important;height:58px!important}
[data-m~="gring"] svg:last-child{width:20px!important;height:20px!important}
[data-m~="gdom"]{align-items:flex-start!important;text-align:left!important;gap:4px!important}
[data-m~="tvakol"]{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}
[data-m~="split"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="split"] [data-anim="fade"]{min-height:300px!important}
[data-m~="split-text"]{padding:52px 22px 58px!important;gap:38px!important}
[data-m~="boenderad"]{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:26px 2px 30px!important}
/* Sidfot – mobil: grupperade block med diskreta etiketter, luft i stället för linjer */
[data-m~="fotgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:58px 22px 0!important}
[data-m~="fotgrid"]>div:first-child{gap:34px!important;margin:0 -22px!important;padding:0 22px 34px!important;border-bottom:1px solid rgba(255,255,255,.16)!important}
[data-m~="fotgrid"]>div:first-child svg{width:104px!important}
[data-m~="fotgrid"]>div:first-child p{font-size:24px!important;line-height:1.26!important;letter-spacing:-.012em!important;color:#FFFFFF!important;max-width:18ch!important}
[data-m~="fotgrid"]>nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px 16px!important;padding:44px 0 0!important}
[data-m~="fotgrid"]>nav::before{content:attr(data-etikett);grid-column:1/3;margin-bottom:12px;font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42)}
[data-m~="fotgrid"]>nav>a{font-size:16px!important;letter-spacing:.09em!important;line-height:1.15!important}
[data-m~="fotgrid"]>div:nth-child(3){gap:10px!important;margin:0!important;padding:44px 0 0!important;border:0!important;background:none!important;border-radius:0!important}
[data-m~="fotgrid"]>div:nth-child(3)::before{content:attr(data-etikett);margin-bottom:12px;font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42)}
[data-m~="fotgrid"]>div:nth-child(3)>a{font-size:17px!important;letter-spacing:-.005em!important;text-decoration:none!important}
[data-m~="fotgrid"]>div:nth-child(3)>span{font-size:9.5px!important;letter-spacing:.24em!important;text-transform:uppercase!important;color:rgba(255,255,255,.45)!important}
[data-m~="fotgrid"]>a:last-child{grid-column:auto!important;justify-self:start!important;margin:26px 0 46px!important;padding:6px 0!important;border:0!important;border-radius:0!important;gap:9px!important;font-size:11px!important;letter-spacing:.2em!important;color:#FFFFFF!important}
[data-m~="fotbotten"]{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:10px 18px!important;padding:20px 22px 30px!important}
[data-m~="fotbotten"]>div{flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:10px 18px!important}
[data-m~="fotbotten"] span,[data-m~="fotbotten"] a{font-size:9px!important;letter-spacing:.18em!important;color:rgba(255,255,255,.4)!important}
}

@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@keyframes cueLinje{0%{transform:scaleY(0);transform-origin:50% 0}44%{transform:scaleY(1);transform-origin:50% 0}56%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}
@keyframes cuePil{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
[data-rullacue]{opacity:.82;transition:opacity .5s ease,transform .5s ease}
[data-rullacue]:hover{opacity:1}
html[data-cuenara="1"] [data-rullacue]{opacity:1}
html[data-rullad="1"] [data-rullacue]{opacity:0;transform:translate(-50%,12px);pointer-events:none}
[data-uppspel]{opacity:1!important;transition:color .3s ease}
[data-uppspel]:hover{color:#1F1F1F}
[data-hemmark]{opacity:.7;transition:opacity .3s ease,transform .45s cubic-bezier(.22,.8,.26,1)}
[data-hemmark]:hover{opacity:1;transform:translate(-50%,-50%) scale(1.1)}

/* Hovertillstånd från komponenternas style-hover. Endast för mus/pekdon –
   får aldrig innehålla layoutregler, de hör hemma på toppnivå. */
@media (hover: hover) and (pointer: fine){
.scp0:hover{text-decoration:none!important;opacity:1!important}
.scp1:hover{background:var(--hbg)!important;color:var(--hfg)!important;border-color:transparent!important;text-decoration:none!important;opacity:1!important}
/* Topbarens ljus/mörk-logik sätter en egen färg inline på texten inuti
   knappen. Utan denna rad ligger den kvar under hover. */
.scp1:hover span{color:var(--hfg)!important}
.scp2:hover{color:#fff!important;text-decoration:none!important}
.scp3:hover{color:#1F1F1F!important;opacity:1!important;text-decoration:none!important}
.scp4:hover{color:rgba(255,255,255,.65)!important}
.scp5:hover{color:#fff!important;opacity:1!important;text-decoration:none!important}
.scp6:hover{background:#1F1F1F!important;color:#fff!important;border-color:#1F1F1F!important;text-decoration:none!important;opacity:1!important}
}

/* Hero-bildens inzoomning. Ligger i CSS för att undvika den framtvingade
   layoutberäkning som JS-varianten orsakade under sidladdningen.
   @media (prefers-reduced-motion: reduce) högre upp stänger av den. */
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
img[data-hero-zoom]{animation:heroZoom 3s cubic-bezier(.19,.6,.22,1) both}

/* Namn och e-post under varandra på surfplatta – två kolumner blir under
   1025px bara drygt 110px breda var. */
@media (max-width:1024px){
[data-m~="formgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
}

/* ===== Kontrast. Varje varde nedan matte inte 4.5:1 mot sin faktiska
   bakgrund; de nya ligger strax over. Uppmatt i webblasaren. ===== */
/* Språkväxlaren i menypanelen – den inaktiva länkens 0.45 gav 2.81:1 mot vitt. */
[data-m~="menypanel"] a[style*="rgba(31, 31, 31, 0.45)"],
[data-m~="menymobil"] a[style*="rgba(31, 31, 31, 0.45)"]{color:rgba(31,31,31,.66)!important}
/* Jämförelsetabellen – #767676 gav 4.15:1 mot den ljusgrå bakgrunden. */
[data-m~="jtabell"] span[style*="rgb(118, 118, 118)"]{color:#6E6E6E!important}
/* Samtyckesraden i formuläret – 0.6 gav 4.25:1 mot samma bakgrund. */
form p[style*="rgba(31, 31, 31, 0.6)"]{color:rgba(31,31,31,.72)!important}

/* Rullningsvisarens etikett står direkt på fotot utan skiljande skärm. Samma
   skugga som hjältens rubriker använder, och något högre opacitet. */
[data-rullacue] > span:first-child{opacity:.78!important;text-shadow:0 2px 18px rgba(0,0,0,.55)}

/* Liggande mobil: panelen är högre än vyn, så nederkanten (där "Skapa konto"
   ligger) hamnade utanför skärmen. Brytpunkten måste gälla höjd, inte bredd –
   en liggande telefon är bred. */
@media (max-height:560px){
[data-m~="menypanel"]{top:72px!important;max-height:calc(100vh - 88px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
[data-m~="menybild"]{display:none!important}
[data-m~="menyvanster"]{padding:20px 24px 22px!important}
[data-m~="menygrid"]{grid-template-columns:minmax(0,1fr)!important}
}

/* 320 px: "rekommendation" är ett enda ord bredare än textspalten, vilket gav
   några pixlars sidscroll. Rubriken krymper något och långa ord får brytas. */
@media (max-width:360px){
[data-m~="etikettgrid"] h2,[data-m~="gutter"] h2{font-size:25px!important;line-height:1.16!important}
h1,h2,h3{overflow-wrap:break-word;word-break:normal}
}

/* Menyns nedskalning gäller endast desktop – i mobilmenyn står storlekarna
   kvar som de var. Brytpunkten är samma 760px som resten av mobilmenyn. */
@media (min-width:761px){
/* De fem posterna: rubriken ned två steg (21 -> 18 px i topp, 16 -> 14 px i botten). */
[data-m~="menyvanster"] nav a > span:nth-child(2) > span:first-child{font-size:clamp(14px,1vw,18px)!important}
/* Fotraden: e-post och LinkedIn ned ett steg (10 -> 9 px, 9.5 -> 8.5 px). */
[data-m~="menyvanster"] > div:last-child > span:first-child{font-size:9px!important}
[data-m~="menyvanster"] > div:last-child > a{font-size:8.5px!important}
}

/* ===== Sidfoten i helt format =====
   Mobilsidfoten har redan kolumnetiketter, stor logotyp och egen rytm; desktop
   fick aldrig samma omsorg. Här speglas den behandlingen ovanför 900px, som
   är där fyrspalten börjar. Mobil- och mellanläget rörs inte. */
@media (min-width:901px){
/* Kolumnetiketter – samma vokabulär som varje sektion på sajten. */
[data-m~="fotgrid"]>nav[data-etikett]::before,
[data-m~="fotgrid"]>div[data-etikett]::before{content:attr(data-etikett);display:block;margin-bottom:5px;font-size:9.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.42)}
/* Mer luft, och spalterna får andas i stället för att trängas ihop. */
[data-m~="fotgrid"]{grid-template-columns:minmax(280px,1.6fr) 1fr 1fr auto!important;gap:clamp(48px,5vw,88px)!important;padding:78px 46px 62px!important}
/* Varumärkesspalten: större logotyp, tystare och bredare löptext. */
[data-m~="fotgrid"]>div:first-child{gap:27px!important}
[data-m~="fotgrid"]>div:first-child svg{width:104px!important}
[data-m~="fotgrid"]>div:first-child p{max-width:34ch!important;color:rgba(255,255,255,.62)!important}
/* Navigeringen: understrykning som växer fram, i stället för att texten tonas ned. */
[data-m~="fotgrid"]>nav{gap:14px!important}
[data-m~="fotgrid"]>nav>a{position:relative;padding-bottom:3px}
[data-m~="fotgrid"]>nav>a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.22,.8,.26,1)}
/* Kontaktspalten: e-posten är spaltens fokus, orten hålls tyst. */
[data-m~="fotgrid"]>div:nth-child(3){gap:12px!important}
[data-m~="fotgrid"]>div:nth-child(3)>span:first-child{font-family:'Metropolis',sans-serif;font-size:17px!important;letter-spacing:.01em}
[data-m~="fotgrid"]>div:nth-child(3)>span:last-child{font-size:9.5px!important;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)!important}
/* LinkedIn: en avgränsad knapp i stället för en ensam länk i fjärde spalten. */
[data-m~="fotgrid"]>a:last-child{margin-top:27px!important;padding:11px 19px!important;border:1px solid rgba(255,255,255,.28);border-radius:999px;transition:border-color .4s,background .4s}
/* Bottenraden: juridiken till vänster, krediten längst ut till höger. */
[data-m~="fotbotten"]{padding:20px 46px 28px!important}
[data-m~="fotbotten"]>div{flex:1 1 auto;gap:34px!important}
[data-m~="fotbotten"]>div>span:last-child{margin-left:auto}
[data-m~="fotbotten"] span,[data-m~="fotbotten"] a{letter-spacing:.22em!important}
}
@media (min-width:901px) and (hover:hover) and (pointer:fine){
[data-m~="fotgrid"]>nav>a:hover{color:#FFFFFF!important}
[data-m~="fotgrid"]>nav>a:hover::after{transform:scaleX(1)}
[data-m~="fotgrid"]>a:last-child:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);color:#FFFFFF!important}
}

/* Menyraden i helt format: något slankare (53 -> ~46 px). Knappen och
   hamburgaren bestämmer höjden; mobilraden rörs inte. */
@media (min-width:761px){
[data-m~="topbar"] [data-m~="topbar-kontakt"]{padding:9px 15px!important}
[data-m~="topbar"] [data-m~="hamburgare"]{padding:11px 10px!important}
[data-m~="topbar"] [data-m~="topbar-login"]{padding-top:4px!important;padding-bottom:4px!important}
[data-m~="topbar"] [data-m~="topbar-sprak"]{padding-top:10px!important;padding-bottom:10px!important}
}


/* ===== StaySafe-guiderna: egna mönster =====
   Samma layout som sajtens undersidor: fotohjälte med text över, etikett i vänster
   spalt och rubrik/brödtext i höger (etikettgrid). Punkterna är rader som viks ut
   – numret står i etikettspalten, rubriken linjerar med sektionsrubriken, kärn-
   meningen syns alltid. Flikraden ligger fast under menyraden och följer läsningen. */
@keyframes stigIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Hover – som sajtens knappar. */
@media (hover:hover) and (pointer:fine){
.scpgi:hover{background:#3F3F3F!important;border-color:#3F3F3F!important;opacity:1!important}
.scpgv:hover{background:rgba(255,255,255,.86)!important;border-color:rgba(255,255,255,.86)!important;opacity:1!important}
.scpgl:hover{color:#fff!important;border-color:#fff!important;opacity:1!important}
.scpseg:hover{background:rgba(31,31,31,.06)!important;color:#1F1F1F!important;opacity:1!important}
.scpkort:hover{border-color:#1F1F1F!important;opacity:1!important}
.scpkort:hover svg{transform:translateY(3px)}
[data-m~="flikar"] a:hover{border-color:#1F1F1F!important;color:#1F1F1F!important;opacity:1!important}
[data-veck-knapp]:hover{border-color:#1F1F1F!important;background:rgba(31,31,31,.04)!important}
[data-m~="gpunkt"]:hover [data-veck-knapp]{border-color:#1F1F1F!important}
[data-veck-alla]:hover{border-color:#1F1F1F!important;color:#1F1F1F!important}
[data-tilltoppen]:hover{color:#1F1F1F!important}
.scpkalla:hover{border-color:#1F1F1F!important;opacity:1!important}
[data-m~="gpunkt"]:has([data-veck-huvud]:hover) [data-veck-knapp],[data-m~="gfraga"]:has([data-veck-huvud]:hover) [data-veck-knapp]{border-color:#1F1F1F!important}
}
.scpkort svg{transition:transform .35s cubic-bezier(.22,.8,.26,1)}

/* Utvikbara punkter: plus blir minus. */
[data-punkt][data-oppen="1"] [data-veck-knapp] [data-vert]{transform:rotate(90deg)!important}
[data-punkt][data-oppen="1"] [data-veck-knapp]{border-color:#1F1F1F!important}
[data-veck-knapp] svg{overflow:visible}

/* Flikraden: aktiv flik fylls. Radens vita topputfyllnad (92px) täcker innehållet
   som rullar förbi under menyraden när raden sitter fast. */
[data-m~="flikar"] a[aria-current="true"]{background:#1F1F1F!important;color:#fff!important;border-color:#1F1F1F!important}
[data-m~="flikrad"]{transition:opacity .4s ease,transform .45s cubic-bezier(.22,.8,.26,1)}
[data-m~="flikrad"][data-dold="1"]{opacity:0;transform:translateY(-14px);pointer-events:none}

/* Flikraden på mellanbreda skärmar: "Byt guide" och siffrorna får ge plats
   så att fliktexten aldrig klipps. */
@media (max-width:1180px){
[data-m~="flikar"]{grid-template-columns:minmax(150px,29fr) minmax(0,71fr)!important}
[data-m~="flikar"]>[data-tilltoppen]{display:none!important}
[data-m~="flikar"] a>span:first-child{display:none!important}
[data-m~="flikar"] a{padding:13px 8px!important;letter-spacing:.2em!important}
}
/* Under 1300px är radkroppens spalt för smal för två listspalter. */
@media (max-width:1299px){
[data-m~="punktlista"]{grid-template-columns:minmax(0,1fr)!important}
}
/* Tre-regler-korten staplas när spalten inte rymmer tre i bredd. */
@media (max-width:1199px){
[data-m~="regelgrid"]{grid-template-columns:minmax(0,1fr)!important}
}
/* Punktraderna: under 1100px staplas rubrik och text i en spalt; numret står
   kvar i etikettspalten så att allt fortsatt linjerar med sektionsrubriken. */
@media (max-width:1100px){
[data-m~="gpunkt"]{grid-template-columns:calc(29% - 13.92px) minmax(0,1fr) 36px!important;row-gap:12px!important}
[data-m~="gpunkt"]>span:first-child{grid-column:1;grid-row:1}
[data-m~="gpunkt"]>h3{grid-column:2;grid-row:1}
[data-m~="gpunkt"]>[data-m~="radkropp"]{grid-column:2;grid-row:2}
[data-m~="gpunkt"]>[data-veck-knapp]{grid-column:3;grid-row:1}
}
@media (max-width:900px){
[data-m~="flikrad"]{padding-top:70px!important}
[data-m~="akutgrid"],[data-m~="delval"]{width:100%!important}
}
@media (max-width:760px){
[data-m~="sekthuvud"]{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
[data-m~="sekthuvud"]>[data-veck-alla]{justify-self:start;margin-top:0!important}
[data-m~="ghero"]{height:88vh!important;min-height:520px!important}
[data-m~="ghero"]{height:auto!important;min-height:0!important}
[data-m~="heroband"]{position:relative!important;padding-top:46vh!important;padding-bottom:36px!important}
[data-m~="herotop"]{grid-template-columns:minmax(0,1fr)!important;gap:26px!important}
[data-m~="heroval"]{grid-template-columns:minmax(0,1fr)!important;margin-top:28px!important}
[data-m~="heroval"]>button{padding:18px 20px!important}
[data-m~="herodelad"]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:1fr 1fr!important}
[data-halva="2"]{border-left:0!important;border-top:1px solid rgba(255,255,255,.24)!important}
[data-m~="heroband"]{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;padding-bottom:48px!important}
[data-m~="heroband"] h1{font-size:clamp(28px,7.6vw,38px)!important;line-height:1.14!important}
[data-m~="heroband"] p{font-size:15.5px!important}
[data-m~="flikar"]{grid-template-columns:minmax(0,1fr)!important;gap:10px!important;padding:10px 0 12px!important}
[data-m~="flikar"]>[data-tilltoppen]{display:none!important}
[data-m~="flikar"]>span[data-guidechip]{display:none!important}
[data-m~="flikar"]>div{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
[data-m~="flikar"] a{padding:12px 6px!important;letter-spacing:.14em!important;font-size:9px!important}
[data-m~="flikar"] a>span:first-child{display:none!important}
[data-m~="delval"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="rollval"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[data-m~="gpunkt"]{grid-template-columns:40px minmax(0,1fr) 36px!important;column-gap:12px!important;padding:24px 0 26px!important}
[data-m~="gpunkt"]>span:first-child{padding-top:5px!important}
[data-m~="gpunkt"] h3{font-size:17px!important;line-height:1.28!important}
[data-m~="komgrid"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="kvitto"]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
[data-m~="monstergrid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[data-m~="monstergrid"]>div{min-height:96px!important}
[data-m~="komgrid"]>div{min-height:120px!important;gap:20px!important}
[data-m~="akutgrid"]{grid-template-columns:minmax(0,1fr)!important}
[data-m~="gfraga"]{grid-template-columns:minmax(0,1fr) 36px!important}
}

/* Utvikt text tonas in och stiger några pixlar när raden öppnas – höjden
   animeras av site.js, det här är bara innehållets egen rörelse. */
[data-veck]>div{opacity:0;transform:translateY(10px);transition:opacity .5s ease .06s,transform .6s cubic-bezier(.22,.8,.26,1) .06s}
[data-punkt][data-oppen="1"] [data-veck]>div{opacity:1;transform:none}
/* Öppen rad: numret får ett streck som växer fram i etikettspalten. */
[data-m~="gpunkt"]>span:first-child::after{content:'';display:inline-block;width:0;height:1px;margin-left:12px;vertical-align:2px;background:currentColor;transition:width .55s cubic-bezier(.22,.8,.26,1)}
[data-punkt][data-oppen="1"]>span:first-child::after{width:22px}
@media (max-width:760px){[data-m~="gpunkt"]>span:first-child::after{display:none}}
/* Rullningsstyrt (webbläsare utan stöd hoppar över): hjältetexten glider
   undan när man rullar, och flikradens underkant fylls i takt med läsningen. */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:scroll()){
@keyframes heroDrift{to{transform:translateY(54px);opacity:0}}
@keyframes lasLinje{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-m~="heroband"]{animation:heroDrift linear both;animation-timeline:scroll(root);animation-range:0 72vh}
[data-m~="flikar"]{position:relative}
[data-m~="flikar"]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#1F1F1F;transform-origin:0 50%;animation:lasLinje linear both;animation-timeline:scroll()}
}
}

/* Rollval: hyresvärd (standard) eller hyresgäst. Gömda block visas aldrig. */
[data-roll][hidden]{display:none!important}
/* Del 1 / Del 2 i samma sida. Hjältens två halvor hör till var sin del –
   den del man inte läser tonas ned, så bilden speglar valet. */
[data-del][hidden]{display:none!important}
[data-delval][aria-current="true"]{background:#1F1F1F!important;color:#fff!important}
[data-halva]{transition:opacity 1s cubic-bezier(.22,.8,.26,1)}
html[data-guide-del="2"] [data-halva="1"],html[data-guide-del="1"] [data-halva="2"]{opacity:.6}
/* Valen i hjälten (ljus text på foto): vitt fyllt = valt. Slår de mörka standardreglerna. */
[data-m~="heroband"] [data-rollval][aria-current="true"]{background:#fff!important;color:#1F1F1F!important}
/* Valt kort blir vitt med mörk text – som sajtens växlare, inverterat för fotogrund. */
[data-m~="heroband"] [data-delval][aria-current="true"]{background:#fff!important;border-color:#fff!important;color:#1F1F1F!important}
[data-m~="heroband"] [data-delval][aria-current="true"]>span:first-child{color:rgb(118,118,118)!important}
[data-m~="heroband"] [data-delval][aria-current="true"]>span:nth-child(2){color:#1F1F1F!important}
[data-m~="heroband"] [data-delval][aria-current="true"] [data-vald]>span{background:#1F1F1F!important}
[data-m~="heroband"] [data-delval][aria-current="true"]>span:last-child{color:#3F3F3F!important}
[data-m~="heroband"] [data-delval] [data-vald],[data-m~="heroband"] [data-delval][aria-current="true"] [data-valj]{display:none}
[data-m~="heroband"] [data-delval][aria-current="true"] [data-vald]{display:inline-flex;align-items:center;gap:8px}
[data-m~="heroband"] [data-delval] [data-valj]{display:inline-flex;align-items:center;gap:8px}
@media (hover:hover) and (pointer:fine){
[data-m~="heroband"] [data-rollval]:not([aria-current="true"]):hover{background:rgba(255,255,255,.14)!important;color:#fff!important}
[data-m~="heroband"] [data-delval]:not([aria-current="true"]):hover{border-color:#fff!important;background:rgba(31,31,31,.68)!important}
}
[data-rollval][aria-current="true"]{background:#1F1F1F!important;color:#fff!important}

/* Utskrift: guiden som checklista på papper – ingen meny, ingen sidfot, alla
   punkter utvikta, inga intoningar som kan ha lämnat elementen genomskinliga. */
@media print{
[data-m~="topbar"],[data-screen-label="Meny"],footer,[data-screen-label="Nästa"],[data-m~="flikrad"],[data-m~="delval"],[data-veck-alla],[data-veck-knapp],[data-m~="ghero"] [data-m~="herodelad"],[data-m~="delnav"],[data-m~="ghero"]>div:nth-child(2){display:none!important}
[data-m~="ghero"]{height:auto!important;min-height:0!important;background:#fff!important}
[data-m~="heroband"]{position:static!important;color:#000!important;padding:0!important}
[data-m~="heroband"] *{text-shadow:none!important;animation:none!important}
[data-reveal]{opacity:1!important;transform:none!important}
[data-veck]{height:auto!important}
[data-veck]>div{opacity:1!important;transform:none!important}
[data-m~="gutter"]{padding-left:0!important;padding-right:0!important}
section{background:#fff!important;color:#000!important;break-inside:avoid-page}
p,span,li,h1,h2,h3{color:#000!important}
[data-m~="gpunkt"]{break-inside:avoid}
}