:root{
  --papir:#fff9ee; --blaek:#172b2b; --blaa:#0e86c8; --daempet:#4f6667; --linje:#172b2b33;
  --display:Archivo,system-ui,sans-serif; --serif:'Source Serif 4',Georgia,serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papir);color:var(--blaek);font:17px/1.5 var(--serif)}
a{color:inherit}
button{font:600 14px var(--display);color:var(--blaek);background:var(--papir);border:1.5px solid var(--blaek);border-radius:6px;padding:8px 14px;min-height:42px;cursor:pointer;box-shadow:2px 2px 0 var(--blaek)}
button:hover{background:#e3f0f5}
button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--blaek)}
button:disabled{opacity:.4;cursor:default;transform:none}
button.lille{min-height:34px;padding:5px 12px;font-size:13px}
:focus-visible{outline:3px solid var(--blaa);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.regnbue{height:6px;background:linear-gradient(90deg,#e8336d 0 14.3%,#ff6a3d 14.3% 28.6%,#ffb300 28.6% 42.9%,#5fb030 42.9% 57.2%,#0fa593 57.2% 71.5%,#0e86c8 71.5% 85.8%,#7a4fd6 85.8%)}
nav{display:flex;align-items:center;gap:24px;padding:8px 24px;border-bottom:2px solid var(--blaek);font:500 12px var(--mono)}
nav a:last-child{margin-left:auto}
.brand{font:800 25px var(--display);text-decoration:none}.brand span{font:14px var(--mono)}

main{max-width:1240px;margin:auto;padding:12px 24px 32px}
.titel{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px}
.overlinje{font:500 11px var(--mono);color:var(--daempet);margin:0 0 3px}
h1{font:800 clamp(22px,3vw,30px)/1.1 var(--display);letter-spacing:-.035em;margin:0}

.laboratorium{display:grid;grid-template-columns:minmax(0,1fr) 290px;border:2px solid var(--blaek);box-shadow:4px 4px 0 var(--blaek);background:#f4f7f3}
.figur{height:clamp(320px,calc(100dvh - 160px),640px);min-width:0}
.figur svg{display:block;width:100%;height:100%}
.figur text{font-family:var(--mono)}

.panel{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border-left:2px solid var(--blaek);background:var(--papir)}
.type{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--blaek);border-radius:7px;overflow:hidden}
.type button{display:flex;flex-direction:column;align-items:center;gap:0;border:0;border-radius:0;box-shadow:none;padding:5px 6px;min-height:44px;line-height:1.15}
.type button+button{border-left:1.5px solid var(--blaek)}
.type small{font:500 11px var(--mono);color:var(--daempet)}
.type button[data-type=lavtryk][aria-pressed=true]{background:#f9dcc0}
.type button[data-type=hoejtryk][aria-pressed=true]{background:#cfe0ee}
.type button[aria-pressed=true] small{color:var(--blaek)}
.type button[aria-pressed=false] b{font-weight:600}
.type button:active{transform:none}
.trin{display:flex;flex-direction:column;gap:3px}
.trin button{display:flex;align-items:center;gap:10px;text-align:left;box-shadow:none;border-color:transparent;background:none;padding:4px 8px;min-height:36px}
.trin button:hover{background:#e3f0f5}
.trin i{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--blaek);border-radius:50%;font:700 13px var(--display);font-style:normal}
.trin button[aria-pressed=true]{background:var(--blaek);color:var(--papir);border-color:var(--blaek)}
.trin button[aria-pressed=true] i{background:var(--papir);color:var(--blaek);border-color:var(--papir)}
.tekst{border-top:1px solid var(--linje);padding-top:10px;flex:1}
.tekst h2{font:700 16px/1.25 var(--display);margin:0 0 6px}
.tekst p{font-size:14.5px;line-height:1.42;margin:0}
.knapper{display:flex;gap:8px}
.knapper button{flex:1;padding:8px 10px}
#afspil{background:var(--blaek);color:var(--papir)}
#afspil:hover{background:#2c4a4a}

.forklaring{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin-top:20px;font-size:15px}
.forklaring>p{margin:0}
.forklaring b{font-family:var(--display)}
details{border-top:1.5px solid var(--blaek);padding-top:10px}
summary{font:600 14px var(--display);cursor:pointer}
.uddybning p{margin:10px 0 0}

.fokus header,.fokus .overlinje,.fokus .forklaring{display:none}
.fokus main{max-width:1500px}
.fokus .figur{height:clamp(320px,calc(100dvh - 80px),900px)}

@media (max-width:820px){
  .laboratorium{grid-template-columns:1fr}
  .figur{height:clamp(340px,62vh,480px)}
  .panel{border-left:0;border-top:2px solid var(--blaek);padding:12px}
  .trin{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
  .trin button{flex-direction:column;gap:3px;padding:6px 2px;font-size:11.5px;text-align:center;border:1.5px solid var(--linje)}
  .tekst{padding-top:10px}
  .forklaring{display:block}
  .forklaring details{margin-top:16px}
}
@media (max-width:560px){
  main{padding:10px 12px 24px}
  nav{padding:7px 12px;gap:12px}nav>span{display:none}
  .titel{align-items:center}
  h1{font-size:23px}
  .tekst p{font-size:14.5px}
}