/* =========================================================================
Finansinstitutet.se - designsystem
Institutionell, lugn, förtroendeingivande. Navy + lugn teal, generös luft,
serif-rubriker (auktoritet) + Inter (klarhet).
========================================================================= */
/* -------------------------------------------------------------------------
TYPSNITT (tidigare egna /fonts/fonts.css)
Låg som en andra i och var därmed en extra
renderblockerande round-trip i den kritiska kedjan - dyrt på mobil, där
startsidans LCP är en textnod och alltså väntar på just CSS + typsnitt.
Inflyttad hit så webbläsaren hämtar EN stilmall i stället för två.
url()-sökvägarna är rotrelativa och fungerar oförändrat härifrån.
------------------------------------------------------------------------- */
/* Självhostade typsnitt (Inter + Source Serif 4), latin + latin-ext.
Nedladdade från Google Fonts 2026-09-05, serveras nu förstaparts.
Ingen tredjeparts-överföring, ingen render-blockering. */
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/inter-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/inter-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/inter-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/inter-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/source-serif-4-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/source-serif-4-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/source-serif-4-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/source-serif-4-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/source-serif-4-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/source-serif-4-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Färg */
--ink: #14212e;
--navy: #0f2c47;
--navy-700: #14395c;
--brand: #1a5c8f;
--brand-ink: #0f3f63;
--brand-soft: #e8f1f8;
/* Tealen är mörkad från #0e8a68 till #0d8464: vit text på den gamla tonen gav
4,32:1 där WCAG 1.4.3 kräver 4,5:1 för text under 18,66 px (axe fällde
.btn--accent på /spara/). Nu 4,67:1. Skillnaden är knappt förnimbar för
ögat men gör alla vit-på-teal-ytor godkända, inklusive .ask-knappen och
framtida element - därför ändrad på tokennivå i stället för per komponent. */
--accent: #0d8464;
--accent-ink: #0a6b51;
--accent-soft: #e4f4ee;
--gold: #b98a34;
/* Textton för guld. #b98a34 är en FYLLNADSton: på --gold-soft ger den bara
2,7:1 och duger inte till text. --gold-ink ger 5,47:1 på samma botten. */
--gold-ink: #7d5a1c;
--gold-soft: #f6efdf;
--canvas: #ffffff;
--wash: #f4f7fa;
--wash-2: #eef3f8;
--panel: #ffffff;
--line: #e4e9f0;
--line-strong: #cfd8e3;
--text: #14212e;
--text-soft: #4c5966;
/* Mörkad från #67717c: klarade vit (4,96) och wash (4,62) men bara 4,34 mot
den ljusblå panelbottnen #e8f1f8, där den används flitigt i verktygen och
jämförelsetabellerna. axe fällde den på fyra sidor. Nu 4,74 där, och
bättre överallt annars. */
--dim: #616b76;
--pos: #0e8a68;
--warn: #b0761a;
--warn-soft: #fbf1de;
--danger: #c0392b;
--danger-soft: #fbeae8;
/* Typografi */
--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Form */
--shell: 1180px;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 18px;
--shadow-sm: 0 1px 2px rgba(15, 44, 71, .06), 0 1px 3px rgba(15, 44, 71, .08);
--shadow: 0 6px 22px rgba(15, 44, 71, .09);
--shadow-lg: 0 18px 46px rgba(15, 44, 71, .16);
--header-h: 68px;
}
/* Färgtoner per avdelning (gren). Sätter --t (linje/ikon), --t-ink (text på
ljus botten) och --t-soft (platta). Samma ton i megameny, grenkort och
startsida så att ögat lär sig "gul = skatt, teal = kom igång" en gång. */
.tone-teal { --t: var(--accent); --t-ink: var(--accent-ink); --t-soft: var(--accent-soft); }
.tone-blue { --t: var(--brand); --t-ink: var(--brand-ink); --t-soft: var(--brand-soft); }
.tone-gold { --t: var(--gold); --t-ink: var(--gold-ink); --t-soft: var(--gold-soft); }
.tone-plum { --t: #6d4c9f; --t-ink: #4f367a; --t-soft: #efe9f7; }
.tone-navy { --t: var(--navy); --t-ink: var(--navy); --t-soft: var(--wash-2); }
.ico { display: block; width: 100%; height: 100%; }
/* Reset / bas */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
font-size: 17px;
line-height: 1.65;
color: var(--text);
background: var(--canvas);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.18; letter-spacing: -.01em; margin: 0 0 .5em; font-weight: 600; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.05rem); }
h3 { font-size: 1.28rem; }
p { margin: 0 0 1rem; }
/* Grundregeln är UNDERSTRUKEN, inte odekorerad. Tvärtom-varianten (none som
grund, understrykning tillagd per behållare) läckte gång på gång: hubbar och
statiska sidor använder inte .prose, så varje ny löptext-behållare blev ett
tyst WCAG 1.4.1-brott där länken skildes från texten enbart med färg.
Med understrykning som grund failar det i stället säkert: en ny länk är
korrekt tills någon aktivt tar bort strecket. Sajtens 46 komponentregler
(nav, kort, knappar, footer) sätter redan text-decoration: none explicit och
är därför opåverkade. */
a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 22px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
/* =========================================================================
Header
========================================================================= */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--canvas); }
/* Skuggan sätts via klass från app.js i stället för inline-stil per scroll-event
(undviker forced reflow). transition gör växlingen mjuk. */
.site-header { transition: box-shadow .18s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(15,44,71,.10); }
.utility { background: var(--navy); color: #cdddec; font-size: .82rem; }
.utility__row { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 1rem; }
.utility__promise { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 500; letter-spacing: .01em; }
.utility__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(13,132,100,.28); flex: none; }
.utility__nav { display: flex; gap: 1.25rem; }
.utility__nav a { color: #b9cbdd; text-decoration: none; }
.utility__nav a:hover { color: #fff; }
.masthead { border-bottom: 1px solid var(--line); background: var(--canvas); }
.masthead__row { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--navy); text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; color: var(--navy); }
.brand__mark { width: 30px; height: 30px; color: var(--brand); flex: none; }
.brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.34rem; letter-spacing: -.02em; color: var(--navy); }
.brand__accent { color: inherit; } /* wordmark enfärgad och sober; teal-accenten lever i ikonens basstreck */
.primary { margin-left: auto; }
.primary__list { list-style: none; display: flex; align-items: center; gap: .2rem; margin: 0; padding: 0; }
.primary__item { position: relative; }
.primary__link { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .7rem; border-radius: 8px; color: var(--ink); font-weight: 500; font-size: .97rem; text-decoration: none; white-space: nowrap; }
.primary__link:hover { background: var(--wash); color: var(--brand-ink); text-decoration: none; }
.primary__link.is-active { color: var(--brand-ink); }
.primary__link.is-active::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -1px; height: 2px; background: var(--brand); border-radius: 2px; }
/* Med panelen öppen ligger den blå aktiv-markören i skarven mellan header och
panel och läser som ett löst streck. Panelen möter nu headerns underkant
(top: 100%) och täcker den; markören döljs dessutom explicit, så den inte
kan sticka fram en pixel vid avrundning eller på en annan zoomnivå. */
.has-panel:hover .primary__link.is-active::after,
.has-panel:focus-within .primary__link.is-active::after { opacity: 0; }
.primary__caret { width: 10px; height: 6px; opacity: .55; transition: transform .15s ease; }
.has-panel:hover .primary__caret, .has-panel:focus-within .primary__caret { transform: rotate(180deg); }
/* Mega-panel */
.panel {
position: absolute; top: calc(100% + 6px); left: 0; min-width: 288px;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow-lg); padding: 1rem; opacity: 0; visibility: hidden;
transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
z-index: 60;
}
.has-panel:hover .panel, .has-panel:focus-within .panel { opacity: 1; visibility: visible; transform: translateY(0); }
.panel__tagline { margin: 0 0 .7rem; font-size: .85rem; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: .7rem; }
.panel__list { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: 1px; }
.panel__list a { display: block; padding: .5rem .6rem; border-radius: 7px; color: var(--ink); font-weight: 500; font-size: .94rem; text-decoration: none; }
.panel__list a:hover { background: var(--brand-soft); color: var(--brand-ink); }
.panel__all { display: inline-block; margin-top: .3rem; padding: .35rem .6rem; font-size: .86rem; font-weight: 600; color: var(--accent-ink); }
/* Osynlig brygga över glappet mellan länk och panel så menyn inte fladdrar */
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.panel__tools { list-style: none; margin: .5rem 0 .3rem; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 1px; }
.panel__tools a { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: 7px; color: var(--navy); font-weight: 600; font-size: .9rem; text-decoration: none; }
.panel__tools a:hover { background: var(--wash); text-decoration: none; }
.panel__tools .ico { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
/* Megameny: fullbredds-panel (hela shell-raden), en färgad kolumn per gren +
sidokolumn med översikt och verktyg. Bara grenens topp-spokes visas;
sub-hubbar får en liten siffra (antal guider) i stället för att listas. */
.masthead__row { position: relative; }
.primary__item.has-mega { position: static; }
.panel--mega { left: 0; right: 0; top: 100%; min-width: 0; padding: 0; overflow: hidden; border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); transform: translateY(4px); }
.has-mega:hover .panel--mega, .has-mega:focus-within .panel--mega { transform: translateY(0); }
.mega { display: grid; grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr)) 264px; }
.mega__col { padding: 1.35rem 1.25rem 1.4rem; border-left: 1px solid var(--line); position: relative; }
.mega__col:first-child { border-left: 0; }
.mega__col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--t); }
.mega__head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-family: var(--sans); font-weight: 700; font-size: .84rem; letter-spacing: .02em; color: var(--t-ink); line-height: 1.25; }
.mega__ico { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 9px; background: var(--t-soft); color: var(--t-ink); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__list a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .48rem .55rem; margin: 0 -.55rem; border-radius: 7px; color: var(--ink); font-weight: 500; font-size: .93rem; line-height: 1.3; text-decoration: none; }
.mega__list a:hover { background: var(--t-soft); color: var(--t-ink); text-decoration: none; }
.mega__aside { padding: 1.35rem 1.35rem 1.4rem; background: var(--wash); border-left: 1px solid var(--line); }
.mega__tagline { margin: 0 0 .9rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; color: var(--navy); }
.mega__all { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 600; font-size: .9rem; text-decoration: none; transition: background-color .15s ease; }
.mega__all:hover { background: var(--navy-700); color: #fff; text-decoration: none; }
.mega__all .ico { width: 20px; height: 20px; flex: none; color: #8fd3bd; }
.mega__arrow { width: 16px; height: 16px; margin-left: auto; flex: none; color: #fff; opacity: .8; }
.mega__head--tools { margin-top: 1.2rem; color: var(--navy); }
.mega__head--tools .mega__ico { background: var(--accent-soft); color: var(--accent-ink); }
.mega__tools { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mega__tools a { display: block; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--brand-ink); font-weight: 600; font-size: .88rem; text-decoration: none; }
.mega__tools a:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.search { position: relative; flex: none; width: 226px; }
.search__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dim); }
.search input { width: 100%; padding: .55rem .7rem .55rem 2.1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--wash); font: inherit; font-size: .9rem; color: var(--ink); }
.search input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 40px; padding: 9px 10px; margin-left: auto; background: none; border: 1px solid var(--line-strong); border-radius: 9px; cursor: pointer; }
.burger span { height: 2px; background: var(--navy); border-radius: 2px; transition: .2s; }
/* =========================================================================
Innehållsprimitiver
========================================================================= */
.section { padding: 3.4rem 0; }
.section--wash { background: var(--wash); }
.section--tight { padding: 2.2rem 0; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .6rem; }
.lead { font-size: 1.18rem; line-height: 1.62; color: var(--text-soft); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.crumbs { font-size: .85rem; color: var(--dim); padding: 1rem 0 .2rem; }
/* WCAG 1.4.1: brödsmulelänkarna skildes från den aktuella sidan (.crumbs span)
enbart med färg. Understruken, som övriga länkar i löptext - diskret på
.85rem och håller länkspråket enhetligt över sajten. */
.crumbs a { color: var(--text-soft); }
.crumbs span { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .96rem; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: .15s; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-ink); color: #fff; text-decoration: none; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-ink); color: #fff; text-decoration: none; }
.btn--ghost { background: #fff; color: var(--brand-ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-soft); text-decoration: none; }
/* Hero (start) */
.hero { background: linear-gradient(180deg, #0f2c47 0%, #163a5c 100%); color: #eaf1f8; padding: 3.6rem 0 3.2rem; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 85% 10%, rgba(14,138,104,.22), transparent 60%); pointer-events: none; }
.hero__inner { position: relative; max-width: 760px; }
.hero h1 { color: #fff; }
.hero .lead { color: #c6d6e6; font-size: 1.22rem; max-width: 60ch; }
.hero__eyebrow { color: #8fd3bd; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .9rem; color: #b6c8da; }
.hero__trust b { color: #fff; font-weight: 600; }
/* Trust-signalrad */
.trustrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.trustrow__item { display: flex; gap: .8rem; align-items: flex-start; }
.trustrow__ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); }
.trustrow__item h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: .1rem 0 .2rem; }
.trustrow__item p { margin: 0; font-size: .92rem; color: var(--text-soft); }
/* Pelar-grid */
.pillargrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pillar-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; transition: .16s; color: var(--ink); text-decoration: none; }
.pillar-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; color: var(--ink); }
.pillar-card__ico { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: .9rem; }
.pillar-card h3 { font-size: 1.18rem; margin: 0 0 .35rem; }
.pillar-card p { font-size: .92rem; color: var(--text-soft); margin: 0 0 .9rem; }
.pillar-card__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .88rem; }
.pillar-card__links a { color: var(--brand-ink); }
/* Verktygskort */
.toolgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tool-card { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: .15s; }
.tool-card:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; color: var(--ink); }
.tool-card__ico { width: 38px; height: 38px; border-radius: 10px; background: var(--wash-2); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.tool-card b { font-weight: 600; font-size: .98rem; }
.tool-card span { display: block; font-size: .84rem; color: var(--dim); }
/* Sektionshuvud */
.sec-head { max-width: 640px; margin-bottom: 1.8rem; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
/* Hub */
.hubhead { padding: 2.2rem 0 1.6rem; }
/* Gammalt sidmönster (.shell.hubhead): ge ingressen EXAKT samma centrerade
lässpalt som brödtexten (.shell.longform = 760px + 22px padding), så ingress
och brödtext delar bredd OCH vänsterkant. Utan detta ärvde ingressen .shell:s
1180px och nollställde sidopaddingen -> bredare och 22px längre vänsterut än
brödtexten (temabuggen). Nya mönstret (bar .hubhead i .pagegrid__main, 780px)
berörs inte. PRINCIP: ingressen får aldrig ha annan bredd/vänsterkant än texten. */
.shell.hubhead { max-width: 760px; padding: 2.2rem 22px 1.6rem; }
.hub-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1rem 0 1.6rem; }
.hub-link { position: relative; display: flex; align-items: flex-start; gap: .9rem; padding: 1.25rem 1.35rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.hub-link::before { content: ""; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3f63' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center / 22px no-repeat; transition: background-color .16s ease; }
.hub-link:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; color: var(--ink); }
.hub-link:hover::before { background-color: #d7e7f4; }
.hub-link__txt { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.hub-link__txt b, .hub-link > b { font-weight: 600; font-size: 1.02rem; color: var(--brand-ink); line-height: 1.3; }
.hub-link__txt small { color: var(--text-soft); font-size: .86rem; line-height: 1.45; font-weight: 400; }
.hub-link > span[aria-hidden] { margin-left: auto; align-self: center; color: var(--dim); font-size: 1.05rem; transition: transform .16s ease, color .16s ease; }
/* Nav-uppgradering: distinkt hus-ikon per spoke, sub-hubb-peek, badge */
.hub-link:has(.hub-link__ico)::before { content: none; }
.hub-link__ico { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--brand-soft); color: #0f3f63; box-sizing: border-box; transition: background-color .16s ease; }
.hub-link:hover .hub-link__ico { background: #d7e7f4; }
.hub-link__arrow { margin-left: auto; align-self: center; color: var(--dim); font-size: 1.05rem; transition: transform .16s ease, color .16s ease; }
.hub-link:hover .hub-link__arrow { transform: translateX(3px); color: var(--brand); }
.hub-link__badge { display: inline-block; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-ink); background: var(--brand-soft); padding: .1rem .42rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle; }
.hub-link__peek { display: block; margin-top: .45rem; font-size: .8rem; color: var(--text-soft); line-height: 1.45; }
.crumbs__sep { color: var(--dim); margin: 0 .28rem; }
/* Mäklar-nodens datatabell */
.tbl-na { color: var(--dim); font-style: italic; }
.tbl-sub { font-size: .8rem; color: var(--text-soft); }
.tbl-annons { font-size: .8rem; }
.tbl-annons::after { content: " annons"; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.table-hint { display: none; }
@media (max-width: 760px) { .table-hint { display: block; font-size: .82rem; color: var(--text-soft); margin: 0 0 .5rem; } .table-hint::before { content: "\2194\00A0\00A0"; color: var(--brand); font-weight: 700; } }
.hub-link:hover > span[aria-hidden] { transform: translateX(3px); color: var(--brand); }
/* Hub-topp-subnav: grenar som ingång till djupet (lagrad IA hub -> gren -> spoke) */
.hubnav { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.hubnav__gren { display: inline-flex; flex-direction: column; gap: .1rem; padding: .5rem .85rem; background: var(--wash); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.hubnav__gren:hover { background: var(--brand-soft); border-color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.hubnav__label { font-weight: 600; font-size: .92rem; color: var(--brand-ink); line-height: 1.25; }
.hubnav__count { font-size: .74rem; color: var(--dim); font-weight: 500; }
.grensec { scroll-margin-top: 1.2rem; margin: 1.8rem 0 0; }
.grensec > h3 { margin-bottom: .3rem; }
.grensec__intro { color: var(--text-soft); margin: 0 0 1rem; max-width: 60ch; }
/* Grenkort: hubbens navigeringskluster ÖVERST. Ett färgat kort per avdelning
(ton-linje + ikonplatta), grenens intro och dess topp-spokes som länkar.
Samma färg/ikon som i megamenyn, så avdelningen känns igen direkt. */
.grenkort { margin: 0 0 2.2rem; }
.grenkort__eyebrow { margin: 0 0 .8rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.grenkort__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.grenkort__card { position: relative; display: flex; flex-direction: column; padding: 1.15rem 1.25rem 1.1rem; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--t); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.grenkort__head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .85rem; }
.grenkort__ico { flex: none; width: 44px; height: 44px; padding: 9px; border-radius: 11px; background: var(--t-soft); color: var(--t-ink); }
.grenkort__title { margin: .1rem 0 .15rem; font-family: var(--sans); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; color: var(--t-ink); line-height: 1.25; }
.grenkort__intro { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-soft); }
.grenkort__list { list-style: none; margin: 0; padding: .55rem 0 0; border-top: 1px solid var(--line); display: grid; gap: 1px; }
.grenkort__list a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .48rem .6rem; margin: 0 -.6rem; border-radius: 8px; color: var(--ink); font-weight: 500; font-size: .95rem; line-height: 1.3; text-decoration: none; }
.grenkort__list a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t); margin-right: -.1rem; }
.grenkort__list a span { flex: 1; }
.grenkort__list a:hover { background: var(--t-soft); color: var(--t-ink); text-decoration: none; }
.grenkort__kids { flex: none; font-size: .72rem; font-weight: 700; color: var(--text-soft); background: var(--wash-2); border-radius: 999px; padding: .1rem .5rem; }
.grenkort__list a:hover .grenkort__kids { background: #fff; color: var(--t-ink); }
/* =========================================================================
Enhetlig innehållslayout (content-page-template)
EN läskolumn (~780px) som breadcrumb, header, ingress, brödtext, boxar,
verktyg och bilder ALLA delar - samma vänsterkant, samma mått - plus en
sticky sido-lane för innehållsförteckning. Inga blandade containrar.
========================================================================= */
/* Default: en centrerad 780px-läskolumn (breadcrumb + header + ingress + brödtext
delar samma vänsterkant och mått). JS lägger .has-toc när en ToC byggts. */
.pagegrid { max-width: 1180px; margin: 0 auto; padding: 1rem 22px 3.5rem; display: grid; grid-template-columns: minmax(0, 780px); justify-content: center; align-items: start; }
.pagegrid.has-toc { grid-template-columns: minmax(0, 780px) 244px; column-gap: 3rem; }
.pagegrid__main { min-width: 0; }
.pagegrid__main :where(h2, h3) { scroll-margin-top: calc(var(--header-h) + 62px); }
.pagegrid__aside { display: none; }
.pagegrid.has-toc .pagegrid__aside { display: block; position: sticky; top: calc(var(--header-h) + 20px); align-self: start; max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; }
/* Rubrikrytm i hub-flödet (spokes styrs av .prose h2/h3 nedan) */
.pagegrid__main > h2 { margin-top: 3.9rem; }
.pagegrid__main > h3 { margin-top: 2.5rem; margin-bottom: .7rem; }
@media (max-width: 1080px) {
.pagegrid.has-toc { grid-template-columns: minmax(0, 780px); }
.pagegrid.has-toc .pagegrid__aside { display: none; }
}
/* Innehållsförteckning (sticky sido-lane) */
.toc { border-left: 2px solid var(--line); padding: .05rem 0; }
.toc__title { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 0 0 .6rem 1rem; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a { display: block; padding: .32rem 0 .32rem 1rem; margin-left: -2px; font-size: .88rem; line-height: 1.35; color: var(--text-soft); text-decoration: none; border-left: 2px solid transparent; }
.toc a:hover { color: var(--brand-ink); }
.toc a.is-active { color: var(--brand-ink); font-weight: 600; border-left-color: var(--brand); }
/* Artikel / prose */
.article-wrap { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 1rem 0 3.5rem; }
.prose { max-width: none; }
/* Avsnitten ska andas. Avståndet över en h2 är medvetet mycket större än
över en h3 - det är luften, inte bara storleken, som talar om att ett nytt
avsnitt börjar. */
.prose h2 { margin-top: 3.9rem; }
.prose h3 { margin-top: 2.5rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.art-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 1.6rem; font-size: .88rem; color: var(--text-soft); }
.art-meta__who { display: flex; align-items: center; gap: .5rem; }
.art-meta__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: .8rem; }
.art-meta__badge { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent-ink); font-weight: 600; }
/* Callouts */
.callout { display: flex; gap: .8rem; padding: 1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--wash); margin: 1.4rem 0; }
.callout__ico { flex: none; width: 26px; height: 26px; }
.callout h4, .callout__title { font-family: var(--sans); font-size: .98rem; font-weight: 700; margin: 0 0 .2rem; color: var(--navy); }
.callout p { margin: 0; font-size: .93rem; color: var(--text-soft); }
.callout--info { background: var(--brand-soft); border-color: #cfe2f0; }
.callout--tip { background: var(--accent-soft); border-color: #c9e8dd; }
.callout--warn { background: var(--warn-soft); border-color: #efdcb6; }
.callout--warn h4, .callout--warn .callout__title { color: #8a5a10; }
.callout--risk { background: var(--danger-soft); border-color: #f0cdc8; }
.callout--risk h4, .callout--risk .callout__title { color: var(--danger); }
/* Nyckeltal / stat */
.keyfigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.keyfig { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.keyfig__num { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--navy); line-height: 1; }
.keyfig__num .unit { font-size: 1rem; color: var(--dim); font-weight: 600; }
.keyfig__label { font-size: .9rem; color: var(--text-soft); margin-top: .35rem; }
.keyfig__src { font-size: .76rem; color: var(--dim); margin-top: .5rem; }
/* Tabell */
.table-wrap { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap table.data { margin: 0; }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 460px; }
table.data th, table.data td { text-align: left; padding: .8rem 1rem; }
/* Mörk tabellhuvud + zebrarader. Huvudet i navy ankrar tabellen och skiljer
rubrikraden från datan utan en extra linje; zebran gör att ögat håller raden
i breda tabeller bättre än vågräta streck gör, så radlinjerna är borttagna.
Vit text på navy ger långt över kravet på kontrast. */
table.data thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; padding: .7rem 1rem; }
table.data thead th + th { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
table.data tbody tr:nth-child(even) { background: var(--wash); }
table.data tbody tr:hover { background: var(--brand-soft); }
table.data tbody th { font-weight: 600; color: var(--navy); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Platshållarnotis (tomma templates) */
.ph-note { display: flex; gap: .7rem; align-items: flex-start; background: var(--wash); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 1.1rem 1.3rem; color: var(--text-soft); font-size: .95rem; margin: 1.4rem 0; }
.ph-note svg { flex: none; color: var(--dim); }
/* =========================================================================
Footer
========================================================================= */
.site-footer { background: var(--navy); color: #b9cbdd; margin-top: 4rem; }
.footer__top { display: grid; grid-template-columns: 1.2fr 3fr; gap: 2.5rem; padding: 3rem 0 2rem; }
.brand--footer .brand__name, .brand--footer { color: #fff; }
.brand--footer .brand__accent { color: inherit; }
.brand--footer .brand__mark { color: #7fc9ae; }
.footer__blurb { font-size: .92rem; color: #a9bccf; max-width: 42ch; margin: .9rem 0; }
.footer__badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; color: #7fc9ae; font-weight: 600; }
/* Kolumnantalet följer innehållet. Tidigare var det hårdkodat till fem medan
bara fyra renderas (Försäkra är obyggd och göms), så en spökkolumn åt 20 %
av bredden och pressade ihop långa länknamn i onödan. auto-fit fyller raden
med det som faktiskt finns, och 155px-golvet gör att en femte pelare hellre
bryter till en ny rad än kramar ihop alla igen. */
.footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1.9rem 1.4rem; }
.footer__col h2 { font-family: var(--sans); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #dce7f1; margin: 0 0 .7rem; text-wrap: balance; }
.footer__col h2 a { color: inherit; text-decoration: none; }
.footer__col a { display: block; color: #9fb4c8; text-decoration: none; font-size: .88rem; padding: .22rem 0; line-height: 1.4; text-wrap: pretty; }
.footer__col a:hover { color: #fff; }
.footer__sources { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: 1.2rem 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; }
.footer__sources-label { color: #7f93a8; font-weight: 600; }
.footer__sources a { color: #a9bccf; text-decoration: none; }
.footer__sources a:hover { color: #fff; text-decoration: underline; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding: 1.2rem 0 2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: #8298ac; }
.footer__base p { margin: 0; max-width: 70ch; }
.footer__base-links a { color: #a9bccf; }
.footer__base-links a:hover { color: #fff; }
/* =========================================================================
Responsivt
========================================================================= */
@media (max-width: 980px) {
.footer__top { grid-template-columns: 1fr; gap: 1.6rem; }
.footer__cols { grid-template-columns: repeat(3, 1fr); }
.trustrow, .pillargrid, .toolgrid, .keyfigs { grid-template-columns: 1fr 1fr; }
.hub-links { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
.search { display: none; }
.burger { display: flex; }
.primary { position: fixed; inset: calc(var(--header-h) + 38px) 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); margin: 0; max-width: 100vw; max-height: calc(100vh - var(--header-h) - 38px); overflow-x: hidden; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: .18s; }
.primary.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.primary__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem; }
.primary__item { position: static; }
.primary__link { justify-content: space-between; padding: .85rem 1rem; font-size: 1.02rem; }
.primary__link.is-active::after { display: none; }
.panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 .5rem 1rem; padding: .3rem .5rem .6rem; min-width: 0; }
.panel__tagline { display: none; }
.panel::before { display: none; }
/* Megameny i mobilmenyn: grenarna staplade som grupper med färgad rubrik */
.panel--mega { overflow: visible; padding: .2rem 0 .4rem; }
.mega { display: block; }
.mega__col { padding: .5rem .5rem .6rem; border-left: 0; }
.mega__col::before { display: none; }
.mega__head { margin-bottom: .3rem; }
.mega__ico { width: 28px; height: 28px; padding: 5px; }
.mega__list a { padding: .55rem .55rem; font-size: .98rem; }
.mega__aside { margin: .4rem .5rem 0; padding: .9rem; border: 0; border-radius: 10px; }
.mega__tagline { display: none; }
.mega__head--tools { margin-top: .9rem; }
}
@media (max-width: 720px) {
.grenkort__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.footer__cols { grid-template-columns: 1fr 1fr; }
.trustrow, .pillargrid, .toolgrid, .keyfigs { grid-template-columns: 1fr; }
.utility__nav { display: none; }
.hero__trust { gap: .8rem 1.2rem; }
}
/* =========================================================================
Startsida (omtag) - verktygsdriven, editorial, utan trust-flex
========================================================================= */
.lead-in { background: linear-gradient(160deg, #0f2c47 0%, #163a5c 62%, #124a52 130%); color: #eaf1f8; padding: 3.4rem 0 3.6rem; }
.lead-in__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.lead-in__copy h1 { color: #fff; font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.5rem); line-height: 1.05; margin: 0 0 1.1rem; }
.lead-in__copy .lead { color: #c6d6e6; font-size: 1.16rem; max-width: 46ch; }
.ask { display: flex; margin: 1.6rem 0 .7rem; max-width: 460px; background: #fff; border-radius: 999px; padding: 5px 5px 5px 6px; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.ask input { flex: 1; border: 0; background: transparent; font: inherit; font-size: .98rem; padding: .55rem .8rem; color: var(--ink); }
.ask input:focus { outline: none; }
.ask button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ask button:hover { background: var(--accent-ink); }
.ask__hints { font-size: .88rem; color: #9db3c7; margin: 0; }
.ask__hints a { color: #cfe0ef; text-decoration: none; margin-right: .8rem; border-bottom: 1px solid rgba(255,255,255,.25); }
.ask__hints a:hover { color: #fff; }
/* Kalkylator-kort (fungerande) */
.calc { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 26px 60px rgba(0,0,0,.28); color: var(--text); overflow: hidden; }
.calc__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); }
.calc__head span { font-weight: 600; color: var(--navy); }
.calc__head a { font-size: .84rem; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.calc__head a:hover { text-decoration: underline; }
.calc__body { padding: 1.2rem 1.3rem 1.4rem; }
.calc__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--text-soft); font-weight: 600; }
.field__in { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--wash); overflow: hidden; }
.field__in:focus-within { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.field__in input { width: 100%; border: 0; background: transparent; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); padding: .5rem .6rem; -moz-appearance: textfield; }
.field__in input::-webkit-outer-spin-button, .field__in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__in i { font-style: normal; color: var(--dim); font-weight: 600; padding-right: .7rem; font-size: .85rem; }
.calc__out { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.calc__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc__total span { font-size: .9rem; color: var(--text-soft); }
.calc__total strong { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--brand-ink); letter-spacing: -.01em; }
.calc__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: .8rem 0 .7rem; background: var(--wash-2); }
.calc__bar-in { background: var(--brand); }
.calc__bar-ret { background: var(--accent); }
.calc__split { list-style: none; display: flex; gap: 1.4rem; margin: 0; padding: 0; font-size: .9rem; color: var(--text-soft); }
.calc__split b { color: var(--ink); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; }
.dot--in { background: var(--brand); } .dot--ret { background: var(--accent); }
.calc__note { font-size: .76rem; color: var(--dim); margin: .8rem 0 0; }
/* Kunskapsbank-index (editorial, ej kort) */
.kb__head { max-width: 640px; margin-bottom: 1.8rem; }
.kb__head h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); }
.kb__head p { color: var(--text-soft); margin: 0; }
.kb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.8rem; }
.kb__col { border-top: 2px solid var(--navy); padding-top: 1rem; }
.kb__title { display: flex; align-items: baseline; gap: .5rem; font-family: var(--serif); font-weight: 700; font-size: 1.28rem; color: var(--navy); text-decoration: none; letter-spacing: -.01em; }
.kb__title:hover { color: var(--brand); text-decoration: none; }
.kb__num { font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--brand); letter-spacing: .05em; }
.kb__tag { font-size: .86rem; color: var(--dim); margin: .35rem 0 .8rem; }
.kb__list { list-style: none; margin: 0; padding: 0; }
.kb__list li { border-top: 1px solid var(--line); }
.kb__list a { display: block; padding: .5rem 0; color: var(--text); font-size: .94rem; text-decoration: none; }
.kb__list a:hover { color: var(--brand-ink); padding-left: .3rem; }
.kb__soon { font-size: .88rem; color: var(--dim); margin: .2rem 0 0; font-style: italic; }
/* Spara-kolumnen grupperad per gren (färg + ikon), i stället för 20+ platta rader */
.kb__grenar { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.kb__grenhead { display: flex; align-items: center; gap: .5rem; margin: 0 0 .15rem; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--t-ink); }
.kb__grenico { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--t-soft); color: var(--t-ink); }
.kb__list--gren li { border-top-color: var(--line); }
.kb__list--gren a { padding: .4rem 0; font-size: .92rem; }
.kb__list--gren a:hover { color: var(--t-ink); }
/* "På väg"-rad (de-emfaserade, ännu ej byggda verktyg/sektioner) */
.soonrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.soonrow__label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.soonrow__item { font-size: .88rem; color: var(--dim); background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; }
/* Regler (nyckeltal som nytta, ej trust-flex) */
.rules { background: var(--wash); }
.rules__grid { display: grid; grid-template-columns: .9fr 1.4fr; gap: 2.5rem; align-items: start; }
.rules__intro h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.rules__intro p { color: var(--text-soft); }
.link-arrow { font-weight: 600; color: var(--brand-ink); }
.rules__list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rules__list > div { background: #fff; padding: 1.1rem 1.2rem; }
.rules__list dt { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin-bottom: .3rem; }
.rules__list dd { margin: 0; font-size: .95rem; color: var(--text-soft); line-height: 1.45; }
.rules__list dd b { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.55rem; color: var(--navy); line-height: 1.1; margin-bottom: .1rem; }
.rules__list dd span { display: block; font-size: .76rem; color: var(--dim); margin-top: .5rem; }
/* Verktygsrad */
.tools-band__row { display: grid; grid-template-columns: .8fr 2fr; gap: 2rem; align-items: center; }
.tools-band__lead h2 { font-size: 1.4rem; margin-bottom: .2rem; }
.tools-band__lead p { color: var(--dim); font-size: .9rem; margin: 0; }
.tools-band__list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; }
.tools-band__list a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--brand-ink); text-decoration: none; }
.tools-band__list a:hover { border-color: var(--brand); background: var(--brand-soft); }
.tools-band__list span { color: var(--brand); }
/* =========================================================================
Footer (omtag) - omordnad, utan badge/kaellrad/friskrivning
========================================================================= */
.footer__main { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr) 1.2fr; gap: 1.6rem; padding: 3rem 0 2.2rem; }
.footer__brandcol { padding-right: 1rem; }
.footer__tagline { font-size: .92rem; color: #9fb4c8; margin: .9rem 0 0; max-width: 30ch; }
.footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: 1.2rem 0 2.2rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .82rem; color: #8298ac; }
.footer__base p { margin: 0; }
.footer__legal { display: flex; gap: 1.2rem; }
.footer__legal a { color: #9fb4c8; text-decoration: none; }
.footer__legal a:hover { color: #fff; }
@media (max-width: 980px) {
.lead-in__grid { grid-template-columns: 1fr; gap: 2rem; }
.kb { grid-template-columns: 1fr 1fr; }
.rules__grid, .tools-band__row { grid-template-columns: 1fr; gap: 1.2rem; }
.footer__main { grid-template-columns: 1fr 1fr 1fr; }
.footer__brandcol { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
.kb { grid-template-columns: 1fr; }
.rules__list { grid-template-columns: 1fr; }
.footer__main { grid-template-columns: 1fr 1fr; }
}
/* --- Förtroendesidor (trust): läsbar prosa, E-E-A-T-strip, ordlista --- */
.longform { max-width: 760px; }
.longform > h2 { font-size: 1.5rem; margin: 2.4rem 0 .7rem; }
.longform > h3 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.longform > p { margin: 0 0 1rem; }
.longform > ul, .longform > ol { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.longform > ul li, .longform > ol li { margin: .3rem 0; }
.longform .callout, .longform .example, .longform .keyfigs, .longform .table-wrap { margin: 1.4rem 0; }
.longform .lead { margin-bottom: 1.6rem; }
.pagemeta { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; font-size: .9rem; color: var(--text-soft); }
.pagemeta__line { margin: 0 0 .3rem; }
.pagemeta__line strong { color: var(--ink); font-weight: 600; margin-right: .4rem; }
.pagemeta__label { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin: .9rem 0 .4rem; }
.pagemeta__sources ul { margin: 0; padding-left: 1.1rem; }
.pagemeta__sources li { margin: .2rem 0; }
.legs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.6rem 0; }
.leg { border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.2rem 1.3rem; background: #fff; }
.leg__n { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.leg h3 { font-family: var(--serif); font-size: 1.2rem; margin: .3rem 0 .5rem; }
.leg p { margin: 0; font-size: .94rem; color: var(--text-soft); }
.termlist { margin: 1.4rem 0; border-top: 1px solid var(--line); }
.termlist__item { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.termlist__item dt { font-family: var(--sans); font-weight: 700; font-size: 1.02rem; color: var(--brand-ink); margin: 0 0 .3rem; }
.termlist__item dd { margin: 0; color: var(--text-soft); }
.termindex { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 0; font-size: .9rem; }
.termindex a { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .3rem; border: 1px solid var(--line); border-radius: 7px; color: var(--brand-ink); font-weight: 600; }
@media (max-width: 720px) { .legs { grid-template-columns: 1fr; } }
/* --- Diagramfigur (handritad inline-SVG med bildtext) --- */
.flowfig { margin: 1.6rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1.2rem 1.3rem; }
.flowfig svg { width: 100%; height: auto; display: block; }
.flowfig figcaption { margin: .8rem 0 0; font-size: .82rem; color: var(--dim); }
.fig-note { font-size: .82rem; color: var(--dim); margin: -.6rem 0 1.4rem; line-height: 1.55; }
/* Redaktionell bild/illustration (raster, via public/uploads/, ingest-image.php) */
.figimg { margin: 1.8rem 0; }
.figimg img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); background: var(--wash); }
.figimg figcaption { margin: .7rem 0 0; font-size: .82rem; color: var(--dim); }
/* Dekorativ redaktionell banderoll: beskuren till ett lugnt band (bilden har
avsiktlig luft upptill/nedtill och tål center-crop). */
.figimg--banner { margin: 1.4rem 0 1.8rem; }
.figimg--banner img { width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; object-position: center 64%; background: var(--wash); }
.figimg--banner-mid img { object-position: center 50%; } /* för motiv som sitter mitt i bilden */
/* Mobil hade 16/9, alltså en MINDRE panoramisk ruta än desktopbandet. Med
object-fit: cover innebär det att en 12:5-master får sidorna kapade - 26 %
av bredden - och flera motiv är komponerade i sidled, så det är just
ändarna som bär betydelsen (tre pensionsblock i olika längd, tät klump som
övergår i utspridda korn). Samma bandformat som desktop kapar i stället på
HÖJDEN, vilket alla motiv är komponerade att tåla. Något lägre men något
luftigare på mobil, och ingenting väsentligt försvinner. */
@media (max-width: 620px) { .figimg--banner img { aspect-ratio: 12 / 5; } }
/* Statiskt räkneexempel (kronor-tabell) */
.numex { margin: 1.7rem 0; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem 1rem; background: var(--wash); }
.numex__t { width: 100%; border-collapse: collapse; }
.numex__t caption { text-align: left; font-weight: 700; color: var(--navy); margin-bottom: .6rem; font-size: 1rem; }
.numex__t td { padding: .5rem .15rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.numex__t td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1rem; }
.numex__t tr:last-child td { border-bottom: none; }
.numex__sum td { font-weight: 700; color: var(--navy); border-bottom-width: 2px !important; border-bottom-color: var(--navy) !important; }
.numex figcaption { margin-top: .8rem; font-size: .86rem; color: var(--ink-soft, #4c5966); line-height: 1.55; }
/* --- Räkneexempel (belopp uppställda i kronor) --- */
/* Samma skäl som .toolcta: ingen färgad list i kanten på en rundad ruta.
Den mjuka bottnen räcker för att skilja räkneexemplet från löptexten. */
.example { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.6rem 0; }
.example h4, .example__title { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; color: var(--navy); }
.example dl { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; font-size: .94rem; }
.example dt { color: var(--text-soft); }
.example dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.example .tot { border-top: 1px solid var(--line-strong); padding-top: .5rem; margin-top: .3rem; }
.example .tot dd { color: var(--brand-ink); }
.example p { margin: .8rem 0 0; font-size: .88rem; color: var(--text-soft); }
/* Smala telefoner: stapla rakneexemplets etikett/belopp i EN kolumn sa langa
termer (t.ex. "genomsnittsmetoden") far full bredd och inte tvingar sidan i
horisontell scroll under ~375 px. Tvakolumn ater fran 375 px. */
@media (max-width: 374px) {
.example dl { grid-template-columns: 1fr; row-gap: .1rem; }
.example dt { padding-top: .3rem; }
.example dd { text-align: left; }
.example dt.tot { border-top: 1px solid var(--line-strong); padding-top: .55rem; margin-top: .35rem; }
.example dd.tot { border-top: 0; padding-top: 0; margin-top: 0; }
}
.chart-card__title { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; color: var(--navy); }
/* Verbatim lagcitat i brödtext. Ren yta (bakgrundston + tunn kant), INGEN
färgad rundad border-left (AI-tell). Serif för citatkänsla, källa som etikett. */
.prose blockquote { margin: 1.6rem 0; padding: 1.05rem 1.3rem 1.05rem 1.5rem; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); position: relative; }
.prose blockquote { font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; color: var(--navy); }
.prose blockquote::before { content: "\201D"; position: absolute; left: .5rem; top: .35rem; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--accent); }
.prose blockquote span { display: block; margin-top: .55rem; font-family: var(--sans); font-style: normal; font-size: .8rem; font-weight: 600; color: var(--dim); letter-spacing: .01em; }
/* Samma vänstermarginal som cellerna (1rem) så bildtexten linjerar med
tabellhuvudet i stället för att hänga en aning utanför.
En blir lika bred som tabellen, och breda tabeller är bredare än
mobilskärmen - bildtexten klipptes därför och krävde sidledsscroll för att
läsas. Den bär källangivelsen, så det är just den rad som inte får gömmas.
sticky + takbredd låser den vid vänsterkanten och låter den radbryta inom
skärmen. På desktop ryms tabellen och regeln får ingen effekt. */
.data__cap { caption-side: top; text-align: left; font-size: .82rem; font-weight: 600; color: var(--dim); padding: .85rem 1rem .75rem; position: sticky; left: 0; max-width: calc(100vw - 2.75rem); box-sizing: border-box; }
/* WCAG 1.4.1 (Use of Color): en länk i löpande text får inte skiljas från
texten enbart med färg. Externa länkar var redan understrukna, men INTERNA
var det inte. Mot den mjukt grå brödtexten i .callout (#4c5966) gav
länkfärgen bara 1,01:1 mot omgivande text - kravet är 3:1 - så länken var
i praktiken osynlig som länk. Understrykningen tar bort färgberoendet helt,
oavsett kontrastförhållande, och återanvänder samma streckvikt/offset som
externlänkarna redan har så uttrycket blir ett.
Scopad till löptext: navigation, kort och knappar ligger utanför dessa
behållare och behåller sin rena look. */
/* Kort-, knapp- och pil-länkar bär sin egen form och ska förbli odekorerade
även om de hamnar i en löptext-behållare. */
.prose .btn, .prose .hub-link, .prose .tool-card, .prose .pillar-card,
.prose .kb__title, .prose .link-arrow, .prose .nextstep,
.callout .btn, .callout .link-arrow, .faq .btn { text-decoration: none; }
/* Extern-länk-signal: länkar i brödtext som öppnar i ny flik markeras synligt
(ikon + understrykning) så att de skiljs från interna länkar och färg inte
är enda signalen (WCAG 1.4.1). Ikonen är en inline data-URI (CSP img-src). */
.prose a[target="_blank"], .srcref a[target="_blank"], .faq a[target="_blank"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a[target="_blank"]::after, .srcref a[target="_blank"]::after, .faq a[target="_blank"]::after {
content: "";
display: inline-block;
width: .66em; height: .66em;
margin-left: .22em;
vertical-align: -0.04em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5c8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M21 3l-9 9'/%3E%3Cpath d='M19 13v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* --- Hubb- och spoke-innehåll: FAQ-accordion, verktygsingång, källförteckning, röd tråd --- */
.faq { margin: 1.8rem 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary { cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; position: relative; font-family: var(--sans); font-weight: 600; color: var(--ink); }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: ""; position: absolute; right: .4rem; top: 1.25rem; width: 9px; height: 9px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); transition: transform .18s; }
.faq__item[open] > summary::after { transform: rotate(-135deg); }
.faq__item > div { padding: 0 0 1.1rem; color: var(--text-soft); }
.faq__item > div p:first-child { margin-top: 0; }
/* Utan accentstreck i kanten: en färgad list på en rundad ruta är ett slitet
mallgrepp som får blocket att läsa som genererat. Den mjuka bottnen räcker
för att skilja ut rutan. */
.toolcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.8rem 0; }
.toolcta__txt { max-width: 46ch; }
.toolcta__txt b { display: block; font-family: var(--sans); font-size: 1.02rem; color: var(--brand-ink); }
.toolcta__txt span { font-size: .92rem; color: var(--text-soft); }
.srcref { margin: 2.4rem 0 0; padding: 1.2rem 1.4rem; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); font-size: .88rem; }
.srcref h2 { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); margin: 0 0 .6rem; }
.srcref ul { margin: 0; padding-left: 1.1rem; }
.srcref li { margin: .3rem 0; color: var(--text-soft); }
.redtrad { list-style: none; padding: 0; margin: 1.6rem 0; counter-reset: rt; }
.redtrad li { position: relative; padding: .2rem 0 1.1rem 2.6rem; counter-increment: rt; }
.redtrad li::before { content: counter(rt); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--sans); font-weight: 700; font-size: .85rem; }
.redtrad li:not(:last-child)::after { content: ""; position: absolute; left: .9rem; top: 1.8rem; bottom: 0; width: 2px; background: var(--line-strong); }
.redtrad b { font-family: var(--sans); }
/* Snabböversikt som punktlista (alternativ till callout--info "Kort
sammanfattat", för att bryta den identiska öppningsrytmen mellan spokes). */
.keypoints { margin: 1.4rem 0; padding: 1.15rem 1.4rem 1.25rem; background: var(--brand-soft); border: 1px solid #cfe2f0; border-radius: var(--radius); }
.keypoints__title { font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-ink); margin: 0 0 .75rem; }
.keypoints ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.keypoints li { position: relative; padding-left: 1.5rem; font-size: .93rem; color: var(--text-soft); line-height: 1.5; }
.keypoints li::before { content: ""; position: absolute; left: 0; top: .48rem; width: 7px; height: 7px; border-radius: 2px; background: var(--brand); }
.keypoints li b { color: var(--ink); font-weight: 600; }
/* Läs vidare / nästa steg: delad avslutningsmodul på kunskapsspokes (efter FAQ,
före Källor). Egna kort med kicker-etikett + riktningspil, tydligt skild från
hubbens .hub-link så sidan får en egen slutrytm. */
.nextsteps { margin: 2.6rem 0 0; padding-top: 1.5rem; border-top: 2px solid var(--navy); }
.nextsteps > h2 { margin: 0 0 .3rem; font-size: 1.3rem; }
.nextsteps__intro { margin: 0 0 1.1rem; color: var(--text-soft); font-size: .95rem; max-width: 62ch; }
.nextsteps__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.1rem; }
.nextstep { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kicker arrow" "title arrow" "desc arrow"; align-items: start; column-gap: .6rem; row-gap: .18rem; padding: 1.05rem 1.2rem; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease; }
.nextstep:hover { background: #fff; border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); text-decoration: none; color: var(--ink); }
.nextstep__kicker { grid-area: kicker; font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.nextstep__title { grid-area: title; font-weight: 600; font-size: 1.02rem; color: var(--brand-ink); line-height: 1.3; }
.nextstep__desc { grid-area: desc; font-size: .86rem; color: var(--text-soft); line-height: 1.45; margin-top: .12rem; }
.nextstep__arrow { grid-area: arrow; align-self: center; color: var(--dim); font-size: 1.15rem; transition: transform .16s ease, color .16s ease; }
.nextstep:hover .nextstep__arrow { transform: translateX(3px); color: var(--brand); }
@media (max-width: 620px) { .nextsteps__grid { grid-template-columns: 1fr; } }
/* =========================================================================
Sökresultat (/sok/)
========================================================================= */
.searchpage__head { padding: .4rem 0 0; }
.searchpage__form { display: flex; align-items: center; gap: .5rem; position: relative; margin: 1.2rem 0 2rem; }
.searchpage__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--dim); pointer-events: none; }
.searchpage__form input[type="search"] { flex: 1; min-width: 0; padding: .8rem 1rem .8rem 2.6rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--wash); font: inherit; font-size: 1rem; color: var(--ink); }
.searchpage__form input[type="search"]:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
.searchpage__form .btn { flex: none; padding: .8rem 1.4rem; }
.results { list-style: none; margin: 0 0 2rem; padding: 0; }
.result { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.result:first-child { border-top: 1px solid var(--line); }
.result__meta { margin: 0 0 .35rem; }
.result__kind { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-soft); border-radius: 6px; padding: .18rem .5rem; }
.result__kind--verktyg { color: var(--accent-ink); background: var(--accent-soft); }
.result__kind--ordlista { color: #8a5a10; background: var(--warn-soft); }
.result__kind--omsajten, .result__kind--sektion { color: var(--text-soft); background: var(--wash-2); }
.result__title { font-size: 1.24rem; margin: 0 0 .3rem; line-height: 1.3; }
.result__title a { color: var(--brand-ink); text-decoration: none; }
.result__title a:hover { text-decoration: underline; }
.result__snippet { margin: 0 0 .35rem; color: var(--text-soft); font-size: .96rem; line-height: 1.55; }
.result__url { margin: 0; font-size: .82rem; color: var(--accent-ink); }
.results mark, .result__snippet mark { background: #fdf1cf; color: inherit; padding: 0 .1em; border-radius: 2px; }
.searchpage__browse { margin-top: 1.4rem; }
.searchpage__browse h2 { font-size: 1.15rem; margin: 1.8rem 0 .7rem; }
.searchpage__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; }
.searchpage__chips a { display: inline-flex; align-items: center; padding: .45rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--brand-ink); text-decoration: none; }
.searchpage__chips a:hover { border-color: var(--brand); background: var(--brand-soft); text-decoration: none; }
/* Sök i mobilmenyn (visas bara när den fasta menyn är öppen) */
.nav-search { display: none; }
@media (max-width: 860px) {
.nav-search { display: block; padding: .6rem .5rem .3rem; position: relative; }
.nav-search__icon { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
.nav-search input[type="search"] { width: 100%; padding: .7rem .8rem .7rem 2.5rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--wash); font: inherit; font-size: 1rem; color: var(--ink); }
.nav-search input[type="search"]:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px var(--brand-soft); }
}
@media (max-width: 560px) {
.searchpage__form .btn { padding: .8rem 1rem; }
}
/* Respektera reducerad rörelse: stäng av mjuk scroll och animationer for de
som bett om det i sitt operativsystem (tillganglighet, WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}