/* e04-fyll-pa-stang-starta.html – lyft ur startsektionerna med kalla/sx_in.py (ändra i källan och kör om) */
.e04 { position: relative; padding: var(--sektion) 0; }
.e04-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: center; }
.e04-text { grid-column: 1 / span 5; }
.e04-text .t-etikett { margin-bottom: 28px; }
.e04-text h2 { font-weight: 260; }
.e04-text .t-ingress { margin-top: 26px; max-width: 32ch; }
.e04-fakta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spalt); margin-top: clamp(36px, 3.4vw, 52px); border-top: 1px solid var(--linje); }
.e04-fakta > div { padding: 16px 0 18px; border-bottom: 1px solid var(--linje); }
.e04-fakta dt { font-size: .6875rem; line-height: 1.3; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.e04-fakta dd { margin-top: 8px; font-size: 1.25rem; line-height: 1.25; font-weight: 300; font-variation-settings: "opsz" 28; font-variant-numeric: tabular-nums; color: var(--is); }
.e04-fakta dd small { display: block; margin-top: 4px; font-size: .875rem; font-weight: 360; color: var(--is-3); }
.e04-lankar { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
.e04-lankar .lank small { font-size: .9375rem; font-weight: 360; color: var(--is-3); margin-left: -4px; }

/* ---------- scenen ---------- */
.e04-hoger { grid-column: 6 / -1; display: flex; flex-direction: column; align-items: center; }
.e04-scen { position: relative; width: min(100%, 620px, calc((var(--vh) * 100 - 230px) * .9333)); aspect-ratio: 560 / 600; }
.e04-scen svg, .e04-scen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.e04-scen canvas { pointer-events: none; }
.e04-svg { overflow: visible; }
.e04-svg .l { fill: none; stroke: rgba(180, 206, 236, .64); stroke-width: var(--sw, 1.1); stroke-linecap: round; stroke-linejoin: round; }
.e04-svg .l2 { stroke: rgba(212, 226, 243, .84); }
.e04-svg .l3 { stroke: rgba(170, 196, 228, .34); }
.e04-svg .fy { fill: rgba(14, 28, 56, .35); }
.e04-svg .mark { fill: rgba(180, 206, 236, .5); stroke: none; }
/* introt: ritas med stroke-dashoffset (pathLength = 1) */
.js .e04-svg .rit { stroke-dasharray: 1 1.02; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) var(--d, 0s); }
.js .e04.ritad .e04-svg .rit { stroke-dashoffset: 0; }
.e04-svg .e04-lampa { fill: rgba(4, 10, 24, 1); stroke: rgba(180, 206, 236, .64); transition: fill .5s ease, stroke .5s ease; }
.e04-svg .e04-lampa-sken { fill: url(#e04-sken); opacity: 0; transition: opacity .6s ease; }
.e04.lampa-pa .e04-svg .e04-lampa { fill: var(--bla); stroke: var(--bla); }
.e04.lampa-pa .e04-svg .e04-lampa-sken { opacity: 1; }
.e04-svg .e04-signal { fill: none; stroke: var(--bla); stroke-width: var(--sw, 1.1); stroke-dasharray: .03 .025; stroke-dashoffset: 0; opacity: 0; transition: opacity .4s ease; }
.e04.signal .e04-svg .e04-signal { opacity: .9; animation: e04-signal 1.2s linear infinite; }
@keyframes e04-signal { to { stroke-dashoffset: -.11; } }
.e04-svg .e04-kontakt { fill: rgba(4, 10, 24, 1); stroke: rgba(180, 206, 236, .64); stroke-width: var(--sw, 1.1); transition: fill .5s ease, stroke .5s ease; }
.e04.lampa-pa .e04-svg .e04-kontakt { fill: var(--bla); stroke: var(--bla); }

/* etiketter i scenen (HTML, så att de är läsbara på mobilen) */
.e04-et { position: absolute; left: var(--x); top: var(--y); font-size: .75rem; line-height: 1.2; font-weight: 500; font-stretch: 85%; letter-spacing: .06em; color: var(--is-3); white-space: nowrap; pointer-events: none; }
.e04-et.c { transform: translate(-50%, -50%); }
.e04-stangt { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%) translateY(6px); display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
  background: rgba(4, 10, 24, .88); box-shadow: inset 0 0 0 1px rgba(0, 152, 212, .55); font-size: .75rem; font-weight: 500; color: var(--is); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .7s var(--ease); }
.e04-stangt i { width: 6px; height: 6px; border-radius: 50%; background: var(--bla); box-shadow: 0 0 8px rgba(0, 152, 212, .9); }
.e04.lampa-pa .e04-stangt { opacity: 1; transform: translate(-50%, -100%); }
/* tidsetiketten: stor, lätt siffra uppe till vänster i scenen */
.e04-tid { position: absolute; left: 2%; top: 4%; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .8s ease, transform 1s var(--ease); }
.e04-tid.syns { opacity: 1; transform: none; }
.e04-tid span { display: block; font-size: .6875rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.e04-tid b { display: block; margin-top: 8px; font-size: clamp(2.75rem, 1.6rem + 3vw, 4.75rem); line-height: .9; font-weight: 230; font-variation-settings: "opsz" 96; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--is); }
.e04-tid.kor b { color: var(--is); }

/* ---------- stegknapparna ---------- */
.e04-steg { display: flex; gap: 14px; justify-content: center; margin-top: 18px; width: 100%; }
.e04-knapp { position: relative; width: 180px; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-radius: 16px; text-align: left;
  box-shadow: inset 0 0 0 1px var(--linje-2); color: var(--is); opacity: .42; transition: opacity .5s ease, box-shadow .5s ease, background-color .5s ease; }
.e04-knapp .nr { font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--is-3); min-width: 14px; }
.e04-knapp .ord { font-size: 1.25rem; font-weight: 300; font-variation-settings: "opsz" 24; letter-spacing: -.01em; }
.e04-knapp .bock { display: none; width: 14px; height: 14px; color: var(--sval); }
.e04-knapp.klar .nr { display: none; }
.e04-knapp.klar .bock { display: block; }
.e04-knapp.klar { opacity: .62; }
.e04-knapp.nasta { opacity: 1; box-shadow: inset 0 0 0 1px var(--bla); cursor: pointer; }
.e04-knapp.nasta:hover { background: rgba(0, 152, 212, .08); }
.js .e04:not(.redo) .e04-knapp.nasta { box-shadow: inset 0 0 0 1px var(--linje-2); opacity: .75; }
.e04-knapp[aria-disabled="true"] { cursor: default; }
.e04-knapp.kor { opacity: 1; box-shadow: inset 0 0 0 1px var(--linje-2); }
.e04-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; }
.e04-ring rect { fill: none; stroke: var(--bla); stroke-width: 1.6; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0; transition: opacity .3s ease; }
.e04-knapp.kor .e04-ring rect { opacity: 1; }
.e04-knapp.kor { opacity: 1; }
.e04-mikro { min-height: 3em; margin-top: 16px; max-width: 46ch; text-align: center; text-wrap: balance; font-size: .875rem; line-height: 1.5; color: var(--is-3); transition: opacity .36s ease; }
.e04-mikro.ut { opacity: 0; }
.e04-mikro.e04-slut { color: var(--is-2); }
.e04-om { margin-top: 6px; height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--is-2); box-shadow: inset 0 0 0 1px var(--linje-2);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s, box-shadow .3s ease; }
.e04-om.syns { opacity: 1; visibility: visible; transition: opacity .5s ease, box-shadow .3s ease; }
.e04-om:hover { box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .6); }
.e04-om svg { width: 14px; height: 14px; color: var(--bla); }

html.visa-allt .e04 *, html.visa-allt .e04 *::before { transition: none !important; }

@media (max-width: 1100px) {
  .e04-text { grid-column: 1 / span 5; }
  .e04-hoger { grid-column: 6 / -1; }
  .e04-knapp { width: auto; flex: 1 1 0; }
}
@media (max-width: 760px) {
  .e04-rutnat { display: flex; flex-direction: column; align-items: stretch; }
  .e04-text { display: contents; }
  .e04-text > .t-etikett { order: 1; margin-bottom: 22px; }
  .e04-text > h2 { order: 2; }
  .e04-text > .t-ingress { order: 3; }
  .e04-hoger { order: 4; margin-top: 30px; }
  .e04-fakta { order: 5; }
  .e04-lankar { order: 6; }
  .e04-scen { width: 100%; }
  .e04-steg { gap: 8px; margin-top: 12px; }
  .e04-knapp { height: 56px; padding: 0 12px; gap: 9px; border-radius: 14px; }
  .e04-knapp .ord { font-size: 1.0625rem; }
  .e04-knapp .nr { font-size: .75rem; }
  .e04-mikro { font-size: .875rem; }
  .e04-fakta dd { font-size: 1.125rem; }
}