/* Didaktikstudion, gemensam stil */
:root{
  --navy:#13213A; --gold:#DA9A35; --gold-ink:#9A6512;
  --bg:#FFFFFF; --panel:#F3F5F8; --text:#13213A; --muted:#566175; --hair:#DCE1E8; --line:#13213A;
  --btn-bg:#13213A; --btn-text:#FFFFFF;
  --sans:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --wrap:1120px; --gutter:32px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1628; --panel:#15213A; --text:#E7ECF3; --muted:#9AA6BA; --hair:#26344F; --line:#E7ECF3; --gold-ink:#E3AE57;
  --btn-bg:#E7ECF3; --btn-text:#0D1628; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0D1628; --panel:#15213A; --text:#E7ECF3; --muted:#9AA6BA; --hair:#26344F; --line:#E7ECF3; --gold-ink:#E3AE57;
  --btn-bg:#E7ECF3; --btn-text:#0D1628; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.55;margin:0;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
a{color:inherit}
h1,h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.corner{display:inline-block;width:.62em;height:.78em;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}

/* header */
header.site{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--gutter);border-bottom:1px solid var(--hair)}
.logo{display:inline-flex;align-items:flex-end;text-decoration:none;color:var(--text);font-family:var(--sans);font-weight:400;font-size:27px;line-height:.74;letter-spacing:.005em}
.logo svg{height:.735em;width:auto;margin-right:.035em;display:block}
nav.main{display:flex;gap:28px;font-size:16px}
nav.main a{text-decoration:none;color:var(--muted);padding-block:4px;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--text)}
nav.main a[aria-current="page"],nav.main a[aria-current="true"]{color:var(--text);border-bottom-color:var(--gold)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:72px 64px}
.eyebrow{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:22px}
.hero h1{font-size:clamp(40px,5.4vw,66px);font-weight:500}
.hero h1 em{font-style:normal;color:var(--gold-ink)}
.hero .lead{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--muted);max-width:34em;margin-top:24px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn-bg);color:var(--btn-text);text-decoration:none;font-weight:500;font-size:16px;padding:13px 22px;border-radius:3px;border:1px solid var(--btn-bg);cursor:pointer;font-family:var(--sans)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn:hover{opacity:.9}
.heroimg{margin:0;position:relative}.heroimg img{display:block;width:100%;aspect-ratio:4/3.4;object-fit:cover;object-position:62% 30%}.heroimg .fr{position:relative;display:block}.heroimg .fr::after{content:'';position:absolute;left:0;bottom:0;width:64px;height:80px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}.heroimg figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.stack{position:relative;height:430px;isolation:isolate}
.stack img{position:absolute;z-index:1;width:62%;box-shadow:0 1px 2px rgba(19,33,58,.18),0 18px 40px -18px rgba(19,33,58,.35);background:#fff}
.stack .a{left:0;top:26px}
.stack .b{right:0;top:0;transform:rotate(2.2deg)}
.stack .gold{position:absolute;left:30%;bottom:-8px;width:150px;height:188px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%);z-index:0}

/* sections */
section.block{padding-block:64px}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sechead h2{font-size:34px;display:flex;align-items:baseline;gap:14px}
.sechead h2 .corner{font-size:22px}
.sechead p{color:var(--muted);max-width:30em}

/* lesson row */
.lesson{display:grid;grid-template-columns:260px 1fr;gap:40px;padding-block:28px;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.lesson .thumb{position:relative;display:block}
.lesson .thumb img{width:100%;display:block;border:1px solid var(--hair)}
.lesson .thumb::after{content:'';position:absolute;left:-1px;bottom:-1px;width:44px;height:55px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--muted)}
.meta b{font-weight:500;color:var(--text)}
.lesson h3{font-size:30px;margin:12px 0 10px}
.lesson .q{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.4;max-width:34em}
.lesson .desc{margin-top:14px;color:var(--muted);max-width:40em}
.lesson .go{margin-top:20px;font-weight:500;display:inline-flex;gap:8px;border-bottom:2px solid var(--gold);padding-bottom:2px}
.lesson:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.next{display:grid;grid-template-columns:260px 1fr;gap:40px;padding-block:24px;border-bottom:1px solid var(--hair);color:var(--muted)}
.next .ph{height:0;padding-bottom:0}
.next b{color:var(--text);font-weight:500}

/* principles */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.three h3{font-size:21px;margin-bottom:10px}
.three p{font-family:var(--serif);font-size:18px;color:var(--muted);line-height:1.5}
.three .n{font-size:14px;color:var(--gold-ink);font-weight:600;margin-bottom:12px;display:block}

/* library */
.library{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;background:var(--panel);padding:48px;border-radius:2px}
.library h2{font-size:34px}
.library p{font-family:var(--serif);font-size:19px;color:var(--muted);margin-top:16px}
.status{display:inline-block;font-size:13px;font-weight:500;color:var(--gold-ink);border:1px solid currentColor;padding:3px 10px;border-radius:2px;margin-bottom:18px}
.library ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.library li{padding:14px 0;border-bottom:1px solid var(--hair);display:flex;gap:14px}
.library li .corner{font-size:13px;margin-top:7px;flex:none}

/* lesson page */
.crumb{font-size:14px;color:var(--muted);padding-top:34px}
.crumb a{color:var(--muted)}
.lp-head{display:grid;grid-template-columns:1fr 340px;gap:56px;padding-block:28px 48px}
.lp-head h1{font-size:clamp(38px,5vw,58px)}
.lp-head .q{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;margin-top:22px;padding-left:18px;border-left:3px solid var(--gold)}
.lp-head .lead{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--muted);margin-top:22px;max-width:36em}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:500}
.dl{list-style:none;margin:0;padding:0}
.dl li{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hair)}
.dl h3{font-size:21px}
.dl p{color:var(--muted);font-size:15px;margin-top:4px}
.dl .size{font-variant-numeric:tabular-nums}
.dl .btn{padding:10px 18px;font-size:15px}
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pages figure{margin:0}
.pages img{width:100%;display:block;border:1px solid var(--hair)}
.pages figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;padding:18px 0}
.steps li::before{content:counter(s);font-size:26px;font-weight:500;color:var(--gold-ink);line-height:1}
.steps b{font-weight:500;display:block}
.steps span{color:var(--muted);font-size:15px}
.steps i{font-style:normal;color:var(--muted);font-size:14px}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 40px}
.cases.four{grid-template-columns:repeat(2,1fr)}
.cases div{padding:14px 0;font-size:16px}
.cases b{font-weight:500}
.cases span{color:var(--muted);display:block;font-size:14px}
.note{font-family:var(--serif);font-size:18px;color:var(--muted);max-width:40em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-block:56px}
.about h1{font-size:clamp(38px,5vw,56px)}
.about .body p{font-family:var(--serif);font-size:20px;line-height:1.6;color:var(--text)}
.about .body p+p{margin-top:18px}
.contact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.contact code{font-family:var(--sans);font-size:19px;font-weight:500;user-select:all}
.copy{font-family:var(--sans);font-size:14px;background:transparent;color:var(--text);border:1px solid var(--hair);padding:6px 12px;border-radius:3px;cursor:pointer}

footer.site{border-top:1px solid var(--hair);margin-top:24px;padding:40px var(--gutter) 56px;display:grid;grid-template-columns:1fr auto;gap:24px;color:var(--muted);font-size:14px}
footer.site .logo{font-size:22px;margin-bottom:12px}

