:root{
  --papir:#fff9ee;
  --blaek:#172d33;
  --blaa:#0c6591;
  --daempet:#53666b;
  --display:'Archivo',system-ui,sans-serif;
  --tekst:'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(--tekst)
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  font:600 14px var(--display);
  color:inherit;
  cursor:pointer
}
a{
  color:inherit
}
button:disabled{
  opacity:.35;
  cursor:default
}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid #af4aca;
  outline-offset:4px
}
[hidden]{
  display:none!important
}
.sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.regnbue{
  height:5px;
  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%)
}
.site-linje{
  max-width:1440px;
  margin:auto;
  height:42px;
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 32px;
  border-bottom:1px solid #172d331c
}
.brand{
  font:800 20px var(--display);
  text-decoration:none;
  letter-spacing:-1px
}
.brand span{
  font-weight:400
}
.tilbage{
  font:500 12px var(--display);
  text-decoration:none
}
.tilbage:hover{
  text-decoration:underline
}
.site-emne{
  margin-left:auto;
  font:10px var(--mono);
  letter-spacing:.12em;
  color:var(--daempet)
}
main{
  max-width:1440px;
  margin:auto;
  padding:0 32px 28px
}
.indledning{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 0 15px
}
.overlinje{
  font:10px var(--mono);
  color:var(--blaa);
  letter-spacing:.16em;
  margin:0 0 5px
}
h1{
  font:700 clamp(21px,2.25vw,32px)/1.15 var(--display);
  letter-spacing:-.045em;
  margin:0
}
button{
  transition:background .15s,color .15s,box-shadow .15s
}
.diskret{
  background:none;
  border:0;
  padding:9px 10px;
  white-space:nowrap
}
.diskret:hover{
  background:#172d330c;
  border-radius:6px
}
.vaerksted{
  border:1.5px solid var(--blaek);
  border-radius:13px;
  overflow:hidden;
  box-shadow:4px 4px 0 #172d33;
  background:#fffdf7
}
.figur-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 17px;
  background:#0c2435;
  color:#d9e7e5;
  min-height:36px;
  font:500 12px var(--display)
}
.figur-vaerktoej{
  display:flex;
  gap:10px
}
.figur-knap{
  border:0;
  background:transparent;
  color:#d9e7e5;
  font-size:11px;
  padding:5px 7px;
  border-radius:4px
}
.figur-knap:hover{
  background:#ffffff18
}
.scene{
  position:relative;
  height:clamp(240px,calc(100svh - 352px),490px);
  margin:0;
  background:#153f55;
  overflow:hidden;
  isolation:isolate
}
.landskab{
  position:absolute;
  inset:0
}
.landskab svg,.landskab canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block
}
.sted,.proces,.jord-label,.sammenlign-maerke{
  position:absolute;
  pointer-events:none
}
.sted{
  color:#fcf5dd;
  font:500 14px var(--display)
}
.sol-label{
  left:9.7%;
  top:33%
}
.rum-label{
  right:3%;
  top:7%;
  color:#b8d0d4;
  font:10px var(--mono);
  letter-spacing:.19em
}
.jord-label{
  bottom:5%;
  left:4%;
  font:600 14px var(--display);
  color:#eef3dd
}
.jord-label span{
  display:block;
  font:400 12px var(--display);
  color:#cee0ca;
  margin-top:3px
}
.proces{
  display:flex;
  align-items:center;
  gap:9px;
  color:#f9f6e9;
  font:500 13px/1.35 var(--display);
  text-shadow:0 1px 6px #0a2237
}
.proces small{
  font:400 11px/1.3 var(--display);
  color:#d2e5e4
}
.sol-proces{
  left:24%;
  top:45%;
  color:#ffe9aa
}
.jord-proces{
  left:53%;
  top:47%;
  color:#ffd3bf
}
.gas-proces{
  left:67%;
  top:20%
}
.mod-proces{
  left:77%;
  top:55%;
  color:#ffd3bf
}
.ud-proces{
  left:45%;
  top:7%;
  font-size:11px
}
.gas-symbol{
  color:#cbe8dd;
  font-size:24px
}
.sammenlign-maerke{
  top:8%;
  left:31%;
  background:#112b3fe8;
  color:#deede5;
  padding:7px 12px;
  font:11px var(--display);
  border:1px solid #a4c4c16b;
  border-radius:30px
}
.forklaring{
  padding:16px 24px 0
}
.trin-overlinje{
  font:9px var(--mono);
  color:var(--blaa);
  letter-spacing:.12em;
  margin:0 0 4px
}
h2{
  font:650 23px/1.2 var(--display);
  letter-spacing:-.035em;
  margin:0 0 7px
}
.forklaring>p:not(.trin-overlinje){
  margin:0;
  font-size:16px;
  line-height:1.45;
  max-width:92ch
}
.forklaring .observation:not(:empty){
  font-size:13px;
  margin-top:5px;
  color:var(--blaa);
  font-family:var(--display)
}
.betjening{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:13px 24px 16px
}
.forsoeg{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.forsoeg-knap{
  border:1px solid #b4c9c9;
  border-radius:7px;
  background:#eaf3ef;
  padding:10px 13px;
  font-size:12px
}
.forsoeg-knap:hover{
  background:#d6e9e3
}
.forsoeg-knap[aria-pressed=true]{
  background:#173f50;
  border-color:#173f50;
  color:#fff9ee
}
#start-hint{
  font:12px var(--display);
  color:var(--daempet)
}
.frem-tilbage{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0
}
.primaer{
  border:1px solid var(--blaek);
  border-radius:7px;
  background:var(--blaek);
  color:#fff9ee;
  padding:11px 16px;
  font-size:12px;
  display:flex;
  gap:22px;
  align-items:center
}
.primaer:hover{
  background:#0c6591
}
.trin-nav{
  display:flex;
  border-top:1px solid #dce2d9;
  background:#f4f4e9;
  padding:0 12px;
  gap:5px
}
.trin-nav button{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 5px;
  background:none;
  border:0;
  font-size:11px;
  color:#53666b
}
.trin-nav button:hover{
  color:#0c6591;
  background:#e5eeea
}
.trin-nav button[aria-current=step]{
  color:#0b6086
}
.trin-nav button[aria-current=step]:after{
  content:'';
  position:absolute;
  bottom:0;
  left:10%;
  right:10%;
  height:3px;
  background:#0c759b
}
.trin-prik{
  width:7px;
  height:7px;
  border:1px solid #8aabae;
  border-radius:50%;
  flex-shrink:0
}
.trin-nav button[aria-current=step] .trin-prik{
  background:#0c759b;
  border-color:#0c759b;
  box-shadow:0 0 0 3px #0c759b16
}
.om{
  margin-top:20px;
  color:var(--daempet);
  font-size:14px
}
.om summary{
  cursor:pointer;
  font:12px var(--display);
  width:fit-content;
  padding:5px 0
}
.om-indhold{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:50px;
  padding:20px 0
}
.om h2{
  font-size:18px;
  color:var(--blaek)
}
.om p{
  margin:8px 0 15px
}
.noscript{
  padding:20px
}
.fokus .site-top,.fokus .indledning{
  display:none
}
.fokus main{
  max-width:none;
  padding:12px
}
.fokus .scene{
  height:clamp(240px,calc(100svh - 255px),900px)
}
.fokus .om{
  display:none
}
.fokus .figur-top:before{
  content:'DRIVHUSEFFEKTEN';
  font:10px var(--mono);
  margin-right:20px
}
.fokus #trin-navn{
  margin-right:auto
}
body.fokus #fokus{
  position:fixed;
  bottom:4px;
  right:16px;
  display:block;
  z-index:5;
  background:var(--papir);
  font-size:11px;
  padding:4px 10px
}
.fokus .indledning:has(#fokus){
  display:contents
}
.fokus .indledning>div{
  display:none
}
.forklar-selv .proces,.forklar-selv .jord-label span{
  visibility:hidden
}
@media(min-width:760px) and (max-height:650px){
  .indledning{
    padding:12px 0
  }
  .overlinje{
    font-size:9px
  }
  .scene{
    height:calc(100svh - 360px);
    min-height:210px
  }
  .forklaring{
    padding-top:12px
  }
  .forklaring h2{
    font-size:20px;
    margin-bottom:4px
  }
  .forklaring>p:not(.trin-overlinje){
    font-size:15px
  }
  .betjening{
    padding-top:9px;
    padding-bottom:12px
  }
  .trin-nav button{
    padding:10px 4px
  }
  .om{
    margin-top:15px
  }
}
@media(max-width:759px){
  main{
    padding:0 14px 20px
  }
  .site-linje{
    padding:0 16px;
    gap:20px
  }
  .site-emne{
    font-size:8px
  }
  .indledning{
    padding:17px 0 14px;
    align-items:flex-end
  }
  h1{
    font-size:24px;
    max-width:24ch
  }
  .overlinje{
    font-size:8px;
    letter-spacing:.1em
  }
  #fokus{
    font-size:11px;
    padding:7px 0;
    white-space:normal;
    max-width:75px
  }
  .figur-top{
    padding:6px 11px
  }
  .figur-knap{
    font-size:11px
  }
  .figur-knap span{
    display:none
  }
  .scene{
    height:310px
  }
  .landskab{
    width:125%;
    left:-8%
  }
  .sol-label{
    left:6%;
    top:32%
  }
  .rum-label{
    font-size:8px
  }
  .proces{
    font-size:11px;
    gap:3px
  }
  .proces small{
    font-size:10px
  }
  .sol-proces{
    left:10%;
    top:47%
  }
  .jord-proces{
    left:44%;
    top:49%
  }
  .gas-proces{
    left:44%;
    top:20%
  }
  .mod-proces{
    left:66%;
    top:63%;
    font-size:10px
  }
  .ud-proces{
    left:50%;
    top:4%;
    font-size:9px
  }
  .jord-label{
    font-size:12px;
    bottom:4%
  }
  .jord-label span{
    font-size:11px
  }
  .forklaring{
    padding:16px 15px 0
  }
  .forklaring h2{
    font-size:22px
  }
  .forklaring>p:not(.trin-overlinje){
    font-size:16px
  }
  .betjening{
    padding:13px 15px 16px;
    flex-wrap:wrap
  }
  .forsoeg{
    width:100%;
    gap:7px
  }
  .forsoeg-knap{
    font-size:11px;
    padding:10px
  }
  .frem-tilbage{
    margin-left:auto
  }
  .primaer{
    font-size:12px
  }
  .trin-nav{
    flex-wrap:wrap;
    padding:7px;
    gap:0
  }
  .trin-nav button{
    flex:1 1 30%;
    font-size:10px;
    padding:10px 3px;
    gap:6px
  }
  .trin-nav button[aria-current=step]:after{
    left:15%;
    right:15%
  }
  .om-indhold{
    grid-template-columns:1fr;
    gap:12px
  }
  .sammenlign-maerke{
    left:4%;
    right:4%;
    top:3%;
    font-size:10px;
    text-align:center
  }
  .fokus .scene{
    height:clamp(300px,calc(100svh - 340px),650px)
  }
  .fokus .figur-top:before{
    display:none
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Dagslys og rolige procesbaner. Landskabet er baggrund, strålingen er fokus. */
.scene {
  background: #dcebe7;
}
.sted {
  color: #355967;
}
.rum-label {
  color: #3e6673;
}
.proces {
  color: #704337;
  text-shadow: none;
}
.proces small {
  color: #395f68;
}
.sol-proces {
  left: 24%;
  top: 34%;
  color: #79550b;
}
.jord-proces {
  left: 43%;
  top: 60%;
  color: #8f3b30;
}
.gas-proces {
  left: 71%;
  top: 34%;
  color: #315b65;
}
.mod-proces {
  left: 73%;
  top: 60%;
  color: #8f3b30;
}
.ud-proces {
  left: 60%;
  top: 6%;
  color: #8f3b30;
}
.gas-symbol {
  font-size: 13px;
  color: #426d72;
}
.jord-label {
  color: #173d38;
}
.jord-label span {
  color: #254c42;
}
@media (max-width: 759px) {
  .landskab {
    width: 100%;
    left: 0;
  }
  .sol-label {
    left: 8%;
    top: 34%;
  }
  .sol-proces {
    left: 15%;
    top: 39%;
    font-size: 10px;
  }
  .jord-proces {
    left: 37%;
    top: 57%;
    font-size: 10px;
  }
  .gas-proces {
    left: 70%;
    top: 37%;
    font-size: 9px;
  }
  .gas-proces small {
    display: none;
  }
  .gas-symbol {
    display: none;
  }
  .mod-proces {
    left: 72%;
    top: 59%;
    font-size: 9px;
  }
  .ud-proces {
    left: 58%;
    top: 4%;
    font-size: 9px;
  }
  .jord-label {
    font-size: 11px;
  }
  .jord-label span {
    font-size: 10px;
  }
}
/* Hold gasetiketten fri af de nye baner fra alle tre symboler. */
.gas-proces {
  left: 42%;
  top: 30%;
  font-size: 12px;
}
.gas-proces small {
  font-size: 10px;
}
.gas-symbol {
  display: none;
}
@media (max-width: 759px) {
  .gas-proces {
    left: 35%;
    top: 27%;
    font-size: 9px;
  }
}
.temperatur-note {
  margin: 7px 24px 0;
  max-width: 110ch;
  font: 11px/1.4 var(--display);
  color: #53666b;
}
.klima-valg {
  display: flex;
  gap: 5px;
}
.klima-valg button {
  border: 1px solid #b4c9c9;
  border-radius: 7px;
  padding: 7px 9px;
  background: #edf3ed;
  font-size: 10px;
  text-align: left;
}
.klima-valg strong {
  display: block;
  margin-top: 3px;
  font-size: 17px;
}
.klima-valg button[aria-pressed=true] {
  background: #173f50;
  border-color: #173f50;
  color: #fff9ee;
}
@media (min-width:760px) and (max-height:650px) {
  .vaerksted:has([data-trin="4"][aria-current]), .vaerksted:has([data-trin="5"][aria-current]) {
    --temperature-space: 36px;
  }
  .vaerksted:has([data-trin="4"][aria-current]) .scene, .vaerksted:has([data-trin="5"][aria-current]) .scene {
    height: calc(100svh - 396px);
    min-height: 175px;
  }
}
@media (max-width:759px) {
  .temperatur-note {
    margin: 8px 15px 0;
    font-size: 11px;
  }
  .klima-valg {
    width: 100%;
  }
  .klima-valg button {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    padding: 7px;
  }
  .klima-valg strong {
    font-size: 17px;
  }
}
.forstaerket-trin .ud-proces {
  left: 55%;
  top: 6%;
}