/* Defencir · delad stilmall för undersidor */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --paper:#F6F5F2; --ink:#030032; --ink-70:#3A3860; --ink-45:#767490;
  --line:#DEDBD4; --line-soft:#E8E5DF; --moss:#3B5546; --panel:#EFEDE8;
  --varning:#A82A1E; --platta:#06041F; --kort:#0A0728;
  --st-g:#1F7048; --st-a:#B07D0A; --st-r:#A82A1E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#030032; --ink:#E9E8EF; --ink-70:#BDBBD2; --ink-45:#908EAF;
    --line:#1E1B4E; --line-soft:#141141; --moss:#8FAD9B; --panel:#0A0733;
    --varning:#D9695C; --platta:#06041F; --kort:#0E0A47;
    --st-g:#5FA97F; --st-a:#D6A63C; --st-r:#D9695C;
  }
}
:root[data-theme="dark"] {
  --paper:#030032; --ink:#E9E8EF; --ink-70:#BDBBD2; --ink-45:#908EAF;
  --line:#1E1B4E; --line-soft:#141141; --moss:#8FAD9B; --panel:#0A0733;
  --varning:#D9695C; --platta:#06041F; --kort:#0E0A47;
    --st-g:#5FA97F; --st-a:#D6A63C; --st-r:#D9695C;
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.shell { max-width: 1120px; margin: 0 auto; padding: 0 48px; }
a { color: inherit; }
a:focus-visible { outline: 1px solid var(--moss); outline-offset: 3px; }

/* ---------- topp ---------- */
.topp { border-bottom: 1px solid var(--line); background: var(--paper); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand svg { display: block; color: var(--ink); }
.brand .wm { font-family: "Source Serif 4", Georgia, serif; font-size: 18px; letter-spacing: .015em; }
.topp nav { display: flex; gap: 22px; flex-wrap: wrap; }
.topp nav a {
  font-size: 13.5px; color: var(--ink-70); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.topp nav a:hover, .topp nav a.har { color: var(--ink); border-bottom-color: var(--moss); }

/* ---------- brödsmulor ---------- */
.smulor { padding: 22px 0 0; font-size: 12.5px; color: var(--ink-45); }
.smulor a { text-decoration: none; }
.smulor a:hover { color: var(--ink); }
.smulor span { margin: 0 7px; }

/* ---------- typografi ---------- */
.lbl {
  font-size: 11px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--moss); display: block; margin-bottom: 16px;
}
h1 {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 5.4vw, 54px); line-height: 1.08; letter-spacing: -.015em;
  text-wrap: balance; max-width: 22ch;
}
h2 {
  font-family: "Source Serif 4", Georgia, serif; font-weight: 400;
  font-size: clamp(23px, 2.8vw, 30px); line-height: 1.2; margin: 0 0 14px;
  padding-top: 30px; border-top: 1px solid var(--line); letter-spacing: -.01em;
}
h3 { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; font-size: 19px; margin: 0 0 6px; }
p { margin: 0 0 16px; color: var(--ink-70); max-width: 68ch; }
p strong, li strong { color: var(--ink); font-weight: 600; }
.ing { font-size: 19px; line-height: 1.6; color: var(--ink-70); max-width: 62ch; margin-top: 22px; }

.hero { padding: 54px 0 12px; }
.avsnitt { padding: 44px 0 6px; }
main { padding-bottom: 20px; }

ul.punkter { list-style: none; margin: 0 0 20px; padding: 0; max-width: 68ch; }
ul.punkter li { position: relative; padding: 0 0 12px 22px; color: var(--ink-70); }
ul.punkter li::before {
  content: "—"; position: absolute; left: 0; top: 0; color: var(--moss);
}

/* ---------- rutor ---------- */
.ruta { background: var(--panel); padding: 24px 28px; margin: 6px 0 24px; border-left: 2px solid var(--moss); }
.ruta p:last-child { margin-bottom: 0; }
.ruta.varn { border-left-color: var(--varning); }

.fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0 26px; }
.fakta > div { padding: 18px 22px 20px 0; }
.fakta > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.fakta dt { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-45); }
.fakta dd { margin: 8px 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: 22px; line-height: 1.15; }
.fakta p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; }