@media (max-width:860px){
  .hero,.lp-head,.library,.about,.two{grid-template-columns:1fr;gap:36px}
  .stack{height:340px}
  .lesson,.next{grid-template-columns:1fr;gap:20px}
  .lesson .thumb{max-width:240px}
  .three,.cases{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr}
  .pages{grid-template-columns:repeat(2,1fr)}
  .library{padding:28px}
  nav.main{gap:18px;font-size:15px}
  footer.site{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{--gutter:20px}
  header.site{flex-direction:column;align-items:flex-start;gap:14px}
  .logo{font-size:24px}
  .stack{height:260px}
  .dl li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){.view{animation:fade .25s ease}}
@keyframes fade{from{opacity:.4}to{opacity:1}}

/* ===== Tillägg 2026-09 ===== */
:root{--f-enskilt:#DA9A35;--f-par:#EDCB91;--f-grupp:#13213A;--f-helklass:#626E84;--thumb-filter:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--f-grupp:#E7ECF3;--f-helklass:#56627A;--f-par:#C9A46A;--thumb-filter:brightness(.86)}}
:root[data-theme="dark"]{--f-grupp:#E7ECF3;--f-helklass:#56627A;--f-par:#C9A46A;--thumb-filter:brightness(.86)}
.lesson .thumb img,.pages img,.lp-img img{filter:var(--thumb-filter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ringen som ritas */
.ringable{position:relative;display:block;overflow:hidden}
.ringable img{display:block;width:100%;height:auto}
.ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ring path{fill:none;stroke:var(--gold);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* prova steg 1 */
.prova{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.prova .stmt{font-family:var(--serif);font-size:clamp(24px,2.6vw,31px);line-height:1.3;margin:0;text-wrap:balance}
.prova .howto{color:var(--muted);margin-top:14px;font-size:15px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale button{position:relative;aspect-ratio:1/1;max-width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:2px;font:500 15px/1 var(--sans);cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-start;padding:8px}
.scale button:hover{background:var(--panel)}
.scale button[aria-pressed="true"]{background:var(--panel)}
.scale .mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:clamp(26px,4vw,40px);pointer-events:none;gap:.18em}
.scale .mark .f{color:var(--text)}
.scale .mark .e{color:var(--gold-ink)}
.scale .mark span{animation:pen .35s ease}
@keyframes pen{from{opacity:0;transform:translateY(-4px) rotate(-8deg)}to{opacity:1;transform:none}}
.scale-ends{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);margin-top:10px}
.prova-out{margin-top:22px;border-top:1px solid var(--hair);padding-top:18px;min-height:3em}
.prova-out p{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--text)}
.prova-out p+p{margin-top:10px}
.prova-out .muted{color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;font:500 15px/1.4 var(--sans);color:var(--text);border-bottom:2px solid var(--gold);cursor:pointer}
.prova-actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;align-items:center}
.prova-choices{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}

/* nedladdning, hela paketet */
.dl li.all{border-bottom:2px solid var(--line)}
.dl li.all h3{font-size:24px}
.dl .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

/* materialbläddrare */
.pages button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;color:inherit;font:inherit}
.pages button img{transition:transform .25s ease,box-shadow .25s ease}
.pages button:hover img{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(19,33,58,.5)}
.browse-all{margin-top:26px}
dialog.viewer{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:#0B1220;color:#E7ECF3}
dialog.viewer::backdrop{background:rgba(9,15,28,.6)}
.v-wrap{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
.v-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.v-tabs{display:flex;gap:4px;flex-wrap:wrap}
.v-tabs button{font:500 15px/1 var(--sans);color:#9AA6BA;background:none;border:0;padding:10px 12px;border-bottom:2px solid transparent;cursor:pointer}
.v-tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--gold)}
.v-close{font:500 15px/1 var(--sans);background:transparent;color:#E7ECF3;border:1px solid rgba(231,236,243,.4);border-radius:3px;padding:10px 14px;cursor:pointer}
/* Bläddra med pilar på var sida om bladet */
.v-arrow{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(231,236,243,.08);color:#fff;border:1px solid rgba(231,236,243,.35);cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}
.v-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v-arrow:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:#0B1220}
.v-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.v-arrow:disabled{opacity:.2;cursor:default}
.v-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:24px;min-height:0;touch-action:pan-y}
.v-stage img{min-width:0;max-width:calc(100% - 160px);max-height:100%;object-fit:contain;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5);transition:opacity .18s ease}
.v-stage img.fade{opacity:.2}
.v-bot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:12px;font-size:15px}
.v-count{font-variant-numeric:tabular-nums;color:#9AA6BA}
.v-dl{color:#fff;text-decoration:none;border-bottom:2px solid var(--gold)}
/* Smal skärm: pilarna ligger på bladets kanter, så att bladet får hela bredden */
@media (max-width:700px){.v-stage{gap:0}.v-stage img{max-width:100%}.v-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;background:rgba(11,18,32,.72);z-index:1}.v-prev{left:4px}.v-next{right:4px}}

/* tidsstapeln */
.plan-ctl{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;border:1px solid var(--hair);border-radius:3px;overflow:hidden;font-size:15px}
.seg button{font:inherit;background:transparent;color:var(--muted);border:0;padding:9px 14px;cursor:pointer}
.seg button+button{border-left:1px solid var(--hair)}
.seg button[aria-pressed="true"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--gold)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:1px;display:inline-block}
.timebar{display:flex;gap:2px;transition:gap .3s ease}
.twopass .timebar{gap:18px}
.pass{display:flex;flex-direction:column;gap:6px;min-width:0;flex-basis:0}
.pass-lab{font-size:13px;color:var(--muted);height:0;overflow:hidden;transition:height .3s ease}
.twopass .pass-lab{height:20px}
.pass-segs{display:flex;gap:2px;height:46px}
.tseg{min-width:0;border:0;padding:0 0 0 8px;display:flex;align-items:center;font:600 15px/1 var(--sans);cursor:pointer;color:#fff;border-radius:1px;transition:filter .2s,transform .2s}
.tseg[data-f="enskilt"]{background:var(--f-enskilt);color:#13213A}
.tseg[data-f="par"]{background:var(--f-par);color:#13213A}
.tseg[data-f="grupp"]{background:var(--f-grupp);color:var(--bg)}
.tseg[data-f="helklass"]{background:var(--f-helklass);color:#fff}
.tseg:hover,.tseg.hot{transform:translateY(-3px)}
.tseg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.minutes{position:relative;height:22px;margin-top:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.minutes span{position:absolute;transform:translateX(-50%)}
.pass-note{margin-top:12px;font-size:15px;color:var(--muted);min-height:1.5em}
.steps li{transition:background .2s}
.steps li.hot{background:var(--panel)}
.steps .form{display:inline-block;width:10px;height:10px;border-radius:1px;margin-right:6px;vertical-align:0}

/* sex fall som öppnar bildkorten */
.cases button{display:block;width:100%;text-align:left;background:none;border:0;padding:14px 0;font:inherit;color:inherit;cursor:pointer}
.cases button:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.cases button b{font-weight:500}
.cases button span{color:var(--muted);display:block;font-size:14px}
.cases .n{font-family:var(--serif);color:var(--gold-ink);margin-right:6px}

/* kursplan */
.kurs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.kurs h3{font-size:18px;margin-bottom:10px}
.kurs ul{list-style:none;margin:0;padding:0}
.kurs li{padding:10px 0;border-bottom:1px solid var(--hair);font-size:15px}

/* bevaka */
.signup{display:grid;grid-template-columns:260px 1fr;gap:40px;padding-block:24px;border-bottom:1px solid var(--hair)}
.signup h3{font-size:21px;margin-bottom:6px}
.signup p{color:var(--muted);max-width:36em}
.signup form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.signup input{flex:1 1 240px;min-width:0;font:400 16px/1.2 var(--sans);padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--text)}
.signup .msg{margin-top:10px;font-size:15px;color:var(--gold-ink);min-height:1.4em}
.soon{font-size:13px;font-weight:500;color:var(--gold-ink);display:block;margin-bottom:8px}

@media (max-width:860px){
  .prova,.kurs{grid-template-columns:1fr;gap:28px}
  .cases.four{grid-template-columns:1fr}
  .signup{grid-template-columns:1fr;gap:6px}
  .v-top{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .scale .mark span,.v-stage img,.tseg,.pages button img{animation:none;transition:none}
}

/* ===== Tillägg 2026-09, del 2: film, övergång, pappershög ===== */
/* Startbilden zoomar långsamt in mot fokuspunkten (data-kb på .ringable) */
.kb{display:block;position:relative;transform:scale(1);transition:transform 3.4s cubic-bezier(.3,.05,.2,1);will-change:transform}
.kb.go{transform:scale(1.16)}
.kb.still{transform:scale(1.16);transition:none}

/* Sidövergång: omslaget flyger från startsidan till lektionssidan */
@view-transition{navigation:auto}
header.site{view-transition-name:sidhuvud}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .kb,.kb.go{transform:none;transition:none}
}

/* Pappershögen */
.pile-wrap{margin-bottom:26px}
.paperpile{position:relative;width:100%;max-width:420px;aspect-ratio:1/1.02;margin-inline:auto;isolation:isolate}
.paperpile .gold{position:absolute;left:4%;bottom:0;width:34%;height:42%;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%);z-index:0}
.paper{position:absolute;left:21%;top:4%;width:58%;padding:0;border:0;background:#fff;cursor:pointer;
  transform:translate(var(--x0),var(--y0)) rotate(var(--r0));transform-origin:50% 100%;
  box-shadow:0 1px 2px rgba(19,33,58,.2),0 16px 34px -16px rgba(19,33,58,.45);
  transition:transform .65s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;transition-delay:var(--d)}
.paper img{display:block;width:100%;height:auto;filter:var(--thumb-filter)}
.paper:nth-child(2){z-index:4;--x0:0%;--y0:0%;--r0:-1.5deg;--x1:-34%;--y1:2%;--r1:-11deg;--d:0s}
.paper:nth-child(3){z-index:3;--x0:5%;--y0:-2%;--r0:3deg;--x1:-11%;--y1:-3%;--r1:-3.5deg;--d:.04s}
.paper:nth-child(4){z-index:2;--x0:-4%;--y0:1%;--r0:-4.5deg;--x1:11%;--y1:-3%;--r1:3.5deg;--d:.08s}
.paper:nth-child(5){z-index:1;--x0:7%;--y0:3%;--r0:6deg;--x1:34%;--y1:2%;--r1:11deg;--d:.12s}
.paperpile:hover .paper,.paperpile:focus-within .paper,.paperpile.fan .paper{transform:translate(var(--x1),var(--y1)) rotate(var(--r1))}
.paperpile .paper:hover,.paperpile .paper:focus-visible{transform:translate(var(--x1),calc(var(--y1) - 7%)) rotate(var(--r1));box-shadow:0 2px 4px rgba(19,33,58,.2),0 28px 44px -18px rgba(19,33,58,.55);transition-delay:0s}
.paper:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pile-cap{text-align:center;font-size:14px;color:var(--muted);margin-top:14px;min-height:1.5em}
@media (hover:none){.paperpile .paper{transform:translate(var(--x1),var(--y1)) rotate(var(--r1))}}
@media (max-width:860px){.paperpile{max-width:360px}}
@media (prefers-reduced-motion:reduce){.paper{transition:none}}
@media (max-width:520px){.paperpile{max-width:270px}.pile-wrap{overflow:hidden;padding-block:14px}}

/* ===== Tillägg 2026-09, del 3: belägg, Om-sidan, sidfot ===== */
.proof{position:relative;aspect-ratio:4/3;background:var(--panel);border:1px solid var(--hair);overflow:hidden;margin-bottom:20px;display:flex;align-items:center;justify-content:center}
.proof::after{content:'';position:absolute;left:-1px;bottom:-1px;width:30px;height:38px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.proof img{display:block;height:auto;filter:var(--thumb-filter);box-shadow:0 1px 2px rgba(19,33,58,.15),0 12px 24px -14px rgba(19,33,58,.4);background:#fff}
.proof.kalla img{width:64%;align-self:flex-start;margin-top:9%;transform:rotate(-1.5deg)}
.proof.skala img{width:78%}
.proof.hog .mini{position:absolute;width:34%;top:13%;left:33%;transform:translate(var(--x),0) rotate(var(--r));transform-origin:50% 100%}
.proof.hog .mini:nth-child(1){--x:-52%;--r:-9deg;z-index:3}
.proof.hog .mini:nth-child(2){--x:0%;--r:0deg;z-index:2}
.proof.hog .mini:nth-child(3){--x:52%;--r:9deg;z-index:1}
.three .proof+.n{margin-top:0}

.person{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start}
.person .ph{position:relative;margin:0}
.person .ph img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.person .ph::after{content:'';position:absolute;left:0;bottom:0;width:48px;height:60px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.person h2{font-size:34px}
.person .role{font-size:17px;color:var(--muted);margin-top:8px}
.person .body p{font-family:var(--serif);font-size:20px;line-height:1.6;margin-top:18px;max-width:34em}
.person .links{margin-top:22px;display:flex;gap:22px;flex-wrap:wrap}
.person .links a{font-weight:500;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.how h3{font-size:21px;margin-bottom:10px}
.how p{font-family:var(--serif);font-size:18px;color:var(--muted);line-height:1.5}
.how .n{font-size:14px;color:var(--gold-ink);font-weight:600;margin-bottom:12px;display:block}
.reach{list-style:none;margin:0;padding:0}
.reach li{padding:14px 0;border-bottom:1px solid var(--hair);display:flex;gap:14px}
.reach li .corner{font-size:13px;margin-top:7px;flex:none}
.fix{margin-top:18px;font-size:15px;color:var(--muted)}
.fix a{color:var(--text)}

.foot-nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.foot-nav a{color:var(--muted);text-decoration:none}
.foot-nav a:hover{color:var(--text)}

@media (max-width:860px){
  .person{grid-template-columns:1fr;gap:28px}
  .person .ph{max-width:260px}
  .how{grid-template-columns:1fr;gap:24px}
}
.signup-box p{color:var(--muted)}
.signup-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.signup-form input{flex:1 1 200px;min-width:0;font:400 16px/1.2 var(--sans);padding:12px 14px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--text)}
.signup-form .msg{flex-basis:100%;font-size:15px;color:var(--gold-ink);min-height:1.4em;font-family:var(--sans);margin:0}
.library ul li{font-family:var(--sans)}
footer.site a[rel="license"],.facts a[rel="license"],.about .body a[rel="license"]{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}

/* ===== Tillägg 2026-09, del 4: tillgänglighet och utskrift ===== */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--btn-bg);color:var(--btn-text);padding:10px 16px;border-radius:3px;font-weight:500;text-decoration:none;transition:top .15s}
.skip:focus{top:12px}
.v-tabs button[aria-pressed="true"]{color:#fff;border-bottom-color:var(--gold)}
.prose{max-width:40em}
.prose h2{font-size:26px;margin:40px 0 12px}
.prose p,.prose li{font-family:var(--serif);font-size:19px;line-height:1.6}
.prose p+p{margin-top:14px}
.prose ul{padding-left:1.2em;margin:12px 0 0}
.prose li+li{margin-top:6px}
.print-only{display:none}

@media print{
  @page{margin:16mm 16mm 18mm}
  :root{--bg:#fff;--text:#000;--muted:#333;--hair:#bbb;--line:#000;--panel:#fff;--gold-ink:#6b460c;--thumb-filter:none}
  body{font-size:11pt;line-height:1.45;padding:0;background:#fff;color:#000}
  .wrap{max-width:none}
  header.site nav,.skip,.actions,.paperpile,.pile-wrap,#prova,#prova-gissa,.prova-val,.dl .btn,#plan,.v-arrow,dialog,.foot-nav,.heroimg,.lesson .thumb,.proof,.library,.signup,.crumb,.cases .n{display:none!important}
  .print-only{display:block}
  header.site{padding-block:0 8pt;border-bottom:1pt solid #000}
  .logo{font-size:16pt}
  section.block{padding-block:12pt;border-top:0.5pt solid #bbb;break-inside:auto}
  .sechead{margin-bottom:8pt}.sechead h2{font-size:15pt}.sechead p{font-size:10pt}
  .lp-head{display:block;padding-block:8pt}
  .lp-head h1{font-size:22pt}.lp-head .q{font-size:13pt;margin-top:8pt}.lp-head .lead{font-size:11pt;margin-top:8pt}
  .facts{margin-top:10pt}.facts div{grid-template-columns:28mm 1fr;padding:3pt 0;font-size:10pt}
  .dl li{padding:4pt 0;grid-template-columns:1fr}.dl h3{font-size:11pt}.dl p{font-size:9.5pt}
  .steps{grid-template-columns:1fr 1fr;column-gap:10mm}.steps li{padding:5pt 0;break-inside:avoid}
  .steps li::before{font-size:14pt}.steps span,.steps i{font-size:9.5pt}
  .cases{grid-template-columns:1fr 1fr 1fr;gap:0 8mm}.cases button{padding:4pt 0}
  .kurs{grid-template-columns:1fr 1fr 1fr;gap:8mm}.kurs li{font-size:9.5pt;padding:3pt 0}
  .two{grid-template-columns:1fr 1fr;gap:8mm}.note,.fix{font-size:10pt}
  .about,.person,.how,.three,.hero{display:block}.person .ph{max-width:35mm}
  a[href^="http"]:not(.logo)::after{content:" (" attr(href) ")";font-size:8.5pt;color:#333}
  footer.site{margin-top:10pt;padding-block:8pt 0;font-size:9pt}
  footer.site,.corner,#fallen .sechead p,.fix{display:none!important}
  .two .sechead h2{font-size:13pt!important}
  .sechead,.sechead h2,h2,h3{break-after:avoid;page-break-after:avoid}
  .dl li.all h3{font-size:12pt}
  *{animation:none!important;transition:none!important}
}
.prose ul+p{margin-top:16px}

/* ===== Tillägg 2026-09, del 5: källupen, logotypen och Källorna ===== */
.lupp{position:fixed;left:0;top:0;width:190px;height:190px;border-radius:50%;pointer-events:none;z-index:2000;opacity:0;transition:opacity .15s ease;background-color:#fff;background-repeat:no-repeat;box-shadow:0 0 0 3px var(--gold),0 0 0 4px rgba(19,33,58,.25),0 18px 44px -8px rgba(0,0,0,.45);will-change:transform}
.lupp.on{opacity:1}
img[data-lupp]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media (hover:hover) and (pointer:fine){img[data-lupp]:hover{cursor:none}}
.lupp-hint{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:var(--muted)}
.lupp-hint::before{content:'';width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1.5px var(--gold)}
.lupp-hint .t{display:none}
@media (hover:hover) and (pointer:fine){.lupp-hint .m{display:inline}}
@media (hover:none){.lupp-hint .t{display:inline}.lupp-hint .m{display:none}}
@media (prefers-reduced-motion:reduce){.lupp-hint{display:none}}

.logo-draw svg path:first-child{fill:transparent;stroke:currentColor;stroke-width:16;stroke-linejoin:round}
.logo-draw svg path:last-child{opacity:0;transform:translate(-30px,30px);transform-box:fill-box}
.logo-draw span{opacity:0}
.logo-draw.go svg path:first-child{stroke-dashoffset:0!important;fill:currentColor;stroke-opacity:0;transition:stroke-dashoffset 1.1s cubic-bezier(.6,.1,.3,1),fill .5s ease .95s,stroke-opacity .4s ease 1.2s}
.logo-draw.go svg path:last-child{opacity:1;transform:none;transition:opacity .2s ease 1.05s,transform .5s cubic-bezier(.3,1.5,.5,1) 1.05s}
.logo-draw.go span{opacity:1;transition:opacity .7s ease .5s}

.kallor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px}
.kalla-kort{display:flex;flex-direction:column;gap:14px;margin:0}
.kalla-kort .bild{position:relative;display:block;width:100%;padding:0;border:1px solid var(--hair);background:var(--panel);aspect-ratio:4/3;overflow:hidden;cursor:zoom-in}
.kalla-kort .bild img{width:100%;height:100%;object-fit:contain;padding:14px;filter:var(--thumb-filter);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kalla-kort .bild:hover img{transform:scale(1.03)}
.kalla-kort .bild::after{content:'';position:absolute;left:-1px;bottom:-1px;width:30px;height:38px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.kalla-kort .bild.text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px;text-align:left;cursor:default}
.kalla-kort .bild.text small{font-size:12px;color:var(--muted);letter-spacing:.02em}
.kalla-kort .bild.text b{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.05;margin:8px 0 10px}
.kalla-kort .bild.text i{font-family:var(--serif);font-size:16px;color:var(--muted);line-height:1.4}
.kalla-kort .ar{font-size:14px;color:var(--gold-ink);font-weight:600;font-variant-numeric:tabular-nums}
.kalla-kort h3{font-size:21px;line-height:1.2}
.kalla-kort p{font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--muted)}
.kalla-kort dl{margin:4px 0 0;border-top:1px solid var(--hair);font-size:14px}
.kalla-kort dl div{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair)}
.kalla-kort dt{color:var(--muted)}
.kalla-kort dd{margin:0}
.kalla-kort dd a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}
.kallor-note{margin-top:40px;color:var(--muted);font-size:15px;max-width:46em}

dialog.zoom{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:#0B1220;color:#E7ECF3}
dialog.zoom::backdrop{background:rgba(9,15,28,.6)}
.z-wrap{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom))}
.z-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.z-top span{font-size:14px;color:#9AA6BA}
.z-stage{display:flex;align-items:center;justify-content:center;min-height:0}
.z-stage img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.z-cap{padding-top:12px;font-size:14px;color:#9AA6BA;text-align:center}

@media (max-width:980px){.kallor-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.kallor-grid{grid-template-columns:1fr}}
@media print{.kallor-grid{grid-template-columns:1fr 1fr}.kalla-kort .bild::after{display:none}}
.kalla-kort.stor{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
.kalla-kort.stor .bild{aspect-ratio:16/10}
.kalla-kort.stor .bild img{object-fit:cover;padding:0}
.kalla-kort.stor h3{font-size:30px}
@media (max-width:860px){.kalla-kort.stor{grid-template-columns:1fr;gap:14px}}
.three p a.more{color:var(--text);text-decoration-color:var(--gold);text-underline-offset:3px;white-space:nowrap}

/* Filmen på startsidan: laddas först när någon trycker på spela */
.film{position:relative;margin:0;border-radius:4px;overflow:hidden;background:var(--navy);aspect-ratio:16/9;box-shadow:0 24px 60px rgba(19,33,58,.16)}
.film video{display:block;width:100%;height:100%;object-fit:contain;background:var(--navy)}
.film-play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:0;background:var(--gold);color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.film-play svg{width:38px;height:38px;fill:currentColor;margin-left:4px}
.film-play:hover{transform:scale(1.06)}
.film-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.film.is-playing .film-play{display:none}
.film-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.film-play{width:64px;height:64px;margin:-32px 0 0 -32px}.film-play svg{width:28px;height:28px}}
@media print{.film{display:none}}

/* ===== Tillägg 2026-09, del 6: sidorna Lektioner och Källor ===== */
/* Formen från loggan går igen: sökfält, kryssrutor, filterknappar och räknare är raka till vänster och rundade till höger. */
.bib-head{padding-block:56px 26px}
.bib-head h1{font-size:clamp(38px,5vw,56px)}
.bib-head .lead{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--muted);max-width:36em;margin-top:18px}
.bib-sok{position:relative;max-width:720px;margin-top:30px}
.bib-sok::after{content:'';position:absolute;left:0;bottom:0;width:18px;height:23px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%);pointer-events:none}
.bib-sok svg{position:absolute;left:20px;top:50%;width:22px;height:22px;margin-top:-11px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.bib-sok input{width:100%;height:62px;padding:0 64px 0 56px;font:400 19px/1 var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:0 31px 31px 0;-webkit-appearance:none;appearance:none}
.bib-sok input::placeholder{color:var(--muted);opacity:1}
.bib-sok input:focus{outline:none;box-shadow:0 0 0 3px var(--gold)}
.bib-sok input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.bib-sok kbd{position:absolute;right:24px;top:50%;transform:translateY(-50%);font:500 13px/1 var(--sans);color:var(--muted);border:1px solid var(--hair);border-radius:0 6px 6px 0;padding:5px 8px}
.bib-sok input:focus~kbd,.bib-sok input:not(:placeholder-shown)~kbd{display:none}
@media (hover:none){.bib-sok kbd{display:none}}
.bib-stats{margin-top:14px;font-size:15px;color:var(--muted)}

.bib-hint{margin-top:6px;font-size:15px}
.bib-hint a{font-weight:500;color:var(--text);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.bib-stats a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}
.bib-filterknapp .n{font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums;background:var(--panel);color:var(--text);padding:4px 9px 4px 7px;border-radius:0 10px 10px 0}

.bib-layout{display:grid;grid-template-columns:250px 1fr;gap:52px;padding-top:34px;margin-top:10px;border-top:1px solid var(--hair);align-items:start}
.bib-side{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto;padding-right:6px;scrollbar-width:thin}
.bib-side-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.bib-side-head h2{font-size:18px}
.bib-side-head .linkbtn,.bfd-top .linkbtn{font-size:14px}

.facet{border-bottom:1px solid var(--hair)}
.facet summary{list-style:none;display:flex;align-items:center;gap:8px;padding:14px 0;font-weight:500;font-size:16px;cursor:pointer}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.facet[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.facet-n{font:600 12px/1 var(--sans);color:var(--gold-ink);font-variant-numeric:tabular-nums}
.facet fieldset{border:0;margin:0 0 14px;padding:0;min-width:0}
.facet ul{list-style:none;margin:0;padding:0}
.facet li{display:flex;align-items:center;gap:10px}
.facet li.extra{display:none}
.facet.alla li.extra{display:flex}
.facet input{flex:none;-webkit-appearance:none;appearance:none;width:18px;height:18px;margin:0;border:1.5px solid var(--line);border-radius:0 7px 7px 0;background:var(--bg);cursor:pointer}
.facet input:checked{background:var(--text);box-shadow:inset 0 0 0 3px var(--bg)}
.facet input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.facet label{flex:1;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;font-size:15px;line-height:1.3;cursor:pointer}
.facet-c{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.facet li.noll{opacity:.45}
.facet li.noll label,.facet li.noll input{cursor:default}
.facet-gh{font-size:13px;color:var(--muted);margin:10px 0 2px}
.facet-grupp:first-of-type .facet-gh{margin-top:0}
.facet-not{font-size:13px;color:var(--muted);line-height:1.4;margin:0 0 8px}
.facet-mer{font-size:14px;margin-top:8px}

.bib-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;min-height:44px}
.bib-count{font-size:20px}
.bib-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bib-filterknapp{display:none;padding:9px 16px;font-size:15px}
.bib-sort{position:relative;display:inline-block}
.bib-sort::after{content:'';position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.bib-sort select{font:400 15px/1.2 var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--hair);border-radius:3px;padding:10px 38px 10px 12px;-webkit-appearance:none;appearance:none;cursor:pointer}
.bib-visning button{display:flex;align-items:center;padding:10px 12px}
.bib-visning svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}

.bib-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:8px;font:400 14px/1.2 var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:0 16px 16px 0;padding:6px 12px 6px 11px;cursor:pointer}
.chip span{color:var(--muted);font-size:16px;line-height:1}
.chip:hover{background:var(--panel)}
.chip-alla,.chip-lank{font-size:14px;margin-left:10px}

.bib-res{margin-top:26px;min-height:300px}
.bib-res mark{background:rgba(218,154,53,.34);color:inherit;border-radius:2px;padding:0 1px}

/* lektioner som kort */
.bk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:44px 32px}
.bk{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.bk-omslag{position:relative;display:block;aspect-ratio:620/877;margin-bottom:16px;background:var(--panel)}
.bk-omslag img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid var(--hair);filter:var(--thumb-filter);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.bk-omslag::after{content:'';position:absolute;left:-1px;bottom:-1px;width:34px;height:43px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
a.bk:hover .bk-omslag img{transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(19,33,58,.6)}
.bk-flaggor{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.bk-ny,.bk-med{display:inline-block;font:600 12px/1 var(--sans);padding:5px 10px 5px 8px;border-radius:0 11px 11px 0;background:#13213A;color:#fff}
.bk-med{background:var(--gold);color:#13213A}
.bk-amne .bk-ny{vertical-align:1px;margin-left:6px;font-size:11px;padding:3px 8px 3px 6px}
.bk-amne{font-size:13px;font-weight:600;color:var(--gold-ink)}
.bk h3{font-size:22px;line-height:1.15;margin:6px 0 8px}
a.bk:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.bk-q{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.4}
.bk-meta{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:12px;font-size:13px;color:var(--muted)}
.bk-teman{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bk-teman span{font-size:12px;line-height:1.2;background:var(--panel);padding:4px 10px 4px 8px;border-radius:0 11px 11px 0}
.bk-nasta .bk-omslag{background:transparent;border:1.5px dashed var(--hair)}
.bk-nasta .bk-omslag::after{left:-1.5px;bottom:-1.5px}
.bk-nasta h3{color:var(--muted)}
.bk-nasta .bk-q{color:var(--muted)}

/* lektioner som lista */
.bl-lista{border-top:1px solid var(--hair)}
.bl{display:grid;grid-template-columns:108px 1fr 190px;gap:28px;padding:26px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.bl-omslag{position:relative;display:block;align-self:start}
.bl-omslag img{display:block;width:100%;height:auto;border:1px solid var(--hair);filter:var(--thumb-filter)}
.bl-omslag::after{content:'';position:absolute;left:-1px;bottom:-1px;width:22px;height:28px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.bl h3{font-size:24px;line-height:1.15;margin:6px 0 8px}
.bl:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.bl-desc{margin-top:10px;font-size:15px;color:var(--muted);max-width:44em}
.bl-dl{margin:14px 0 0;font-size:14px}
.bl-dl div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:3px 0}
.bl-dl dt{color:var(--muted)}
.bl-dl dd{margin:0}
.bl-fakta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:14px;color:var(--muted)}
.bl-fakta .go{margin-top:12px;font-weight:500;color:var(--text);border-bottom:2px solid var(--gold);padding-bottom:2px}

/* källorna som tidslinje */
.bs-grupp{display:grid;grid-template-columns:120px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--hair)}
.bs-tid .bs-grupp:first-child{border-top:0;padding-top:6px}
.bs-ar{font-size:15px;font-weight:600;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.bs-ar span{position:sticky;top:18px;display:block}
.bs-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:34px 28px}
.bs{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:zoom-in}
.bs-bild{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;background:var(--panel);border:1px solid var(--hair);overflow:hidden;margin-bottom:10px}
.bs-bild img{width:100%;height:100%;object-fit:contain;padding:12px;filter:var(--thumb-filter);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bs:hover .bs-bild img{transform:scale(1.04)}
.bs-bild::after{content:'';position:absolute;left:-1px;bottom:-1px;width:26px;height:33px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.bs-bild.text{flex-direction:column;align-items:flex-start;padding:20px;cursor:zoom-in}
.bs-bild.text small{font-size:11px;color:var(--muted)}
.bs-bild.text b{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.05;margin-top:6px}
.bs-datum{font-size:13px;font-weight:600;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.bs-titel{font-size:17px;font-weight:500;line-height:1.25}
.bs:hover .bs-titel{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.bs-meta,.bs-lek{font-size:13px;color:var(--muted);line-height:1.35}
.bs-lek{font-family:var(--serif);font-style:italic;font-size:14px}

/* ingen träff */
.bib-tom{max-width:36em;padding:40px 0}
.bib-tom h3{font-size:24px;margin-bottom:12px}
.bib-tom p{font-family:var(--serif);font-size:18px;color:var(--muted);line-height:1.5}
.bib-tom ul{list-style:none;margin:10px 0 18px;padding:0}
.bib-tom li{padding:6px 0}
.bib-tom .linkbtn{font-size:16px}
.bib-tom a{color:var(--text);text-decoration-color:var(--gold);text-underline-offset:3px}

/* en källa i helskärm */
dialog.bib-kalla{border:0;padding:0;width:min(1120px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);background:var(--bg);color:var(--text);border-radius:0 18px 18px 0;overflow:hidden}
dialog.bib-kalla::backdrop{background:rgba(9,15,28,.72)}
.bkd-wrap{position:relative;display:grid;grid-template-columns:1.45fr 1fr;max-height:calc(100vh - 32px)}
.bkd-stang{position:absolute;right:16px;top:16px;z-index:2;color:var(--text);background:var(--bg);border-color:var(--hair)}
.bkd-bild{display:flex;align-items:center;justify-content:center;background:#0B1220;padding:24px;min-height:420px;position:relative}
.bkd-bild::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:50px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.bkd-bild img{max-width:100%;max-height:calc(100vh - 84px);object-fit:contain;background:#fff}
.bkd-text{background:#F3F5F8;color:#13213A;padding:36px;max-width:420px;display:flex;flex-direction:column;gap:10px}
.bkd-text small{font-size:13px;color:#566175}
.bkd-text b{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.05}
.bkd-text i{font-family:var(--serif);font-size:18px;color:#566175;line-height:1.45}
.bkd-info{padding:56px 36px 32px;overflow:auto}
.bkd-ar{font-size:14px;font-weight:600;color:var(--gold-ink)}
.bkd-info h2{font-size:30px;line-height:1.1;margin:8px 0 14px}
.bkd-besk{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--muted)}
.bkd-dl{margin:22px 0 0;border-top:1px solid var(--hair);font-size:14px}
.bkd-dl div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair)}
.bkd-dl dt{color:var(--muted)}
.bkd-dl dd{margin:0}
.bkd-dl a{color:inherit;text-decoration-color:var(--gold);text-underline-offset:3px}
.bkd-dl .bkd-kopiera{display:block;border-bottom:0;padding-top:16px}
.bkd-dl .bkd-kopiera .linkbtn{font-size:14px}

/* filtren på mobil */
dialog.bib-filterdlg{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:var(--bg);color:var(--text)}
dialog.bib-filterdlg::backdrop{background:rgba(9,15,28,.6)}
.bfd-wrap{display:grid;grid-template-rows:auto 1fr auto;height:100%}
.bfd-top{display:flex;align-items:center;gap:16px;padding:max(14px,env(safe-area-inset-top)) 20px 14px;border-bottom:1px solid var(--line)}
.bfd-top h2{font-size:20px;flex:1}
.bfd-stang{font:500 15px/1 var(--sans);color:var(--text);background:transparent;border:1px solid var(--hair);border-radius:3px;padding:9px 14px;cursor:pointer}
.bfd-body{overflow:auto;padding:0 20px 20px}
.bfd-bot{padding:14px 20px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--hair)}
.bfd-bot .btn{width:100%;justify-content:center}

/* startsidan: sökfältet och genvägarna */
.library .bib-sok{margin-top:24px}
.library .bib-sok input{height:54px;font-size:17px;padding-right:96px}
.library .bib-sok button{position:absolute;right:6px;top:6px;bottom:6px;padding:0 18px;border-radius:0 24px 24px 0;font-size:15px}
.genvagar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.genvagar a{font-size:14px;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:0 16px 16px 0;padding:6px 14px 6px 11px}
.genvagar a:hover{background:var(--bg)}
.library h3{font-size:21px;margin-bottom:6px}
.alla-lektioner{margin-top:22px}
.alla-lektioner a{font-weight:500;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}

@media (max-width:980px){
  .bl{grid-template-columns:90px 1fr}
  .bl-fakta{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
  .bl-fakta .go{margin-top:0}
}
@media (max-width:860px){
  .bib-head{padding-block:36px 18px}
  .bib-layout{grid-template-columns:1fr;gap:0;padding-top:22px}
  .bib-side{display:none}
  .bib-filterknapp{display:inline-flex}
  .bib-bar{flex-direction:column;align-items:flex-start}
  .bs-grupp{grid-template-columns:1fr;gap:14px}
  .bs-ar span{position:static}
  .bk-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:34px 20px}
  .bk h3{font-size:19px}
  .bk-q{font-size:15px}
  .bkd-wrap{grid-template-columns:1fr;max-height:none}
  dialog.bib-kalla{width:100%;height:100%;max-height:none;border-radius:0;overflow:auto}
  .bkd-bild{min-height:42vh}
  .bkd-bild img{max-height:60vh}
  .bkd-info{padding:28px 20px 40px;overflow:visible}
}
@media (max-width:520px){
  .bib-sok input{height:56px;font-size:17px;padding-left:50px}
  .bib-sok svg{left:17px}
  .bib-tools{width:100%}
  .bib-sort{flex:1}
  .bib-sort select{width:100%}
  .bk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 16px}
  .bk-teman{display:none}
  .bs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .bs-titel{font-size:15px}
  .bl{grid-template-columns:72px 1fr;gap:16px}
  .bl h3{font-size:20px}
  .bl-dl{display:none}
  .library .bib-sok input{padding-right:20px}
  .library .bib-sok button{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bk-omslag img,.bs-bild img,.facet summary::after{transition:none}
  a.bk:hover .bk-omslag img,.bs:hover .bs-bild img{transform:none}
}
@media print{
  .bib-side,.bib-tools,.bib-sok,.bib-hint,.bib-chips,.bib-filterdlg,.bib-kalla,.bk-nasta,.genvagar{display:none!important}
  .bib-layout{display:block}
  .bk-grid{grid-template-columns:repeat(3,1fr);gap:10mm}
  .bk,.bl,.bs{break-inside:avoid}
  .bk-omslag::after,.bs-bild::after,.bl-omslag::after{display:none}
}
.library p+ul{margin-top:22px}
.bib-visning[hidden]{display:none}
.bib [hidden],dialog.bib-kalla [hidden],dialog.bib-filterdlg [hidden]{display:none!important}
@media (max-width:520px){.bib-sok kbd{display:none}.bib-sok input{padding-right:20px}.bk-nasta{display:none}}
/* Tipsa en kollega: vanliga länkar, inget hämtas från andra webbplatser förrän någon klickar */
.share{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:18px 40px;align-items:center}
.share-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;flex:1}
.sbtn{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 16px;border:1px solid var(--hair);border-radius:4px;background:var(--bg);color:var(--text);font:500 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.sbtn:hover{border-color:var(--line);background:var(--panel)}
.sbtn svg{flex:none;width:22px;height:22px;fill:currentColor}
.sbtn svg.line{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sbtn.s-fb svg{fill:#1877F2}.sbtn.s-li svg{fill:#0A66C2}.sbtn.s-wa svg{fill:#25D366}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sbtn.s-li svg{fill:#4A9AE8}}
:root[data-theme="dark"] .sbtn.s-li svg{fill:#4A9AE8}
@media (prefers-reduced-motion:reduce){.sbtn{transition:none}}
.share-post{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:14px}
.share-post summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:15px;font-weight:500;list-style:none}
.share-post summary::-webkit-details-marker{display:none}
.share-post[open] .chev{transform:rotate(180deg)}
.share-post .post{font-family:var(--serif);font-size:17px;line-height:1.5;margin:14px 0 14px;padding-left:16px;border-left:2px solid var(--gold);max-width:44em}
.share-post .url{overflow-wrap:anywhere}
@media (max-width:860px){.share{grid-template-columns:1fr}}
@media print{#tipsa{display:none!important}}

/* Ladda ner: en rad per material, en knapp per rad. Andra versioner som en tyst textrad. */
.files{list-style:none;margin:0;padding:0;border-top:2px solid var(--line)}
.file{display:grid;grid-template-columns:34px 1fr auto;gap:22px;align-items:center;padding:18px 0;border-bottom:1px solid var(--hair)}
.file.all{padding-block:22px;border-bottom:2px solid var(--line)}
.fi{min-width:0}
.fi h3{font-size:21px;font-weight:500;line-height:1.15}
.file.all .fi h3{font-size:24px}
.fi p{color:var(--muted);font-size:15px;margin-top:4px;max-width:36em}
.fi .fm{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;font-variant-numeric:tabular-nums}
.fi .also{font-size:15px;margin-top:8px;color:var(--muted)}
.fi .also a{color:var(--text);text-decoration-color:var(--gold);text-underline-offset:3px}
.fi .also a+a::before{content:'·';display:inline-block;margin:0 .55em;color:var(--muted);text-decoration:none}
.file .btn{padding:10px 18px;font-size:15px;white-space:nowrap}
.file .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
/* ikonerna: tunna konturer i sajtens stil, med guldhörnet där papperet viks */
.ico{width:34px;height:40px;align-self:start;margin-top:2px}
.ico .o{fill:none;stroke:var(--text);stroke-width:1.5;stroke-linejoin:round}
.ico .g{fill:var(--gold)}
.dl-note{margin-top:16px;font-size:14px;color:var(--muted)}
@media (max-width:640px){
  .file{grid-template-columns:24px 1fr auto;gap:12px;align-items:start}
  .ico{width:24px;height:29px}
  .fi h3{font-size:18px}.file.all .fi h3{font-size:20px}
  .fi p{font-size:14px}
  .file .btn{padding:8px 11px;font-size:14px;gap:6px}
  .file:not(.all) .btn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .file:not(.all) .btn{padding:10px 12px}
}
@media print{
  .file .btn,.ico,.dl-note,.fi .also{display:none!important}
  .file{display:block;padding:4pt 0}.fi h3{font-size:11pt}.fi p{font-size:9.5pt}
}

/* Har du använt lektionen? Skickas med Netlify Forms */
.fb-priv{margin-top:16px;font-size:14px;color:var(--muted);max-width:30em}
.fb-priv a{color:var(--text)}
.fb-form{background:var(--panel);border-radius:4px;padding:28px;display:grid;gap:20px}
.fb-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-scale{border:0;margin:0;padding:0}
.fb-scale legend{font-weight:500;font-size:17px;margin-bottom:12px;padding:0}
.fb-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fb-opts label{position:relative}
.fb-opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fb-opts span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px;border:1px solid var(--line);border-radius:3px;background:var(--bg);font-size:15px;font-weight:500}
.fb-opts input:checked+span{background:var(--btn-bg);color:var(--btn-text)}
.fb-opts input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.fb-field{display:grid;gap:6px}
.fb-field>span{font-weight:500;font-size:15px}
.fb-field i{font-style:normal;font-weight:400;color:var(--muted)}
.fb-field input,.fb-field textarea{width:100%;font:16px/1.4 var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--hair);border-radius:3px;padding:11px 12px}
.fb-field input:focus,.fb-field textarea:focus{border-color:var(--line);outline:none;box-shadow:0 0 0 2px var(--gold)}
.fb-check{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.fb-check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--navy)}
@supports selector(:has(*)){.fb-name{display:none}.fb-form:has(input[name="citera"]:checked) .fb-name{display:grid}}
.fb-send{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.fb-out{font-size:15px;color:var(--text)}
.fb-done{font-family:var(--serif);font-size:20px;line-height:1.5}
@media (max-width:520px){.fb-opts{grid-template-columns:1fr 1fr}.fb-form{padding:20px}}
@media print{#omdome{display:none!important}}

/* Kompakt band: Tipsa en kollega */
section.block.tight{padding-block:36px}
.share-head h2{font-size:26px;display:flex;align-items:baseline;gap:12px}
.share-head h2 .corner{font-size:18px}
.share-head p{color:var(--muted);font-size:15px;margin-top:4px}
.share-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.share-row .share-native{min-height:52px}
.sbtn{min-height:48px;padding:8px 14px;font-size:15px}
.chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;flex:none}

/* Fallen som miniatyrer av bildkorten */
.kortrad{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.kortrad.four{grid-template-columns:repeat(4,1fr)}
.kort{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.kort .bild{position:relative;display:block;aspect-ratio:400/566;background:#fff;box-shadow:0 1px 2px rgba(19,33,58,.16),0 10px 24px -14px rgba(19,33,58,.4);transition:transform .2s,box-shadow .2s}
.kort .bild img{display:block;width:100%;height:100%;object-fit:cover;filter:var(--thumb-filter,none)}
.kort .bild::after{content:'';position:absolute;right:-1px;bottom:-1px;width:26px;height:32px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%);opacity:0;transition:opacity .2s}
.kort:hover .bild,.kort:focus-visible .bild{transform:translateY(-4px);box-shadow:0 1px 2px rgba(19,33,58,.16),0 18px 32px -14px rgba(19,33,58,.5)}
.kort:hover .bild::after,.kort:focus-visible .bild::after{opacity:1}
.kort:focus-visible{outline:none}.kort:focus-visible .bild{outline:2px solid var(--gold);outline-offset:4px}
.kort .kt{display:block;margin-top:14px}
.kort .n{font-family:var(--serif);color:var(--gold-ink);margin-right:6px}
.kort b{font-weight:500;font-size:16px}
.kort .u{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.kort:hover b{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:980px){.kortrad{grid-template-columns:repeat(3,1fr)}}
/* på telefon: en rad att svepa i, så att sidan inte blir längre */
@media (max-width:640px){
  .kortrad,.kortrad.four{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:calc(var(--gutter)*-1);padding:6px var(--gutter) 14px;scrollbar-width:none}
  .kortrad::-webkit-scrollbar{display:none}
  .kortrad li{flex:0 0 42%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.kort .bild,.chev{transition:none}.kort:hover .bild{transform:none}}

/* Mer om lektionen: fällbara rutor */
.mores{border-top:2px solid var(--line)}
.more{border-bottom:1px solid var(--hair)}
.more summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-size:21px;font-weight:500}
.more summary::-webkit-details-marker{display:none}
.more summary:hover span{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
.more summary .chev{width:20px;height:20px}
.more[open] summary .chev{transform:rotate(180deg)}
.more-body{padding:0 0 26px}
.more-lead{color:var(--muted);font-size:15px;margin-bottom:16px}
.more-body .note{max-width:44em}

/* Har du använt lektionen? ligger på sidan, i två spalter */
.fb-sec{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media (max-width:860px){.fb-sec{grid-template-columns:1fr;gap:28px}}
#omdome{scroll-margin-top:24px}

/* Välkommen tillbaka */
.welcome{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;margin-top:22px;padding:16px 20px;border-left:3px solid var(--gold);background:var(--panel);border-radius:0 4px 4px 0}
.welcome[hidden]{display:none}
.welcome div{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.welcome .btn{padding:10px 16px;font-size:15px}

@media print{
  #tipsa,.welcome,.kort .bild,.more summary .chev{display:none!important}
  .kortrad,.kortrad.four{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4pt 8mm;overflow:visible;margin:0;padding:0}
  .kort .kt{margin-top:0}
  .more summary{padding:6pt 0 2pt;font-size:13pt}.more-body{padding-bottom:6pt}
}
.share-native[hidden]{display:none!important}

/* Startsidan: lärarhandledning och material glider fram bakom omslaget, så att det syns att allt ingår */
.lesson .thumb{isolation:isolate}
.lesson .thumb>img:not(.sheet){position:relative;z-index:1;background:#fff}
.lesson .thumb::after{z-index:2}
.lesson .thumb .sheet{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border:1px solid var(--hair);background:#fff;z-index:0;box-shadow:0 8px 20px -12px rgba(19,33,58,.4);transition:transform .45s cubic-bezier(.3,.7,.25,1)}
.lesson .thumb .s1{transform-origin:0 100%}
.lesson .thumb .s2{transform-origin:100% 100%}
.lesson>div{position:relative;z-index:1}
/* som en kortlek: ett papper åt vänster, ett åt höger, och inget når texten bredvid */
.lesson:hover .thumb .s1,.lesson:focus-visible .thumb .s1{transform:translate(-6px,-8px) rotate(-3deg)}
.lesson:hover .thumb .s2,.lesson:focus-visible .thumb .s2{transform:translate(6px,-10px) rotate(3deg);transition-delay:.05s}
/* på pekskärm, där muspekaren inte finns, ligger papperen alltid lite utdragna */
@media (hover:none){.lesson .thumb .s1{transform:translate(-3px,-5px) rotate(-2deg)}.lesson .thumb .s2{transform:translate(3px,-6px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.lesson .thumb .sheet{transition:none}}
#prova-gissa .howto a{color:var(--text);text-decoration-color:var(--gold);text-underline-offset:3px}
.prova-out .go{display:inline-flex;font-weight:500;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;font-family:var(--sans);font-size:16px}
/* Källor: textkort skalar med kortets bredd, så att långa namn inte klipps på mobil */
.bs{container-type:inline-size}
.bs-bild.text{padding:clamp(12px,7cqi,20px) clamp(12px,7cqi,20px) 36px}
.bs-bild.text b{font-size:clamp(13px,8.5cqi,26px);overflow-wrap:break-word}
.bs-bild.text{justify-content:safe center}
.bs-bild.text small{font-size:clamp(10px,6.6cqi,11px)}
/* Skriv ut till klassen: räknare och en fil att skriva ut (15-ar-for-sociala-medier och senare lektioner) */
.utskrift{background:var(--panel);border-radius:0 28px 28px 0;padding:26px 30px 24px;margin-bottom:34px;position:relative}
.utskrift::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:33px;background:var(--gold);clip-path:polygon(0 61%,100% 0,100% 100%,0 100%)}
.ut-head h3{font-size:22px;margin-bottom:6px}
.ut-head p{margin:0;color:var(--muted);font-size:15px;max-width:60ch}
.ut-form{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:flex-end;margin:20px 0 6px}
.ut-f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);border:0;margin:0;padding:0;min-width:0}
.ut-f legend{padding:0;margin-bottom:6px}
.ut-f input[type=number],.ut-f select{font:500 17px var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--hair);border-radius:3px;padding:9px 12px;width:112px}
.ut-f input:focus-visible,.ut-f select:focus-visible,.ut-seg input:focus-visible+span,.ut-val input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ut-seg{display:block}
.ut-seg label{position:relative;cursor:pointer;display:inline-block}
.ut-seg input{position:absolute;opacity:0;width:1px;height:1px}
.ut-seg span{display:inline-block;font:500 15px var(--sans);color:var(--muted);background:var(--bg);border:1px solid var(--hair);padding:9px 14px}
.ut-seg label+label{margin-left:-1px}
.ut-seg input:checked+span{color:var(--text);box-shadow:inset 0 -2px 0 var(--gold)}
.ut-val{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;padding-bottom:8px}
.ut-val label{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.ut-val input{width:17px;height:17px;accent-color:var(--gold)}
.ut-lista{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--hair)}
.ut-lista li{display:grid;grid-template-columns:minmax(150px,220px) 1fr auto;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:15px}
.ut-lista li b{font-weight:500}
.ut-lista li span{color:var(--muted)}
.ut-lista li i{font-style:normal;font-variant-numeric:tabular-nums}
.ut-lista li.ut-summa{border-bottom:0}
.ut-lista li.ut-summa b,.ut-lista li.ut-summa i{font-weight:600}
.ut-lista li.ut-varning{display:block;color:var(--gold-ink);font-size:14px;border-bottom:0}
.ut-go{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:16px}
.ut-go .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.ut-go .btn[disabled]{opacity:.6;cursor:progress}
.ut-status{margin:0;font-size:14px;color:var(--muted)}
.ut-tips{margin:12px 0 0;font-size:14px;color:var(--muted)}
@media (max-width:640px){
  .utskrift{padding:22px 18px 44px;border-radius:0 20px 20px 0}
  .ut-lista li{grid-template-columns:1fr auto;gap:2px 12px}
  .ut-lista li span{grid-column:1/-1;grid-row:2}
}
@media print{.utskrift{display:none}}

/* Startsidan: varje lektions startfråga till höger om lektionen */
.lesson{position:relative}
@media (min-width:1101px){.lesson{grid-template-columns:260px minmax(0,1fr) 300px}}
.lesson .thumb{align-self:start}
.lesson h3 a{color:inherit;text-decoration:none}
.lesson h3 a::after{content:'';position:absolute;inset:0;z-index:1}
.lesson h3 a:focus-visible{outline:none}
.lesson:has(h3 a:focus-visible){outline:2px solid var(--gold);outline-offset:6px}
.lesson .go{color:inherit;text-decoration:none}
.lektion-fraga{position:relative;z-index:2;align-self:center;padding:18px 20px 16px;border:1px solid var(--hair);border-radius:4px;background:var(--bg);cursor:default}
.lf-etikett{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);letter-spacing:.02em;color:var(--gold-ink)}
.lf-etikett .corner{font-size:14px}
.lf-fraga{font-family:var(--serif);font-size:18px;line-height:1.35;margin:10px 0 14px;text-wrap:balance}
.lektion-fraga .prova-choices{gap:6px;margin:0}
.lektion-fraga .prova-choices .btn{font-size:14px;padding:8px 12px;gap:0}
.lektion-fraga .lf-skala{display:grid;grid-template-columns:repeat(5,1fr)}
.lektion-fraga .lf-skala .btn{justify-content:center;padding:8px 0}
.lf-andar{display:flex;justify-content:space-between;margin:6px 0 0;font-size:12px;color:var(--muted)}
.lektion-fraga .btn.ratt{border-color:#3d8a5e;box-shadow:inset 0 0 0 1px #3d8a5e}
.lektion-fraga .btn.fel{opacity:.75}
.lektion-fraga .prova-out{margin-top:14px;padding-top:12px;min-height:0}
.lektion-fraga .prova-out:empty{display:none}
.lektion-fraga .prova-out p{font-size:15px;line-height:1.45}
.lektion-fraga .prova-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:10px}
.lektion-fraga .prova-actions .go{margin:0;font-size:15px}
.lektion-fraga .linkbtn{font-size:14px;border-bottom-color:var(--hair)}
@media (min-width:861px) and (max-width:1100px){.lesson{grid-template-columns:220px minmax(0,1fr)}.lektion-fraga{grid-column:2;align-self:start}}
@media (max-width:860px){.lektion-fraga{grid-column:1;align-self:start}}
@media print{.lektion-fraga{display:none!important}}

/* Startsidan: högst fem lektioner, nyast överst. "Hitta rätt lektion" i en kolumn. */
section[aria-labelledby="h-lektioner"] > article.lesson:nth-of-type(n+6){display:none}
.library{grid-template-columns:1fr}
.library > div{max-width:720px}

/* Ladda ner: välj papper eller dator, utskrift i tre steg */
.dl-vag{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.dl-vag button{display:flex;gap:16px;align-items:center;text-align:left;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--hair);border-radius:3px;padding:18px 20px;cursor:pointer;position:relative}
.dl-vag button:hover{border-color:var(--line)}
.dl-vag button[aria-selected="true"]{border-color:var(--line);background:var(--panel);box-shadow:inset 0 -3px 0 var(--gold)}
.dl-vag button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dl-vag svg{width:34px;height:34px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.dl-vag button[aria-selected="true"] svg{stroke:var(--gold-ink)}
.dl-vag b{display:block;font-size:18px;font-weight:600;line-height:1.2}
.dl-vag small{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.utskrift[hidden],.dator-panel[hidden]{display:none}
.ut-steg{display:block;margin:18px 0 0}
.ut-steg-rad{display:grid;grid-template-columns:40px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--hair)}
.ut-steg-rad:last-child{padding-bottom:4px}
.ut-nr{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:600 17px/1 var(--sans)}
:root[data-theme="dark"] .ut-nr{background:var(--gold);color:#13213A}
.ut-steg h4{font-size:18px;font-weight:600;margin:5px 0 12px}
.ut-falt{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-end}
.ut-hint{margin:10px 0 0;font-size:14px;color:var(--muted)}
.ut-dubbel{margin:0 0 14px;padding:14px 16px;background:var(--bg);border-left:4px solid var(--gold);font-size:15px;max-width:68ch}
.ut-dubbel b{display:block;font-size:16px;margin-bottom:4px;color:var(--text)}
.ut-innehall{margin:0;font-size:14px;color:var(--muted)}
.ut-steg .ut-lista{margin-top:6px}
.dator-panel{display:grid;grid-template-columns:1fr 230px;gap:36px;background:var(--panel);border-radius:0 28px 28px 0;padding:28px 30px;margin-bottom:34px;align-items:start}
.dator-text h3{font-size:22px;margin-bottom:8px}
.dator-text>p{color:var(--muted);font-size:15px;max-width:62ch;margin:0 0 12px}
.dator-steg{margin:4px 0 14px;padding-left:22px;font-size:15px;max-width:62ch}
.dator-steg li{margin:6px 0}
.dator-steg li::marker{color:var(--gold-ink);font-weight:600}
.dator-text .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.dator-text .fm{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:10px}
.dator-text .dator-live{margin-top:16px}
.dator-bild{margin:0}
.dator-bild img{width:100%;height:auto;display:block;border:1px solid var(--hair);box-shadow:0 10px 28px rgba(19,33,58,.12);background:#fff}
.files-rubrik{font-size:22px;margin:8px 0 4px}
.files-ingress{color:var(--muted);font-size:15px;margin:0 0 14px}
.fi h3 .per{display:inline-block;vertical-align:middle;margin-left:8px;font:500 12px/1 var(--sans);letter-spacing:.02em;color:var(--gold-ink);border:1px solid currentColor;border-radius:2px;padding:4px 7px;white-space:nowrap}
.fi h3 .per.larare{color:var(--muted)}
@media (max-width:760px){
  .dl-vag{grid-template-columns:1fr}
  .dl-vag button{padding:14px 16px}
  .ut-steg-rad{grid-template-columns:30px 1fr;gap:10px}
  .ut-nr{width:28px;height:28px;font-size:15px}
  .dator-panel{grid-template-columns:1fr;padding:22px 18px 30px;border-radius:0 20px 20px 0}
  .dator-bild{max-width:240px}
}
@media print{.dl-vag,.dator-panel{display:none!important}}
.ut-f select{width:auto;min-width:112px}

/* Lektionens gång med egna stegnummer (till exempel 3b), från data-step */
.steps.steg-nr li::before{content:attr(data-step)}

/* Maillistan på startsidan, i platsen för nästa lektion */
.next.maillista p{max-width:40em}
.next.maillista .signup-form{max-width:560px}
.next.maillista .signup-villkor{font-size:14px;margin-top:6px}
@media print{.next.maillista{display:none!important}}
.next.maillista{grid-template-columns:1fr}
.next.maillista>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:start}
.next.maillista>div>p:first-child{grid-row:span 2}
.next.maillista .signup-form{margin-top:0;max-width:none}
.next.maillista .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:760px){.next.maillista>div{grid-template-columns:1fr}.next.maillista>div>p:first-child{grid-row:auto}.next.maillista .signup-form{margin-top:12px}}

/* Filerna en och en: grupper och ett val för elevernas version (Vanlig/Med stöd, Färg/Tonersnål) */
.files-grupp{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin:30px 0 10px}
.files-grupp-rad{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap;margin-top:30px}
.files-grupp-rad .files-grupp{margin:0 0 10px}
.v-val{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.v-val .ut-seg span{padding:7px 12px;font-size:14px}
.v-forklaring{margin-top:4px}
@media print{.v-val,.v-forklaring{display:none!important}}
.v-val fieldset{border:0;padding:0;margin:0;min-width:0}