/* Smslån 365: grund, sidhuvud, sidfot, startsida, almanacka, långivarkort, tabeller och verktyg. */

:root {
	--s3-ink: #18222d;
	--s3-ink-2: #2b3846;
	--s3-mut: #5b6570;
	--s3-pap: #f6f1e7;
	--s3-pap-2: #efe8dc;
	--s3-vit: #ffffff;
	--s3-lin: #e3dacb;
	--s3-lin-2: #cfc3ae;
	--s3-rod: #c9372c;
	--s3-rod-mork: #a82a20;
	--s3-rod-ljus: #fbe9e6;
	--s3-gron: #1f7a52;
	--s3-gron-mork: #175f3f;
	--s3-gron-ljus: #e2f1e8;
	--s3-gul: #e9a82b;
	--s3-gul-ljus: #fdf3dc;
	--s3-bla: #2f6f9e;
	--s3-bla-ljus: #e4eef7;
	--s3-rubrik: 'Familjen Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--s3-brod: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--s3-radie: 16px;
	--s3-radie-s: 10px;
	--s3-skugga: 0 1px 0 rgba(24, 34, 45, .04), 0 10px 30px -18px rgba(24, 34, 45, .35);
	--s3-bredd: 1180px;
	--s3-text: 920px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
	margin: 0;
	background: var(--s3-pap);
	color: var(--s3-ink);
	font-family: var(--s3-brod);
	font-size: 1.0625rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--s3-rod-mork); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--s3-ink); }
:focus-visible { outline: 3px solid var(--s3-gul); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--s3-rubrik); color: var(--s3-ink); line-height: 1.18; letter-spacing: -.012em; font-weight: 700; }
button, input, select { font: inherit; }

