/* x17-flera-vagar-in.html – lyft ur startsektionerna med kalla/sx_in.py (ändra i källan och kör om) */
.x17 { position: relative; padding: var(--sektion) 0; }
.x17-huvud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 28px; align-items: end; }
.x17-huvud > div { grid-column: 1 / span 6; }
.x17-huvud .t-etikett { margin-bottom: 30px; }
.x17 h2 { font-size: clamp(2.6rem, 1.3rem + 3.1vw, 4rem); font-weight: 260; line-height: .98; letter-spacing: -.034em; }
.x17-huvud .t-ingress { grid-column: 8 / span 5; font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem); }

/* diagrammen */
.x17-diagram { position: relative; margin-top: clamp(56px, 6vw, 88px); height: 436px; }
.x17-el { position: relative; margin-top: 36px; height: 104px; }
.x17-diagram svg, .x17-el svg, .x17-diagram canvas, .x17-el canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.x17-vag { fill: none; stroke: var(--linje-2); stroke-width: 1; transition: stroke .4s ease, stroke-width .4s ease, opacity .4s ease; }
.x17-vag.x17-vald { stroke: var(--bla); stroke-width: 2; }
.x17-dampa .x17-vag:not(.x17-vald) { opacity: .4; }
.x17-varmelinje { fill: none; stroke: rgba(242, 154, 60, .5); stroke-width: 1; }
.x17-elvag { fill: none; stroke: rgba(170, 196, 228, .26); stroke-width: 1; }
.x17-nod { fill: var(--natt); stroke: var(--is-3); stroke-width: 1; }
.x17-nod-sken { fill: url(#x17-sken); }
.js .x17-ritas { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.x17-ritad .x17-ritas { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) var(--d, 0s); }

.x17-branslen { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; }
.x17-branslen button { height: 44px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; font-size: 1.25rem; font-weight: 300; font-variation-settings: "opsz" 24; color: var(--is-2); transition: color .4s ease, opacity .4s ease; }
.x17-branslen button:last-child { margin-bottom: 0; }
.x17-branslen button:hover, .x17-branslen button[aria-pressed="true"] { color: var(--is); }
.x17-dampa .x17-branslen button:not([aria-pressed="true"]) { opacity: .6; }
.x17-dampa .x17-branslen button:not([aria-pressed="true"]):hover { opacity: 1; }
.x17-branslen button i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--is-3); transition: background-color .4s ease, box-shadow .4s ease; }
.x17-branslen button[aria-pressed="true"] i { background: var(--bla); box-shadow: none; }
.x17-nodtext { position: absolute; z-index: 2; transform: translateX(-50%); text-align: center; width: 230px; pointer-events: none; }
.x17-nodtext b { display: block; font-size: 1rem; font-weight: 400; color: var(--is); }
.x17-nodtext span { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.35; color: var(--is-3); }
.x17-varmeord { position: absolute; z-index: 2; font-size: .875rem; color: var(--glod); letter-spacing: .01em; pointer-events: none; transform: translate(-100%, -150%); }
.x17-elnamn { position: absolute; left: 0; z-index: 2; height: 44px; display: flex; align-items: center; gap: 12px; font-size: 1.25rem; font-weight: 300; color: var(--is-2); }
.x17-elnamn i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--is-4); }

/* förklaringen och slutraden */
.x17-fot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 40px; margin-top: clamp(48px, 5vw, 80px); padding-top: 36px; border-top: 1px solid var(--linje); }
.x17-forkl { grid-column: 1 / span 6; min-height: 120px; transition: opacity .3s ease; }
.x17-forkl.x17-ut { opacity: 0; }
.x17-forkl .t-etikett { display: block; margin-bottom: 14px; }
.x17-forkl h3 { font-size: 1.5rem; font-weight: 300; line-height: 1.2; letter-spacing: -.01em; color: var(--is); }
.x17-forkl p { margin-top: 10px; max-width: 56ch; font-size: 1.0625rem; line-height: 1.55; color: var(--is-2); text-wrap: pretty; }
.x17-slut { grid-column: 8 / span 5; align-self: end; }
.x17-slut p { font-size: 1.0625rem; line-height: 1.55; color: var(--is-2); text-wrap: pretty; }
.x17-slut p b { font-weight: 400; color: var(--is); }
.x17-slut .lank { margin-top: 20px; }

@media (max-width: 1000px) {
  .x17-huvud > div, .x17-huvud .t-ingress { grid-column: 1 / -1; }
  .x17-forkl, .x17-slut { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .x17-diagram { height: 440px; margin-top: 44px; }
  .x17-el { margin-top: 36px; height: 116px; }
  .x17-branslen button { height: 40px; margin-bottom: 6px; font-size: 1.0625rem; gap: 10px; }
  .x17-elnamn { height: 40px; font-size: 1.0625rem; gap: 10px; }
  .x17-nodtext { transform: none; text-align: left; width: 200px; }
  .x17-nodtext b { font-size: .9375rem; }
  .x17-varmeord { transform: translate(calc(-100% - 12px), -100%); }   /* till vänster om linjen: håller sig innanför marginalen */
  .x17-forkl { min-height: 150px; }
  .x17-forkl h3 { font-size: 1.375rem; }
  .x17-forkl p, .x17-slut p { font-size: 1rem; }
}