.steg { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 26px; margin: 8px 0 26px; }
.steg > div { border-top: 2px solid var(--moss); padding-top: 14px; }
.steg .n { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.steg p { font-size: 14px; line-height: 1.55; margin: 6px 0 0; }

table { width: 100%; border-collapse: collapse; margin: 8px 0 26px; font-size: 14.5px; }
thead th {
  text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-45); font-weight: 600; padding: 0 16px 10px 0; border-bottom: 1px solid var(--line);
}
tbody td { padding: 13px 16px 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-70); vertical-align: top; }
tbody td:first-child { color: var(--ink); }

/* ---------- avslut ---------- */
.cta { margin: 40px 0 10px; padding: 34px 0 0; border-top: 2px solid var(--moss); }
.cta h2 { border: 0; padding: 0; }
.btn {
  display: inline-block; padding: 13px 24px; border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; font-size: 15px; margin-top: 8px;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }

.vidare { margin: 46px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.vidare .lbl { margin-bottom: 14px; }
.vidare ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px 28px; }
.vidare a { text-decoration: none; display: block; border-top: 1px solid var(--line); padding-top: 12px; }
.vidare a:hover .t { border-bottom-color: var(--moss); }
.vidare .t { font-family: "Source Serif 4", Georgia, serif; font-size: 17px; border-bottom: 1px solid transparent; }
.vidare .d { display: block; font-size: 13px; color: var(--ink-45); margin-top: 3px; }

footer {
  margin-top: 56px; padding: 40px 0 54px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-45);
}
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ---------- sidkarta ---------- */
.karta { list-style: none; margin: 4px 0 26px; padding: 0; }
.karta li { border-top: 1px solid var(--line); }
.karta li:last-child { border-bottom: 1px solid var(--line); }
.karta a {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 5px 24px; align-items: baseline; text-decoration: none; padding: 17px 0 19px;
}
.karta .t { font-family: "Source Serif 4", Georgia, serif; font-size: 19px; color: var(--ink);
  border-bottom: 1px solid transparent; }
.karta .u { grid-column: 2; grid-row: 1; font-size: 12.5px; color: var(--ink-45); white-space: nowrap; }
.karta .d { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: var(--ink-70); max-width: 66ch; }
.karta .s { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--moss); margin-bottom: 5px; }
.karta a:hover .t { border-bottom-color: var(--moss); }
@media (max-width: 760px) {
  .karta a { grid-template-columns: 1fr; }
  .karta .u { display: none; }
}

/* ---------- bild ---------- */
.bild { margin: 10px 0 26px; }
.bild img { display: block; width: 100%; height: auto; filter: saturate(.55) contrast(1.04) brightness(.93); }
.bild figcaption { margin-top: 9px; font-size: 12.5px; color: var(--ink-45); }

/* ---------- scenariolista ---------- */
.scenlista { margin: 8px 0 22px; }
.scenrad { border-top: 1px solid var(--line); padding: 16px 0 17px; }
.scenlista .scenrad:last-child { border-bottom: 1px solid var(--line); }
.scenrad-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.scenrad-hd h3 { margin: 0; }
.scenrad-typ {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--moss); white-space: nowrap;
}
.scenrad p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.58; max-width: 70ch; }