.s3-dold, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s3-hopp { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--s3-ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.s3-hopp:focus { top: 12px; color: #fff; }

/* Knappar */
.s3-knapp {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 12px 22px; border: 2px solid var(--s3-gron); border-radius: 999px;
	background: var(--s3-gron); color: #fff; font-family: var(--s3-rubrik); font-weight: 700; font-size: 1rem;
	line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.s3-knapp:hover { background: var(--s3-gron-mork); border-color: var(--s3-gron-mork); color: #fff; transform: translateY(-1px); }
.s3-knapp--ram { background: transparent; color: var(--s3-ink); border-color: var(--s3-ink); }
.s3-knapp--ram:hover { background: var(--s3-ink); color: #fff; border-color: var(--s3-ink); }

/* Sidhuvud */
.s3-topp { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(6px); border-bottom: 1px solid var(--s3-lin); }
.admin-bar .s3-topp { top: 32px; }
.s3-topp__inre { max-width: var(--s3-bredd); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; min-height: 70px; }
.s3-logga { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--s3-ink); flex-shrink: 0; }
.s3-logga:hover { color: var(--s3-ink); }
.s3-logga__ord { display: flex; flex-direction: column; line-height: 1.05; }
.s3-logga__namn { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.55rem; letter-spacing: -.03em; }
.s3-logga__namn span { color: var(--s3-rod); }
.s3-logga__doman { font-size: .66rem; font-weight: 600; color: var(--s3-mut); margin-top: 5px; letter-spacing: .14em; text-transform: uppercase; }
.s3-logga--ljus { color: #fff; }
.s3-logga--ljus:hover { color: #fff; }
.s3-logga--ljus .s3-logga__doman { color: #c4ccd4; }
.s3-logga--ljus .s3-logga__namn span { color: #ff8d80; }

.s3-nav { margin-left: auto; }
.s3-meny { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.s3-meny > li { position: relative; display: flex; align-items: center; }
.s3-meny a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--s3-ink); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.s3-meny a:hover, .s3-meny .current-menu-item > a { background: var(--s3-pap); color: var(--s3-ink); }
.s3-meny .current-menu-item > a { box-shadow: inset 0 -3px 0 var(--s3-rod); border-radius: 8px 8px 0 0; }
.s3-meny .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 270px; background: #fff; border: 1px solid var(--s3-lin); border-radius: 12px; box-shadow: var(--s3-skugga); display: none; z-index: 5; }
.s3-meny .sub-menu a { font-weight: 500; padding: 9px 12px; }
.s3-meny li:hover > .sub-menu, .s3-meny li:focus-within > .sub-menu, .s3-meny li.is-oppen > .sub-menu { display: block; }
.s3-undermeny-knapp { border: 0; background: transparent; color: var(--s3-ink); padding: 6px; margin-left: -6px; cursor: pointer; border-radius: 6px; display: inline-flex; }

.s3-nu { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--s3-ink); font-weight: 600; font-size: .9rem; padding: 4px 12px 4px 4px; border: 1px solid var(--s3-lin); border-radius: 12px; background: #fff; flex-shrink: 0; }
.s3-nu:hover { border-color: var(--s3-ink); color: var(--s3-ink); }
.s3-nu__blad { display: flex; flex-direction: column; align-items: center; width: 40px; border-radius: 7px; overflow: hidden; border: 1.5px solid var(--s3-ink); line-height: 1; }
.s3-nu__blad span { display: block; width: 100%; background: var(--s3-gron); color: #fff; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 0 2px; text-align: center; font-weight: 700; }
.s3-nu.is-rod .s3-nu__blad span { background: var(--s3-rod); }
.s3-nu__blad strong { font-family: var(--s3-rubrik); font-size: 1.05rem; padding: 3px 0 4px; }

.s3-menyknapp { display: none; align-items: center; gap: 8px; border: 1px solid var(--s3-lin); background: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 700; color: var(--s3-ink); cursor: pointer; }
.s3-menyknapp__streck, .s3-menyknapp__streck::before, .s3-menyknapp__streck::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
.s3-menyknapp__streck::before, .s3-menyknapp__streck::after { content: ''; position: absolute; left: 0; }
.s3-menyknapp__streck::before { top: -6px; }
.s3-menyknapp__streck::after { top: 6px; }
.s3-meny-oppen .s3-menyknapp__streck { background: transparent; }
.s3-meny-oppen .s3-menyknapp__streck::before { transform: translateY(6px) rotate(45deg); }
.s3-meny-oppen .s3-menyknapp__streck::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
	.s3-nu__text { display: none; }
	.s3-nu { padding: 4px; }
}
@media (max-width: 980px) {
	.s3-menyknapp { display: inline-flex; }
	.s3-nav { position: fixed; inset: 70px 0 auto 0; max-height: calc(100vh - 70px); overflow-y: auto; background: #fff; border-bottom: 1px solid var(--s3-lin); box-shadow: var(--s3-skugga); padding: 10px 16px 20px; display: none; margin: 0; }
	.admin-bar .s3-nav { top: 116px; }
	.s3-meny-oppen .s3-nav { display: block; }
	.s3-meny { flex-direction: column; align-items: stretch; }
	.s3-meny > li { flex-wrap: wrap; }
	.s3-meny > li > a { flex: 1; font-size: 1.05rem; padding: 12px; }
	.s3-meny .sub-menu { position: static; display: none; width: 100%; box-shadow: none; border: 0; padding: 0 0 6px 14px; }
	.s3-meny li:hover > .sub-menu, .s3-meny li:focus-within > .sub-menu { display: none; }
	.s3-meny li.is-oppen > .sub-menu { display: block; }
	.s3-undermeny-knapp { padding: 12px; }
	.s3-nu { margin-left: auto; }
}
@media (max-width: 420px) {
	.s3-logga__doman { display: none; }
	.s3-logga__namn { font-size: 1.15rem; }
	.s3-topp__inre { gap: 10px; padding: 8px 14px; }
}

.s3-main { display: block; min-height: 60vh; }

/* Startsidans topp */
.s3-hero { background: var(--s3-pap); border-bottom: 1px solid var(--s3-lin); }
.s3-hero__inre { max-width: var(--s3-text); margin: 0 auto; padding: 46px 20px 26px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 40px; align-items: center; }
.s3-hero__bild { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 24px 50px -28px rgba(24, 34, 45, .55); border: 1px solid var(--s3-lin); background: var(--s3-pap-2); }
.s3-hero__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.s3-hero__bild::after { content: ''; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(24, 34, 45, .28), transparent); pointer-events: none; }
.s3-hero__dag { max-width: var(--s3-text); margin: 0 auto; padding: 0 20px 22px; }
.s3-hero__etikett { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; background: #fff; border: 1px solid var(--s3-lin); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--s3-ink-2); }
.s3-hero__etikett::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--s3-gron); box-shadow: 0 0 0 3px var(--s3-gron-ljus); }
.s3-hero__titel { font-size: clamp(2.05rem, 4.4vw, 3.3rem); margin: 0 0 16px; letter-spacing: -.028em; line-height: 1.06; }
.s3-hero__ingress { font-size: 1.12rem; color: var(--s3-ink-2); max-width: 600px; }
.s3-hero__ingress p { margin: 0 0 .8em; }
.s3-hero__knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.s3-fakta { list-style: none; margin: 0 auto; padding: 0 20px 34px; max-width: var(--s3-text); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s3-fakta li { background: #fff; border: 1px solid var(--s3-lin); border-top: 4px solid var(--s3-rod); border-radius: 0 0 var(--s3-radie-s) var(--s3-radie-s); padding: 14px 16px; font-size: .9rem; line-height: 1.4; color: var(--s3-ink-2); }
.s3-fakta strong { display: block; font-family: var(--s3-rubrik); font-size: 1.6rem; color: var(--s3-ink); line-height: 1.1; margin-bottom: 4px; }
@media (max-width: 900px) {
	.s3-hero__inre { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; }
	.s3-hero__bild { aspect-ratio: 16 / 11; border-radius: 18px; }
	.s3-hero__bild img { object-position: 55% 12%; }
	.s3-fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.s3-fakta { grid-template-columns: 1fr; }
	.s3-hero__knappar .s3-knapp { width: 100%; }
}

/* Dagens almanacksblad */
.s3-idag { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; background: #fff; border: 1px solid var(--s3-lin); border-radius: 20px; padding: 20px; box-shadow: var(--s3-skugga); }
.s3-idag--i-text { margin: 1.6em 0; }
.s3-blad { position: relative; display: flex; flex-direction: column; align-items: center; border: 2px solid var(--s3-ink); border-radius: 16px; overflow: hidden; background: #fff; align-self: start; text-align: center; box-shadow: 0 12px 26px -18px rgba(24, 34, 45, .45); }
.s3-blad__ringar { position: absolute; top: -2px; left: 0; right: 0; display: flex; justify-content: space-around; padding: 0 30px; }
.s3-blad__ringar i { display: block; width: 8px; height: 18px; border-radius: 4px; background: var(--s3-ink); }
.s3-blad__man { display: block; width: 100%; background: var(--s3-gron); color: #fff; font-family: var(--s3-rubrik); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; padding: 20px 6px 8px; }
.s3-idag.is-rod .s3-blad__man { background: var(--s3-rod); }
.s3-blad__nr { font-family: var(--s3-rubrik); font-size: 4.2rem; font-weight: 700; line-height: 1; padding: 10px 0 2px; letter-spacing: -.04em; }
.s3-idag.is-rod .s3-blad__nr { color: var(--s3-rod); }
.s3-blad__vdag { font-weight: 600; font-size: .95rem; text-transform: capitalize; }
.s3-blad__arsdag { display: block; width: 100%; margin-top: 10px; padding: 7px 4px; border-top: 1.5px dashed var(--s3-lin-2); font-size: .74rem; color: var(--s3-mut); font-weight: 600; }
.s3-idag__typ { display: inline-block; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px; background: var(--s3-gron-ljus); color: var(--s3-gron-mork); font-weight: 700; font-size: .82rem; }
.s3-idag.is-rod .s3-idag__typ { background: var(--s3-rod-ljus); color: var(--s3-rod-mork); }
.s3-idag__rubrik { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.18rem; line-height: 1.25; margin: 0 0 10px; }
.s3-idag__lista { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.s3-idag__lista a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--s3-lin); background: var(--s3-pap); color: var(--s3-ink); text-decoration: none; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.s3-idag__lista a:hover { border-color: var(--s3-ink); }
.s3-idag__lista a::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--s3-gul); flex-shrink: 0; }
.s3-idag__lista a.is-dygnet::before { background: var(--s3-gron); }
.s3-idag__lista a.is-uttag::before { background: var(--s3-bla); }
.s3-idag__not { font-size: .82rem; line-height: 1.5; color: var(--s3-mut); margin: 0 0 8px; }
.s3-idag__nasta { margin: 0; font-size: .86rem; padding-top: 8px; border-top: 1px solid var(--s3-lin); }
.s3-idag__nasta strong { color: var(--s3-rod-mork); }
@media (max-width: 520px) {
	.s3-idag { grid-template-columns: 1fr; padding: 16px; }
	.s3-blad { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0 10px; }
	.s3-blad__man { padding-top: 18px; }
	.s3-blad__nr { font-size: 3rem; padding: 8px 0; }
	.s3-blad__vdag { align-self: center; }
}

/* Årsremsan */
.s3-remsa { margin: 1.8em 0; background: #fff; border: 1px solid var(--s3-lin); border-radius: var(--s3-radie); padding: 18px 18px 14px; }
.s3-remsa__rull { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.s3-remsa svg { display: block; min-width: 680px; width: 100%; height: auto; }
.s3-remsa__man, .s3-remsa__vdag { font-family: var(--s3-brod); font-size: 10px; fill: var(--s3-mut); }
.s3-remsa rect.s3-r--bank { fill: #cfe5d8; }
.s3-remsa rect.s3-r--helg { fill: #e6ddcd; }
.s3-remsa rect.s3-r--rod { fill: var(--s3-rod); }
.s3-remsa rect.is-forbi { opacity: .42; }
.s3-remsa rect.is-idag { fill: var(--s3-gul); stroke: var(--s3-ink); stroke-width: 2.5; opacity: 1; }
.s3-remsa__forklaring { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; }
.s3-remsa__forklaring li { display: inline-flex; align-items: center; gap: 7px; }
.s3-remsa__forklaring li::before { content: ''; width: 13px; height: 13px; border-radius: 3px; background: #cfe5d8; }
.s3-remsa__forklaring .s3-r--helg::before { background: #e6ddcd; }
.s3-remsa__forklaring .s3-r--rod::before { background: var(--s3-rod); }
.s3-remsa__forklaring .s3-r--idag::before { background: var(--s3-gul); box-shadow: inset 0 0 0 2px var(--s3-ink); }
.s3-remsa figcaption { margin-top: 10px; font-size: .86rem; color: var(--s3-mut); line-height: 1.5; }

/* Sidor och artiklar */
.s3-sida { max-width: var(--s3-text); margin: 0 auto; padding: 26px 20px 60px; }
.s3-sida--start { padding-top: 34px; }
.s3-artikel__huvud { margin-bottom: 22px; }
.s3-artikel__titel { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 8px 0 16px; letter-spacing: -.025em; line-height: 1.1; }
.s3-smulor { font-size: .86rem; color: var(--s3-mut); }
.s3-smulor a { color: var(--s3-mut); text-decoration: none; }
.s3-smulor a:hover { color: var(--s3-ink); text-decoration: underline; }
.s3-smulor span[aria-hidden] { margin: 0 4px; }

.s3-byline { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; }
.s3-byline__bild, .s3-skribent__bild { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--s3-ink); color: #fff; font-family: var(--s3-rubrik); font-weight: 700; font-size: 1rem; box-shadow: inset 0 5px 0 var(--s3-rod); padding-top: 4px; }
.s3-byline__rader { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; line-height: 1.35; }
.s3-byline__namn { font-weight: 700; }
.s3-byline__namn a { color: var(--s3-ink); }
.s3-byline__datum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--s3-mut); }
.s3-byline__punkt { width: 4px; height: 4px; border-radius: 50%; background: var(--s3-lin-2); }
.s3-byline__kontroll { display: flex; align-items: flex-start; gap: 7px; margin-left: -21px; color: var(--s3-gron-mork); font-weight: 600; font-size: .84rem; }
.s3-byline__kontroll svg { flex: 0 0 14px; margin-top: .25em; }
@media (max-width: 600px) {
	.s3-byline__datum { flex-direction: column; align-items: flex-start; gap: 2px; }
	.s3-byline__punkt { display: none; }
}
.s3-byline--info { font-size: .88rem; color: var(--s3-mut); }

.s3-utvald { margin: 0 0 8px; }
.s3-utvald img, .s3-listbild__svg { display: block; width: 100%; height: auto; border-radius: var(--s3-radie); border: 1px solid var(--s3-lin); }
.s3-utvald img { max-height: 440px; object-fit: cover; object-position: 50% 40%; }
.s3-listbild__svg { aspect-ratio: 12 / 5; object-fit: cover; }
.s3-utvald figcaption { font-size: .86rem; color: var(--s3-mut); margin-top: 8px; line-height: 1.45; }

.s3-skribent { display: flex; gap: 16px; margin: 44px 0 0; padding: 22px; background: #fff; border: 1px solid var(--s3-lin); border-radius: var(--s3-radie); }
.s3-skribent__bild { width: 56px; height: 56px; font-size: 1.2rem; }
.s3-skribent p { margin: 0 0 8px; font-size: .95rem; line-height: 1.55; }
.s3-skribent__namn { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.1rem !important; }
.s3-skribent__lankar { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 !important; }
.s3-skribent__lankar a { font-weight: 600; font-size: .9rem; }

/* Artikelkort och listor */
.s3-rad { max-width: var(--s3-text); margin: 50px auto 0; }
.s3-sida .s3-rad { margin-top: 50px; }
.s3-rad__huvud { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.s3-rad__rubrik { font-size: 1.45rem; margin: 0; }
.s3-rad__huvud a { font-weight: 700; font-size: .95rem; }
.s3-kortlista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.s3-pkort__lank { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--s3-lin); border-radius: var(--s3-radie); overflow: hidden; text-decoration: none; color: var(--s3-ink); transition: transform .15s, box-shadow .15s, border-color .15s; }
.s3-pkort__lank:hover { color: var(--s3-ink); transform: translateY(-2px); box-shadow: var(--s3-skugga); border-color: var(--s3-lin-2); }
.s3-pkort__bild { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--s3-pap-2); overflow: hidden; }
.s3-pkort__bild img { width: 100%; height: 100%; object-fit: cover; }
.s3-pkort__text { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.s3-pkort__datum { font-size: .8rem; color: var(--s3-mut); font-weight: 600; }
.s3-pkort__titel { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.s3-pkort__utdrag { font-size: .9rem; color: var(--s3-ink-2); line-height: 1.5; }

.s3-arkiv { max-width: var(--s3-text); margin: 0 auto; padding: 26px 20px 60px; }
.s3-arkiv__beskrivning { max-width: var(--s3-text); color: var(--s3-ink-2); margin-bottom: 20px; }
.s3-sidnr { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 6px; }
.s3-sidnr .page-numbers { display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--s3-lin); border-radius: 10px; background: #fff; text-decoration: none; color: var(--s3-ink); font-weight: 600; }
.s3-sidnr .current { background: var(--s3-ink); color: #fff; border-color: var(--s3-ink); }
.s3-sok { display: flex; gap: 8px; margin: 10px 0 24px; max-width: 560px; }
.s3-sok label { flex: 1; }
.s3-sok input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--s3-lin-2); border-radius: 12px; background: #fff; }
.s3-404 { text-align: center; padding-top: 50px; }
.s3-404__kod { font-family: var(--s3-rubrik); font-size: 6rem; font-weight: 700; color: var(--s3-rod); margin: 0; line-height: 1; }

/* Sidfot */
.s3-fot { margin-top: 70px; background: var(--s3-ink); color: #d6dce2; font-size: .94rem; }
.s3-fot__inre { max-width: var(--s3-bredd); margin: 0 auto; padding: 46px 20px 26px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.s3-fot__om p { margin: 14px 0 0; line-height: 1.6; }
.s3-fot__kontakt { margin-top: 18px; }
.s3-fot__knapp { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1.5px solid rgba(255, 255, 255, .32); border-radius: 999px; color: #fff !important; font-weight: 700; font-size: .92rem; text-decoration: none !important; transition: background .15s, border-color .15s; }
.s3-fot__knapp:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.s3-fot__om .s3-fot__svar { margin: 10px 0 0; font-size: .86rem; color: #aeb7c0; }
.s3-fot__botten .s3-fot__adress { margin-top: 12px; }
.s3-fot__rubrik { font-family: var(--s3-rubrik); font-weight: 700; color: #fff; margin: 0 0 10px; font-size: 1.02rem; }
.s3-fot ul { list-style: none; margin: 0; padding: 0; }
.s3-fot li { margin: 0 0 7px; }
.s3-fot a { color: #d6dce2; text-decoration: none; }
.s3-fot a:hover { color: #fff; text-decoration: underline; }
.s3-fot__botten { max-width: var(--s3-bredd); margin: 0 auto; padding: 18px 20px 34px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .84rem; color: #aeb7c0; }
.s3-fot__botten p { margin: 0 0 6px; }
@media (max-width: 820px) { .s3-fot__inre { grid-template-columns: 1fr; gap: 26px; } }

/* Särskild upplysning */
.s3-varning { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 18px; padding: 16px 18px; background: #fff; border: 1px solid #d6d6d6; border-radius: var(--s3-radie-s); color: #000; }
.s3-varning__ikon { flex-shrink: 0; width: 88px; height: 88px; margin-top: -4px; }
.s3-varning__text { margin: 0; font-size: 1rem; line-height: 1.5; color: #000; }
.s3-varning__text strong { color: #000; }
.s3-varning__text a { color: #000; text-decoration: underline; }

/* Topplistan */
.s3-topplista { margin: 1.6em 0 2em; }
.s3-lglista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.s3-lg { position: relative; background: #fff; border: 1px solid var(--s3-lin); border-radius: 18px; padding: 20px 20px 18px; box-shadow: var(--s3-skugga); }
.s3-lg[hidden] { display: none; }
.s3-lg__topp { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.s3-lg__nr { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 44px; border-radius: 8px; background: #fff; border: 2px solid var(--s3-ink); font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.2rem; position: relative; padding-top: 7px; overflow: hidden; }
.s3-lg__nr::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--s3-rod); }
.s3-lg__id { flex: 1; min-width: 0; }
.s3-lg__namn { margin: 0 !important; font-size: 1.4rem !important; line-height: 1.15; }
.s3-lg__typ { display: block; font-size: .86rem; color: var(--s3-mut); margin-top: 2px; }
.s3-matare { display: inline-flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 84px; border: 2px solid var(--s3-ink); border-radius: 10px; overflow: hidden; background: #fff; line-height: 1; }
.s3-matare__topp { display: block; width: 100%; text-align: center; background: var(--s3-ink); color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 0; }
.s3-matare__tal { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.55rem; padding: 6px 0 3px; letter-spacing: -.03em; }
.s3-matare__tal small { font-size: .7rem; color: var(--s3-mut); font-weight: 600; margin-left: 1px; }
.s3-matare__rutor { display: flex; gap: 3px; padding: 0 0 7px; }
.s3-matare__rutor i { width: 11px; height: 11px; border-radius: 3px; background: var(--s3-lin); }
.s3-matare__rutor i.is-hel { background: var(--s3-gron); }
.s3-matare__rutor i.is-halv { background: linear-gradient(90deg, var(--s3-gron) 50%, var(--s3-lin) 50%); }

.s3-lg__utb { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--s3-pap); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.s3-lg__utb p { margin: 0; font-size: .92rem; line-height: 1.5; }
.s3-lg__dagar { display: inline-flex; flex-direction: row; align-items: baseline; gap: 8px; max-width: 100%; white-space: nowrap; padding: 6px 12px; border-radius: 9px; background: var(--s3-gul-ljus); border: 1.5px solid var(--s3-gul); line-height: 1.2; }
.s3-lg__dagar--dygnet { background: var(--s3-gron-ljus); border-color: var(--s3-gron); }
.s3-lg__dagar--uttag { background: var(--s3-bla-ljus); border-color: var(--s3-bla); }
.s3-lg__dagar--okand { background: #f1eee8; border-color: var(--s3-lin-2); }
.s3-lg__dagar-topp { font-size: .72rem; font-weight: 700; color: var(--s3-mut); }
.s3-lg__dagar-tal { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1rem; }
.s3-marken { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.s3-marke { font-size: .78rem; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: var(--s3-pap-2); color: var(--s3-ink-2); line-height: 1.2; }
.s3-marke--dygnet { background: var(--s3-gron-ljus); color: var(--s3-gron-mork); }
.s3-marke--uttag { background: var(--s3-bla-ljus); color: var(--s3-bla); }
.s3-marke--anmarkning { background: var(--s3-pap-2); color: var(--s3-ink-2); }
.s3-marke--utan-avgift { background: var(--s3-pap-2); color: var(--s3-ink-2); }
.s3-lg__text { margin: 0 0 12px; font-size: .97rem; }
.s3-lg__fakta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--s3-lin); border: 1px solid var(--s3-lin); border-radius: 12px; overflow: hidden; margin: 0 0 12px; }
.s3-lg__fakta div { background: #fff; padding: 9px 11px; }
.s3-lg__fakta dt { font-size: .72rem; color: var(--s3-mut); font-weight: 700; }
.s3-lg__fakta dd { margin: 2px 0 0; font-size: .9rem; line-height: 1.35; font-weight: 600; }
.s3-lg__passar { margin: 0 0 10px; font-size: .94rem; }
.s3-lg__poang { margin: 0 0 10px; border: 1px solid var(--s3-lin); border-radius: 10px; background: #fff; }
.s3-lg__poang summary { cursor: pointer; padding: 9px 12px; font-weight: 700; font-size: .9rem; list-style-position: inside; }
.s3-lg__poang ul { margin: 0; padding: 0 14px 10px 30px; font-size: .9rem; }
.s3-lg__poang li { margin: 0 0 4px; }
.s3-lg__exempel { margin: 0 0 14px; font-size: .84rem; color: var(--s3-mut); line-height: 1.5; background: var(--s3-pap); border-radius: 8px; padding: 9px 12px; }
.s3-lg__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 12px; border-top: 1px dashed var(--s3-lin-2); }
.s3-lg__logo { display: inline-flex; align-items: center; height: 44px; padding: 4px 8px; background: #fff; border: 1px solid var(--s3-lin); border-radius: 8px; }
.s3-lg__logo img { max-height: 32px; width: auto; }
.s3-lg__cta .s3-knapp { flex: 1 1 260px; }
.s3-lg__annons { font-size: .76rem; color: var(--s3-mut); }
.s3-lg__las { font-weight: 700; font-size: .9rem; }
.s3-topplista__not { font-size: .84rem; color: var(--s3-mut); margin: 10px 0 0; }
@media (max-width: 640px) {
	.s3-lg { padding: 16px 14px 14px; }
	.s3-lg__fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.s3-lg__namn { font-size: 1.2rem !important; }
	.s3-matare { width: 74px; }
}
@media (max-width: 380px) { .s3-lg__fakta { grid-template-columns: 1fr; } }

/* Filter */
.s3-filter { margin: 1.4em 0 1em; padding: 14px 16px; background: #fff; border: 1px solid var(--s3-lin); border-radius: var(--s3-radie-s); }
.s3-filter__rubrik { margin: 0 0 8px !important; font-weight: 700; font-size: .92rem; }
.s3-filter__val { display: flex; flex-wrap: wrap; gap: 8px; }
.s3-filter__knapp { border: 1.5px solid var(--s3-lin-2); background: var(--s3-pap); color: var(--s3-ink); padding: 7px 13px; border-radius: 999px; font-weight: 600; font-size: .88rem; cursor: pointer; }
.s3-filter__knapp[aria-pressed="true"] { background: var(--s3-ink); border-color: var(--s3-ink); color: #fff; }
.s3-filter__tom { margin: 10px 0 0 !important; color: var(--s3-rod-mork); font-weight: 600; font-size: .9rem; }

/* Tabeller från temat */
.s3-tabell { margin: 1.4em 0; overflow-x: auto; }
.s3-tabell table, .s3-innehall table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--s3-lin); border-radius: 12px; overflow: hidden; font-size: .93rem; line-height: 1.45; }
.s3-tabell th, .s3-innehall th { background: var(--s3-ink); color: #fff; text-align: left; font-family: var(--s3-rubrik); font-weight: 700; padding: 11px 12px; font-size: .88rem; }
.s3-tabell td, .s3-innehall td { padding: 10px 12px; border-top: 1px solid var(--s3-lin); vertical-align: top; }
.s3-tabell tr:nth-child(even) td, .s3-innehall tbody tr:nth-child(even) td { background: #fcfaf6; }
.s3-tabell--tider .s3-tid--dygnet td:not(:first-child) { color: var(--s3-gron-mork); font-weight: 600; }
@media (max-width: 700px) {
	.s3-tabell table, .s3-tabell thead, .s3-tabell tbody, .s3-tabell tr, .s3-tabell td { display: block; width: 100%; }
	.s3-tabell thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.s3-tabell table { border: 0; background: transparent; }
	.s3-tabell tr { background: #fff; border: 1px solid var(--s3-lin); border-radius: 12px; margin: 0 0 10px; overflow: hidden; }
	.s3-tabell td { border-top: 1px solid var(--s3-lin); display: block; background: #fff !important; }
	.s3-tabell td:first-child { border-top: 0; background: var(--s3-pap) !important; display: block; font-size: 1.02rem; }
	.s3-tabell td:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 2px; font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: var(--s3-mut); }
}

/* Betygsstaplar */
.s3-bstaplar { margin: 1.6em 0; background: #fff; border: 1px solid var(--s3-lin); border-radius: var(--s3-radie); padding: 18px; }
.s3-bstaplar__forklaring { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; font-weight: 600; }
.s3-bstaplar__forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.s3-bstaplar__forklaring li::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: currentColor; }
.s3-bstaplar__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s3-bstaplar__lista summary { display: grid; grid-template-columns: 110px 1fr 34px; gap: 10px; align-items: center; cursor: pointer; list-style: none; padding: 4px 0; }
.s3-bstaplar__lista summary::-webkit-details-marker { display: none; }
.s3-bstaplar__namn { font-weight: 700; font-size: .92rem; }
.s3-bstaplar__stapel { display: flex; height: 18px; background: var(--s3-pap-2); border-radius: 5px; overflow: hidden; }
.s3-bstaplar__stapel i { display: block; height: 100%; }
.s3-bstaplar__tal { font-family: var(--s3-rubrik); font-weight: 700; text-align: right; }
.s3-bstaplar__lista details ul { margin: 4px 0 10px; padding-left: 20px; font-size: .86rem; }
.s3-f--pris { color: var(--s3-gron); background-color: var(--s3-gron); }
.s3-f--dagar { color: var(--s3-rod); background-color: var(--s3-rod); }
.s3-f--snabbhet { color: var(--s3-bla); background-color: var(--s3-bla); }
.s3-f--krav { color: var(--s3-gul); background-color: var(--s3-gul); }
.s3-bstaplar__forklaring li { background: none !important; }
.s3-bstaplar figcaption { margin-top: 12px; font-size: .84rem; color: var(--s3-mut); }
@media (max-width: 480px) { .s3-bstaplar__lista summary { grid-template-columns: 84px 1fr 28px; } }

/* Kostnadsstaplar */
.s3-staplar { margin: 1.6em 0; background: #fff; border: 1px solid var(--s3-lin); border-radius: var(--s3-radie); padding: 18px; }
.s3-staplar__val { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.s3-staplar__val label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .84rem; }
.s3-staplar__val select { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--s3-lin-2); border-radius: 10px; background: var(--s3-pap); }
.s3-staplar__rubrik { font-family: var(--s3-rubrik); font-weight: 700; margin: 0 0 8px !important; }
.s3-staplar__forklaring { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; font-weight: 600; }
.s3-staplar__forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.s3-staplar__forklaring li::before { content: ''; width: 12px; height: 12px; border-radius: 3px; }
.s3-staplar__ranta::before { background: var(--s3-ink); }
.s3-staplar__avgift::before { background: var(--s3-rod); }
.s3-staplar__dygn::before { background: var(--s3-gron); border-radius: 50% !important; }
.s3-staplar__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.s3-staplar__lista li { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; align-items: center; }
.s3-staplar__namn { font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.s3-staplar__namn.is-dygnet::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--s3-gron); }
.s3-staplar__stapel { display: flex; height: 20px; background: var(--s3-pap-2); border-radius: 5px; overflow: hidden; }
.s3-staplar__stapel i:first-child { background: var(--s3-ink); }
.s3-staplar__stapel i:last-child { background: var(--s3-rod); }
.s3-staplar__varde { grid-column: 2; font-weight: 700; font-size: .92rem; }
.s3-staplar__varde small { display: block; font-weight: 500; color: var(--s3-mut); font-size: .8rem; }
.s3-staplar__lista .is-ej { display: block; font-size: .84rem; color: var(--s3-mut); }
.s3-staplar figcaption { margin-top: 12px; font-size: .84rem; color: var(--s3-mut); line-height: 1.5; }

/* Lånekalkyl */
.s3-kalkyl { margin: 1.6em 0; background: var(--s3-ink); color: #fff; border-radius: 20px; padding: 22px; }
.s3-kalkyl__skarm { display: grid; gap: 16px; }
.s3-kalkyl__falt { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.s3-kalkyl__falt label { font-weight: 700; }
.s3-kalkyl__falt output { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.3rem; color: #ffd27a; }
.s3-kalkyl__falt input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--s3-gul); height: 28px; }
.s3-kalkyl__rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.s3-kalkyl__rad label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; font-weight: 600; color: #cfd6dc; }
.s3-kalkyl__rad input { min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid #3c4a58; background: #222f3c; color: #fff; }
.s3-kalkyl__resultat { margin: 18px 0 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.s3-kalkyl__resultat div { background: #222f3c; border-radius: 12px; padding: 10px 12px; }
.s3-kalkyl__resultat .is-stor { background: var(--s3-gul); color: var(--s3-ink); }
.s3-kalkyl__resultat dt { font-size: .76rem; font-weight: 600; opacity: .85; }
.s3-kalkyl__resultat dd { margin: 3px 0 0; font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.2rem; }
.s3-kalkyl__stapel { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #2b3846; }
.s3-kalkyl__stapel i { display: block; height: 100%; }
.s3-kalkyl__stapel [data-del="lan"] { background: #cfe5d8; }
.s3-kalkyl__stapel [data-del="ranta"] { background: var(--s3-gul); }
.s3-kalkyl__stapel [data-del="avgift"] { background: #ff8d80; }
.s3-kalkyl__forklaring { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; }
.s3-kalkyl__forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.s3-kalkyl__forklaring li::before { content: ''; width: 11px; height: 11px; border-radius: 3px; }
.s3-kalkyl__forklaring .is-lan::before { background: #cfe5d8; }
.s3-kalkyl__forklaring .is-ranta::before { background: var(--s3-gul); }
.s3-kalkyl__forklaring .is-avgift::before { background: #ff8d80; }
.s3-kalkyl__not { margin: 12px 0 0 !important; font-size: .8rem !important; color: #b8c2cb; line-height: 1.5; }
@media (max-width: 640px) {
	.s3-kalkyl { padding: 16px; }
	.s3-kalkyl__rad { grid-template-columns: 1fr; }
	.s3-kalkyl__resultat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Metod och innehållsförteckning */
.s3-metod { padding-left: 1.2em; }
.s3-metod li { margin-bottom: .6em; }
.s3-toc { margin: 1.4em 0 1.8em; background: #fff; border: 1px solid var(--s3-lin); border-radius: var(--s3-radie-s); }
.s3-toc summary { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px; cursor: pointer; list-style: none; font-weight: 700; }
.s3-toc summary::-webkit-details-marker { display: none; }
.s3-toc__titel { font-family: var(--s3-rubrik); }
.s3-toc__antal { font-weight: 500; font-size: .86rem; color: var(--s3-mut); }
.s3-toc__pil { margin-left: auto; align-self: center; transition: transform .2s; }
.s3-toc details[open] .s3-toc__pil { transform: rotate(180deg); }
.s3-toc ol { margin: 0; padding: 0 18px 14px 40px; font-size: .95rem; columns: 2 260px; column-gap: 30px; }
.s3-toc li { margin: 0 0 6px; break-inside: avoid; }
.s3-toc a { color: var(--s3-ink); text-decoration: none; }
.s3-toc a:hover { color: var(--s3-rod-mork); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}
@media (max-width: 600px) {
	.s3-hero__etikett { display: flex; align-items: flex-start; border-radius: 14px; line-height: 1.35; font-size: .8rem; }
	.s3-hero__etikett::before { flex: 0 0 8px; margin-top: 5px; }
}

/* Kontaktformuläret (Contact Form 7) */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 textarea, .wpcf7 select { width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--s3-lin); border-radius: 10px; background: #fff; font: inherit; color: var(--s3-ink); }
.wpcf7 textarea { min-height: 150px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 2px solid var(--s3-gul); outline-offset: 1px; }
.wpcf7 input[type="submit"] { background: var(--s3-ink); color: #fff; border: 0; border-radius: 999px; padding: 12px 24px; font-weight: 700; font: inherit; cursor: pointer; }
.wpcf7 p { margin: 0 0 14px; }

/* Kostnadskalendern */
.s3-kkal, .s3-kalk { margin: 1.6em 0; background: #fff; border: 1px solid var(--s3-lin); border-radius: 18px; overflow: hidden; box-shadow: var(--s3-skugga); }
.s3-kkal__huvud, .s3-kalk__huvud { position: relative; background: var(--s3-rod); color: #fff; padding: 24px 20px 13px; }
.s3-kalk__huvud { background: var(--s3-gron); }
.s3-kkal__ringar { position: absolute; top: -3px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 44px; }
.s3-kkal__ringar i { display: block; width: 9px; height: 20px; border-radius: 5px; background: var(--s3-ink); }
.s3-kkal__titel, .s3-kalk__titel { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.28rem; line-height: 1.2; margin: 0 !important; }
.s3-kkal__under, .s3-kalk__under { margin: 3px 0 0 !important; font-size: .9rem; opacity: .94; }
.s3-kkal__val { padding: 16px 20px 4px; display: grid; gap: 10px; }
.s3-kkal__grupp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.s3-kkal__etikett { font-weight: 700; font-size: .86rem; min-width: 110px; }
.s3-kkal__flik { min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--s3-lin-2); border-top-width: 4px; border-radius: 9px; background: #fff; color: var(--s3-ink); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; }
.s3-kkal__flik:hover { border-color: var(--s3-ink); }
.s3-kkal__flik[aria-pressed="true"] { background: var(--s3-ink); border-color: var(--s3-ink); border-top-color: var(--s3-rod); color: #fff; }
.s3-kkal__forklaring { list-style: none; margin: 10px 20px 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; font-weight: 600; }
.s3-kkal__forklaring li { display: inline-flex; align-items: center; gap: 6px; }
.s3-kkal__forklaring li::before { content: ''; width: 12px; height: 12px; border-radius: 3px; }
.s3-kkal__forklaring .is-ranta::before { background: var(--s3-ink); }
.s3-kkal__forklaring .is-avgift::before { background: var(--s3-rod); }
.s3-kkal__forklaring .is-skala { color: var(--s3-mut); }
.s3-kkal__forklaring .is-skala::before { background: transparent; border: 1.5px solid var(--s3-lin-2); }
.s3-kkal__forklaring .is-dygn::before { width: 9px; height: 9px; border-radius: 50%; background: var(--s3-gron); }
.s3-kkal__lista { list-style: none; margin: 0; padding: 0 20px 4px; }
.s3-kkal__lista li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 236px; gap: 8px 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--s3-lin); }
.s3-kkal__namn { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.s3-kkal__namn.is-dygnet::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--s3-gron); }
.s3-kkal__rutor { display: flex; flex-wrap: wrap; gap: 3px; }
.s3-kkal__rutor i { display: block; width: 13px; height: 13px; border-radius: 3px; background: var(--s3-ink); }
.s3-kkal__rutor i.is-avgift { background: var(--s3-rod); }
.s3-kkal__summa { text-align: right; line-height: 1.3; }
.s3-kkal__summa strong { display: block; font-family: var(--s3-rubrik); font-size: 1.08rem; }
.s3-kkal__summa span { display: block; font-weight: 700; font-size: .84rem; color: var(--s3-gron-mork); }
.s3-kkal__summa small { display: block; color: var(--s3-mut); font-size: .76rem; }
.s3-kkal__lista .is-ej { display: block; font-size: .84rem; color: var(--s3-mut); }
.s3-kkal figcaption { margin: 0; padding: 12px 20px 16px; font-size: .82rem; color: var(--s3-mut); line-height: 1.5; border-top: 1px dashed var(--s3-lin-2); }
@media (max-width: 640px) {
	.s3-kkal__etikett { min-width: 0; width: 100%; }
	.s3-kkal__lista li { grid-template-columns: minmax(0, 1fr) auto; }
	.s3-kkal__rutor { grid-column: 1 / -1; order: 3; }
	.s3-kkal__ringar { padding: 0 30px; }
}

/* Avikalendern */
.s3-kalk__kropp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; padding: 18px 20px 14px; }
.s3-kalk__falt { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; margin-bottom: 14px; }
.s3-kalk__falt label { font-weight: 700; }
.s3-kalk__falt output { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.28rem; }
.s3-kalk__falt input[type="range"] { grid-column: 1 / -1; width: 100%; height: 28px; accent-color: var(--s3-gron); }
.s3-kalk__smal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s3-kalk__smal label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--s3-mut); }
.s3-kalk__smal input { min-height: 42px; padding: 8px 10px; border: 1.5px solid var(--s3-lin-2); border-radius: 9px; background: var(--s3-pap); color: var(--s3-ink); font: inherit; font-weight: 600; }
.s3-kalk__siffror { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.s3-kalk__siffror div { background: var(--s3-pap); border: 1px solid var(--s3-lin); border-radius: 12px; padding: 10px 12px; }
.s3-kalk__siffror .is-stor { grid-column: 1 / -1; background: var(--s3-ink); border-color: var(--s3-ink); color: #fff; }
.s3-kalk__siffror dt { font-size: .76rem; font-weight: 600; opacity: .85; }
.s3-kalk__siffror dd { margin: 2px 0 0; font-family: var(--s3-rubrik); font-weight: 700; font-size: 1.08rem; }
.s3-kalk__siffror div:not(.is-stor) { padding: 9px 10px; }
.s3-kalk__siffror .is-stor dd { font-size: 1.9rem; line-height: 1.1; }
.s3-kalk__avierubrik { margin: 4px 20px 8px !important; font-weight: 700; }
.s3-kalk__avierubrik span { font-weight: 500; color: var(--s3-mut); }
.s3-kalk__avier { list-style: none; margin: 0; padding: 0 20px 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.s3-kalk__blad { display: flex; flex-direction: column; border: 1.5px solid var(--s3-ink); border-radius: 10px; overflow: hidden; text-align: center; background: #fff; }
.s3-kalk__man { background: var(--s3-gron); color: #fff; font-weight: 700; font-size: .76rem; padding: 4px 2px; }
.s3-kalk__belopp { font-family: var(--s3-rubrik); font-weight: 700; font-size: 1rem; padding: 8px 2px 1px; }
.s3-kalk__nr { font-size: .72rem; color: var(--s3-mut); padding: 0 2px 7px; }
.s3-kalk__blad.is-forsta .s3-kalk__man { background: var(--s3-gul); color: var(--s3-ink); }
.s3-kalk__blad.is-sista .s3-kalk__man { background: var(--s3-rod); }
.s3-kalk__blad.is-mellan { align-items: center; justify-content: center; border-style: dashed; color: var(--s3-mut); font-weight: 700; font-size: .84rem; padding: 10px 6px; }
.s3-kalk__not { margin: 12px 20px 16px !important; font-size: .8rem !important; color: var(--s3-mut); line-height: 1.5; }
@media (max-width: 700px) {
	.s3-kalk__kropp { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
	.s3-kalk__smal { grid-template-columns: 1fr; }
	.s3-kalk__avier { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Filter som kalenderflikar */
.s3-filter__knapp { border-top-width: 4px !important; border-radius: 9px !important; background: #fff !important; }
.s3-filter__knapp[aria-pressed="true"] { background: var(--s3-ink) !important; border-color: var(--s3-ink) !important; border-top-color: var(--s3-rod) !important; color: #fff !important; }