/* ---------- förmågeprofilen ---------- */
.profil-grid {
  margin: 14px 0 26px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0 48px; align-items: center;
}
  .profil-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 0 56px;
    align-items: center;
  }
  .radar { display: block; width: 100%; height: auto; overflow: visible; }
  .radar .net { fill: none; stroke: var(--line); stroke-width: 1; }
  .radar .prof { fill: var(--ink); fill-opacity: 0.07; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
  .radar .dot { stroke: var(--paper); stroke-width: 1.5; transition: r 200ms ease; }
  .radar .d-g { fill: var(--st-g); }
  .radar .d-a { fill: var(--st-a); }
  .radar .d-r { fill: var(--st-r); }
  .radar .lbl-r {
    font-family: inherit;
    font-size: 10.5px;
    fill: var(--ink-45);
    letter-spacing: 0.01em;
    transition: fill 200ms ease;
  }
  /* kilen som fylls ut mot den förmåga man pekar på */
  .radar .kil {
    fill: #7FA890;
    fill-opacity: 0;
    transform: scale(0.06);
    transform-origin: 260px 198px;
    transform-box: view-box;
    transition: transform 420ms cubic-bezier(.22,.7,.3,1), fill-opacity 300ms ease;
    pointer-events: none;
  }
  .radar .traff { fill: transparent; cursor: pointer; }
  .radar .eker { transition: stroke 200ms ease; }
  .radar.pa .kil.pa { fill-opacity: 0.42; transform: scale(1); }
  .radar.pa .eker.pa { stroke: var(--moss); }
  .radar.pa .lbl-r.pa { fill: var(--ink); }
  .radar.pa .dot.pa { r: 6.5; }
  @media (prefers-reduced-motion: reduce) {
    .radar .kil { transition: fill-opacity 1ms linear; transform: scale(1); }
  }
  .profil-txt p { margin-top: 18px; color: var(--ink-70); font-size: 15.5px; line-height: 1.62; max-width: 42ch; }
  .avlas {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    min-height: 76px;
  }
  .avlas .namn { display: block; font-size: 17px; font-family: "Source Serif 4", Georgia, serif; }
  .avlas .grad { display: block; margin-top: 6px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
  .avlas .grad[data-g="g"] { color: var(--st-g); }
  .avlas .grad[data-g="a"] { color: var(--st-a); }
  .avlas .grad[data-g="r"] { color: var(--st-r); }
  .avlas .vila { font-size: 14px; color: var(--ink-45); }

  /* kommentaren finns, men bara i rapporten */
  .profil-txt .sudd {
    margin-top: 18px;
    filter: blur(5px);
    opacity: 0.45;
    user-select: none;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 34%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 34%, transparent 100%);
  }
  .profil-txt .sudd p { font-size: 14px; line-height: 1.5; color: var(--ink-70); margin: 0 0 6px; max-width: 40ch; }
  .profil-txt .sudd-not { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--ink-45); max-width: 40ch; }

@media (max-width: 760px) {
  .profil-grid { grid-template-columns: 1fr; gap: 26px; }
  .scenrad-hd { flex-direction: column; gap: 4px; }
}

.vidare.kravfot { margin-top: 30px; }
.vidare.kravfot .lbl { color: var(--ink-45); }

/* ---------- kedja ---------- */
.kedja {
  list-style: none; margin: 18px 0 28px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
}
.kedja li { display: flex; align-items: center; color: var(--ink); font-size: 15.5px; }
.kedja li::after {
  content: "\2192"; color: var(--moss); margin: 0 16px; font-size: 15px;
}
.kedja li:last-child::after { content: none; }
.kedja li:last-child { color: var(--moss); }

.led { font-size: 17px; color: var(--ink); margin-bottom: 14px; }

@media (max-width: 560px) {
  .kedja { flex-direction: column; align-items: flex-start; gap: 0; }
  .kedja li { flex-direction: column; align-items: flex-start; }
  .kedja li::after { content: "\2193"; margin: 3px 0 3px 2px; }
}

/* ---------- lodrat floede ---------- */
.kedja.lodrat { flex-direction: column; align-items: flex-start; gap: 0; }
.kedja.lodrat li { flex-direction: column; align-items: flex-start; }
.kedja.lodrat li::after { content: "\2193"; margin: 5px 0 5px 2px; }

.kedja li:last-child::after { content: none !important; }

.pillista { list-style: none; margin: 20px 0 0; padding: 0; }
.pillista li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0; font-size: 15.5px; color: var(--ink);
}
.pillista li::before { content: "\2192"; color: var(--moss); }

/* ---------- forskjuten rubrikrad ---------- */
.splitrad {
  display: grid; grid-template-columns: minmax(150px, 3fr) minmax(0, 7fr);
  gap: 0 40px; align-items: start;
}
.splitrad .lbl { margin: 6px 0 0; }
.splitrad h2 { border-top: 0; padding-top: 0; }

/* ---------- bild bredvid lista ---------- */
.kat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
       gap: 0 40px; align-items: stretch; margin-top: 28px; }
.kat-bild { margin: 0; border-radius: 14px; overflow: hidden; min-height: 100%; }
.kat-bild img { display: block; width: 100%; height: 100%; object-fit: cover;
                filter: saturate(.55) contrast(1.04) brightness(.96); }
.kat-hgr { min-width: 0; }
.kat-hgr h2 { border-top: 0; padding-top: 0; margin-top: -6px; }
.kat-hgr .lev { margin-top: 14px; }
.kat-hgr .scenlista { margin-top: 0; }

/* raden man pekar pa lyfts fram */
.scenlista .scenrad { position: relative; padding-left: 0;
  transition: opacity 260ms ease, padding-left 260ms ease; }
.scenlista .scenrad::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px;
  background: var(--moss); opacity: 0; transition: opacity 260ms ease;
}
.scenlista:hover .scenrad { opacity: .45; }
.scenlista .scenrad:hover { opacity: 1; padding-left: 18px; }
.scenlista .scenrad:hover::before { opacity: 1; }

@media (max-width: 820px) {
  .splitrad { grid-template-columns: 1fr; gap: 10px; }
  .splitrad .lbl { margin: 0; }
  .kat { grid-template-columns: 1fr; gap: 24px; }
  .kat-bild { aspect-ratio: 3 / 2; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scenlista .scenrad, .scenlista .scenrad::before { transition: none; }
}

/* ---------- erbjudandelista ---------- */
.scenlista.erbjud { border-top: 2px solid var(--moss); margin-top: 14px; }
.scenlista.erbjud .scenrad { padding: 19px 0 21px; }
.scenlista.erbjud .scenrad:first-child { border-top: 0; }
.scenlista.erbjud .scenrad h3 { font-size: 22px; }
.scenlista.erbjud .scenrad-typ {
  font-size: 12px; letter-spacing: .1em; color: var(--moss);
}
.scenlista.erbjud .scenrad p { font-size: 15px; margin-top: 8px; }
.led { font-size: 17px; color: var(--ink); margin-bottom: 4px; }

/* ---------- fragekort ---------- */
.fragor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 14px; margin: 18px 0 28px; }
.fk { border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px 28px;
      transition: border-color 280ms ease; }
.fk:hover { border-color: var(--moss); }
.fk .n { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
         color: var(--moss); margin-bottom: 14px; }
.fk h3 { font-size: 19px; line-height: 1.25; margin: 0 0 9px; }
.fk p { font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ---------- leveranslista ---------- */
.lev { list-style: none; margin: 16px 0 26px; padding: 0; max-width: 62ch; }
.lev li { display: flex; gap: 16px; align-items: flex-start;
          padding: 13px 0 14px; border-top: 1px solid var(--line-soft); font-size: 15.5px; }
.lev li:last-child { border-bottom: 1px solid var(--line-soft); }
.lev svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px; overflow: visible; }
.lev .ring { fill: none; stroke: var(--line); stroke-width: 1.8; }
.lev .bock { fill: none; stroke: var(--moss); stroke-width: 2.4;
             stroke-linecap: round; stroke-linejoin: round;
             stroke-dasharray: 16; stroke-dashoffset: 16; opacity: 0; }
@keyframes levbock {
  0%   { stroke-dashoffset: 16; opacity: 0; }
  4%   { stroke-dashoffset: 16; opacity: 1; }
  16%  { stroke-dashoffset: 0;  opacity: 1; }
  86%  { stroke-dashoffset: 0;  opacity: 1; }
  94%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.lev:hover li:nth-child(1) .bock { animation: levbock 5s linear infinite; }
.lev:hover li:nth-child(2) .bock { animation: levbock 5s linear .35s infinite; }
.lev:hover li:nth-child(3) .bock { animation: levbock 5s linear .70s infinite; }
.lev:hover li:nth-child(4) .bock { animation: levbock 5s linear 1.05s infinite; }
.lev:hover li:nth-child(5) .bock { animation: levbock 5s linear 1.40s infinite; }
.lev:hover li:nth-child(6) .bock { animation: levbock 5s linear 1.75s infinite; }
.lev:hover .ring { stroke: var(--moss); transition: stroke 400ms ease; }

@media (max-width: 820px) { .fragor { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .lev:hover .bock { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
}

/* ---------- sa kanns ett pass ---------- */
.pass { margin: 20px 0 26px; }
.pass-spar { position: relative; height: 2px; background: var(--line); margin-bottom: 18px; }
.pass-spar i { position: absolute; top: -4px; width: 2px; height: 10px; background: var(--line); }

.pass ol { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
           gap: 0 16px; margin: 0; padding: 0; }
.pass .kl { display: block; font-size: 10.5px; letter-spacing: .12em; color: var(--ink-45); }
.pass .et { display: block; margin-top: 6px; font-family: "Source Serif 4", Georgia, serif;
            font-size: 17px; line-height: 1.2; color: var(--ink-45); transition: color 400ms ease; }
.pass .rp { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--ink-45);
            transition: color 400ms ease; }
@keyframes passtand {
  0%   { color: var(--ink); }
  17%  { color: var(--ink); }
  19%  { color: var(--ink-45); }
  100% { color: var(--ink-45); }
}
.pass:hover li:nth-child(1) .et, .pass:hover li:nth-child(1) .rp { animation: passtand 6s linear      infinite; }
.pass:hover li:nth-child(2) .et, .pass:hover li:nth-child(2) .rp { animation: passtand 6s linear 1.2s infinite; }
.pass:hover li:nth-child(3) .et, .pass:hover li:nth-child(3) .rp { animation: passtand 6s linear 2.4s infinite; }
.pass:hover li:nth-child(4) .et, .pass:hover li:nth-child(4) .rp { animation: passtand 6s linear 3.6s infinite; }
.pass:hover li:nth-child(5) .et, .pass:hover li:nth-child(5) .rp { animation: passtand 6s linear 4.8s infinite; }

@media (max-width: 760px) {
  .pass ol { grid-template-columns: 1fr; gap: 0; }
  .pass li { border-top: 1px solid var(--line-soft); padding: 12px 0; }
  .pass-spar { display: none; }
  .pass .et, .pass .rp { color: var(--ink-70); }
}
@media (prefers-reduced-motion: reduce) {
  .pass:hover .et, .pass:hover .rp { animation: none; }
}

/* ---------- bla sektion ---------- */
.avsnitt.blatt {
  background: var(--kort);
  border-radius: 22px;
  padding: 40px clamp(24px, 3vw, 44px) 46px;
  margin: 34px 0 10px;
  --orange: #E8913F;
}
.avsnitt.blatt h2 { border-top: 0; padding-top: 0; color: #FFFFFF; }
.avsnitt.blatt .kurs { margin-top: 26px; }
.avsnitt.blatt .kurs-kort { border-color: rgba(255,255,255,0.12); }
.avsnitt.blatt .kurs-kort[aria-pressed="true"] { border-color: var(--orange); }
.avsnitt.blatt .kurs-kort[aria-pressed="true"] .kurs-pil { background: var(--orange); color: #12100A; }
.avsnitt.blatt .kurs-rub { color: #FFFFFF; }
.avsnitt.blatt .kurs-panel .und { color: rgba(255,255,255,0.55); }
.avsnitt.blatt .kurs-panel .lbl { color: var(--orange); }
.avsnitt.blatt .kurs-panel li { border-top-color: rgba(255,255,255,0.14); }
.avsnitt.blatt .kurs-panel li:last-child { border-bottom-color: rgba(255,255,255,0.14); }
.avsnitt.blatt .kurs-panel .nm { color: #FFFFFF; }
.avsnitt.blatt .kurs-panel .tid { color: rgba(255,255,255,0.5); }
.avsnitt.blatt .kurs-panel .be { color: rgba(255,255,255,0.62); }

/* sista raden: anpassad utbildning */
.kurs-panel li.anpassad { border-top: 1px solid var(--orange) !important; }
.kurs-panel li.anpassad:last-child { border-bottom: 1px solid var(--orange) !important; }
.kurs-panel li.anpassad a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  text-decoration: none; color: var(--orange);
  font-family: "Source Serif 4", Georgia, serif; font-size: 17px;
  transition: gap 260ms cubic-bezier(.22,.7,.3,1);
}
.kurs-panel li.anpassad a:hover { gap: 22px; }
.kurs-panel li.anpassad .pil { font-size: 15px; }

@media (max-width: 760px) { .avsnitt.blatt { border-radius: 16px; padding: 30px 20px 34px; } }
@media (prefers-reduced-motion: reduce) { .kurs-panel li.anpassad a { transition: none; } }

.pass.sex ol { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0 12px; }
.pass.sex .et { font-size: 16px; }
.pass.sex .rp { font-size: 12.5px; }
.pass.sex:hover li:nth-child(6) .et, .pass.sex:hover li:nth-child(6) .rp {
  animation: passtand 6s linear 5s infinite; }
@media (max-width: 900px) { .pass.sex ol { grid-template-columns: 1fr; } }

/* ---------- kursrad: kort i sidscroll (utbildning) ---------- */
/* Defencir · testkomponent: kurskort i rad (SEB-anatomi) */
.kr-topp{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:-4px 0 26px;border-bottom:1px solid var(--line)}
.kr-flikar{display:flex;gap:26px}
.kr-flikar button{appearance:none;background:none;border:0;padding:0 0 12px;margin-bottom:-1px;
  font:500 .95rem/1.2 Archivo,system-ui,sans-serif;letter-spacing:.01em;color:var(--ink-45);
  border-bottom:2px solid transparent;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.kr-flikar button:hover{color:var(--ink-70)}
.kr-flikar button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--moss)}
.kr-styr{display:flex;gap:8px;padding-bottom:9px}
.kr-styr button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:transparent;cursor:pointer;position:relative;transition:border-color .2s ease,opacity .2s ease}
.kr-styr button:hover{border-color:var(--moss)}
.kr-styr button[disabled]{opacity:.3;cursor:default;border-color:var(--line)}
.kr-styr span{position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-top:1.5px solid var(--ink-70);border-right:1.5px solid var(--ink-70)}
.kr-bak span{transform:translate(-40%,-50%) rotate(-135deg)}
.kr-fram span{transform:translate(-60%,-50%) rotate(45deg)}
.kr-rad[hidden]{display:none}
.kr-rad{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;margin:0 -2px;padding-left:2px;padding-right:2px}
.kr-rad::-webkit-scrollbar{display:none}
.kk{flex:0 0 calc((100% - 2 * 28px) / 3.3);min-width:0;scroll-snap-align:start}
/* tre kort eller faerre: fyll bredden i staellet foer att scrolla */
.kr-rad:not(:has(.kk:nth-child(4))) .kk{flex:1 1 0}
@media (max-width:900px){.kr-rad{gap:20px}.kk{flex-basis:calc((100% - 20px) / 2.2)}}
@media (max-width:620px){.kk{flex-basis:82%}}
@media (max-width:620px){
  .kr-styr{display:none}
  .kr-topp{gap:0}
  .kr-flikar{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;max-width:100%}
  .kr-flikar::-webkit-scrollbar{display:none}
  .kr-flikar button{white-space:nowrap;flex:0 0 auto}
}
.kk-yta,.kk-anp a{display:block;width:100%;text-align:left;appearance:none;background:none;border:0;padding:0;
  cursor:pointer;color:inherit;text-decoration:none}
.kk-bild{display:block;overflow:hidden;border-radius:14px;background:var(--panel);aspect-ratio:3/2}
.kk-bild img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.62) contrast(1.03) brightness(.94);
  transition:transform 1200ms cubic-bezier(.16,.66,.28,1),filter .4s ease}
.kk-yta:hover .kk-bild img,.kk-anp a:hover .kk-bild img{transform:scale(1.06);filter:saturate(.75) contrast(1.03) brightness(1)}
.kk-meta{display:block;margin:16px 0 7px;font:500 .68rem/1 Archivo,system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.kk-rub{display:block;margin:0;font:400 1.22rem/1.3 "Source Serif 4",Georgia,serif;color:var(--ink);
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  transition:text-decoration-color .25s ease}
.kk-yta:hover .kk-rub,.kk-anp a:hover .kk-rub{text-decoration-color:var(--moss)}
.kk-sam{display:block;margin-top:8px;font:400 .9rem/1.55 Archivo,system-ui,sans-serif;color:var(--ink-70)}
.kk-pil{display:block;margin-top:14px;width:22px;height:10px;position:relative;transition:transform .3s ease}
.kk-pil::before{content:"";position:absolute;left:0;top:4px;width:22px;height:1.5px;background:var(--moss)}
.kk-pil::after{content:"";position:absolute;right:0;top:0;width:8px;height:8px;
  border-top:1.5px solid var(--moss);border-right:1.5px solid var(--moss);transform:rotate(45deg)}
.kk-yta:hover .kk-pil,.kk-anp a:hover .kk-pil{transform:translateX(6px)}
.kk-yta[aria-expanded="true"] .kk-pil{transform:rotate(90deg)}
.kk-mer{display:none}
.kr-detalj{margin-top:34px;padding:30px 34px 32px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.kr-detalj[hidden]{display:none}
.kr-detalj h3{margin:0 0 14px;font:400 1.4rem/1.3 "Source Serif 4",Georgia,serif;color:var(--ink)}
.kr-detalj .kr-kropp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px 46px;align-items:start}
@media (max-width:760px){.kr-detalj{padding:24px 22px 26px}.kr-detalj .kr-kropp{grid-template-columns:1fr;gap:20px}}
.kr-detalj p{margin:0;font:400 .9rem/1.6 Archivo,system-ui,sans-serif;color:var(--ink-70)}
.kr-detalj .lbl{display:block;margin-bottom:11px}
.kr-detalj ul{list-style:none;margin:0;padding:0}
.kr-detalj li{position:relative;padding-left:20px;margin-bottom:10px;
  font:400 .9rem/1.55 Archivo,system-ui,sans-serif;color:var(--ink-70)}
.kr-detalj li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:1.5px;background:var(--st-lg)}
.kr-detalj li:last-child{margin-bottom:0}
.kk-yta[aria-expanded="true"] .kk-bild{outline:2px solid var(--moss);outline-offset:3px}
.kk-anp .kk-tom{display:flex;align-items:center;justify-content:center;border:1px solid var(--moss);
  background:transparent}
.kk-anp .kk-tom{color:var(--moss)}
.kk-anp .kk-tom svg{opacity:.55}
.kk-anp a:hover .kk-tom{background:rgba(59,85,70,.06)}
/* statiska kort (utan detaljpanel) */
.kk-stat{display:block}
.kk-stat .kk-bild img{transition:filter .4s ease}
.kk-stat:hover .kk-bild img{filter:saturate(.75) contrast(1.03) brightness(1)}
.kr-knapp{display:flex;align-items:center;justify-content:space-between;gap:40px;
  margin-top:34px;padding:22px 28px;border-radius:14px;text-decoration:none;
  background:var(--platta);color:var(--paper);
  font:500 1rem/1.3 Archivo,system-ui,sans-serif;letter-spacing:.01em;
  transition:background-color .25s ease}
.kr-knapp:hover{background:var(--ink)}
.kr-knapp-pil{flex:0 0 auto;position:relative;width:26px;height:12px;transition:transform .3s ease}
.kr-knapp-pil::before{content:"";position:absolute;left:0;top:5px;width:26px;height:1.5px;background:currentColor}
.kr-knapp-pil::after{content:"";position:absolute;right:0;top:1px;width:9px;height:9px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.kr-knapp:hover .kr-knapp-pil{transform:translateX(6px)}
:root[data-theme="dark"] .kr-knapp{background:var(--kort);color:var(--ink);border:1px solid rgba(255,255,255,.18)}
:root[data-theme="dark"] .kr-knapp:hover{background:var(--panel)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kr-knapp{background:var(--kort);color:var(--ink);border:1px solid rgba(255,255,255,.18)}
:root:not([data-theme="light"]) .kr-knapp:hover{background:var(--panel)}}
@media (prefers-reduced-motion:reduce){.kk-bild img,.kk-pil,.kr-rad{transition:none;scroll-behavior:auto}}

/* ---------- rubrikikon ---------- */
.rubrikikon { border-top: 1px solid var(--line); padding-top: 30px; margin-bottom: 16px; }
.rubrikikon-svg { display: block; width: 46px; height: 46px; color: var(--moss); }
.rubrikikon + h2 { border-top: 0; padding-top: 0; }
@media (max-width: 620px) { .rubrikikon-svg { width: 38px; height: 38px; } }

/* ---------- Spotify-knappar ---------- */
.spot-knapp {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
  padding: 12px 24px 12px 18px; border-radius: 999px; text-decoration: none;
  background: #1DB954; color: #06281A;
  font-family: Archivo, system-ui, sans-serif; font-size: 15px; font-weight: 500;
  transition: background-color 200ms ease;
}
.spot-knapp:hover, .spot-knapp:focus-visible { background: #1ED760; }
.spot-mark { flex: 0 0 22px; width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) { .spot-knapp { transition: none; } }

/* ---------- flikrad ---------- */
.flikrad {
  display: flex; flex-direction: row; gap: 34px;
  margin: 8px 0 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.flikrad::-webkit-scrollbar { display: none; }
.flikrad .tab {
  appearance: none; background: none; border: 0; padding: 0 0 14px;
  font-family: "Source Serif 4", Georgia, serif; font-size: 17px; line-height: 1.35;
  color: var(--ink-45); cursor: pointer; position: relative; white-space: nowrap;
  transition: color 200ms ease;
}
.flikrad .tab::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--moss); transform: scaleX(0); transform-origin: left;
  transition: transform 300ms cubic-bezier(.22,.61,.36,1);
}
.flikrad .tab[aria-selected="true"]::before { transform: scaleX(1); }
.flikrad .tab:hover { color: var(--ink-70); }
.flikrad .tab[aria-selected="true"] { color: var(--ink); }
.flikrad .tab:focus-visible { outline: 1px solid var(--moss); outline-offset: 3px; }
.flikytor { margin-top: 28px; }
.flikytor > [hidden] { display: none; }

/* ---------- passvyn ---------- */
.passvy {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 18px; background: var(--platta);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
}
.passvy-txt { padding: 44px 42px 42px; color: #FFFFFF; position: relative; z-index: 2; }
.passvy-txt .lbl { color: rgba(255,255,255,0.55); }
.passvy-txt h3 { color: #FFFFFF; font-size: clamp(24px, 3vw, 32px); margin: 14px 0 0; }
.passvy-txt .ing {
  margin-top: 18px; font-size: 15.5px; line-height: 1.62;
  color: rgba(255,255,255,0.80); max-width: 46ch;
}
.faser { margin-top: 30px; border-left: 1px solid var(--st-lg); padding-left: 18px; }
.faser .lbl { color: var(--st-lg); margin-bottom: 12px; }
.faser dl { margin: 0; }
.faser dt { font-size: 14.5px; color: rgba(255,255,255,0.94); padding: 9px 0 0; }
.faser dd {
  margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.52);
  text-align: left; max-width: 46ch;
}
.passvy-media { position: relative; min-height: 320px; }
.passvy-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(.62) contrast(1.04) brightness(.80);
}
.passvy-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(6,4,31,1) 0%, rgba(6,4,31,0.98) 12%, rgba(6,4,31,0.74) 30%,
    rgba(6,4,31,0.32) 52%, rgba(6,4,31,0.06) 78%, rgba(6,4,31,0) 100%);
}

@media (max-width: 860px) {
  .passvy { grid-template-columns: 1fr; border-radius: 14px; }
  .passvy-txt { padding: 30px 24px 32px; order: 2; }
  .passvy-media { order: 1; min-height: 0; aspect-ratio: 16/9; }
  .passvy-media::after { background: linear-gradient(to bottom,
    rgba(6,4,31,0) 0%, rgba(6,4,31,0.35) 60%, rgba(6,4,31,1) 100%); }
}

@media (max-width: 760px) {
  .shell { padding: 0 20px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .topp nav { gap: 14px; }
  .fakta > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .fakta > div { padding: 16px 0; }
  table { display: block; overflow-x: auto; }
}

/* ---------- 404 ---------- */
.fel-lankar { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 28px 0 10px; }
.fel-lankar a {
  display: inline-block; padding: 9px 16px; font-size: 14.5px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 2px; color: var(--ink-70);
}
.fel-lankar a:hover { border-color: var(--moss); color: var(--ink); }


/* ---------- mobil: läsbarhet och tryckytor ---------- */
@media (max-width: 560px) {
  /* versaletiketter under 12px blir svårlästa på telefon */
  .lbl, .kk-meta, .fakta dt, .karta .s, .fk .n, .pass .kl, .steg .n, .fk .n, th { font-size: 12px; letter-spacing: .12em; }
  /* kontaktlänkarna i foten är den viktigaste vägen vidare på mobil */
  footer a { display: inline-block; padding: 7px 0; }
  footer { gap: 10px 18px; }
  /* brödsmulan var 14 px hög */
  .smulor a { display: inline-block; padding: 5px 0; }
  .topp nav a { padding-top: 3px; padding-bottom: 5px; }
}