:root{
  --blaek:#1b2430; --daemp:#5d6b7a; --linje:#dde3ea; --bund:#f6f8fa; --hvid:#fff;
  --ok:#1a7f4b; --ok-bg:#e8f6ee; --fejl:#b3261e; --fejl-bg:#fdecea;
  --advarsel:#8a5a00; --advarsel-bg:#fff5e0; --info:#1c5d99; --info-bg:#e8f1fa;
  --neutral:#5d6b7a; --neutral-bg:#eef1f4; --accent:#1c5d99;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--blaek);background:var(--bund)}
a{color:var(--accent)}
.demobjaelke{background:#3a2c00;color:#ffe9a8;padding:.5rem 1rem;font-weight:600;
  text-align:center;font-size:.9rem}
header.top{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;background:var(--hvid);
  border-bottom:1px solid var(--linje);padding:.7rem 1.2rem}
.logo{font-weight:700;font-size:1.1rem;text-decoration:none;color:var(--blaek)}
header nav{display:flex;flex-wrap:wrap;gap:.2rem;flex:1}
header nav a{padding:.4rem .6rem;border-radius:6px;text-decoration:none;color:var(--blaek);
  font-size:.92rem}
header nav a:hover{background:var(--neutral-bg)}
.udlog{display:flex;align-items:center;gap:.5rem}
.hvem{color:var(--daemp);font-size:.85rem}
main{max-width:1180px;margin:0 auto;padding:1.4rem 1.2rem 3rem}
footer{max-width:1180px;margin:0 auto;padding:1rem 1.2rem 2rem;color:var(--daemp);font-size:.85rem}
h1{font-size:1.5rem;margin:.2rem 0 1rem}
h2{font-size:1.15rem;margin:1.6rem 0 .6rem}
h3{font-size:1rem;margin:1.2rem 0 .4rem}
p.hjaelp{color:var(--daemp);margin:.2rem 0 1rem;max-width:62ch}

.kort{background:var(--hvid);border:1px solid var(--linje);border-radius:10px;padding:1rem;
  margin-bottom:1rem}
.gitter{display:grid;gap:1rem}
.gitter.tre{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gitter.to{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1rem}
@media(max-width:900px){.split{grid-template-columns:1fr}}

.tal{font-size:2rem;font-weight:700;line-height:1}
.tal.nul{color:var(--daemp);font-weight:600}
.etiket{color:var(--daemp);font-size:.85rem}

table{width:100%;border-collapse:collapse;background:var(--hvid);font-size:.92rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--linje);vertical-align:top}
th{font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--daemp)}
tr:hover td{background:#fafbfc}
td.tal-h,th.tal-h{text-align:right;font-variant-numeric:tabular-nums}
.tabelramme{overflow-x:auto;border:1px solid var(--linje);border-radius:10px}

.maerke{display:inline-block;padding:.12rem .5rem;border-radius:999px;font-size:.78rem;
  font-weight:600;white-space:nowrap}
.maerke.ok{background:var(--ok-bg);color:var(--ok)}
.maerke.fejl{background:var(--fejl-bg);color:var(--fejl)}
.maerke.advarsel{background:var(--advarsel-bg);color:var(--advarsel)}
.maerke.info{background:var(--info-bg);color:var(--info)}
.maerke.neutral{background:var(--neutral-bg);color:var(--neutral)}

.besked{padding:.7rem .9rem;border-radius:8px;margin-bottom:.7rem;border:1px solid transparent}
.besked.ok{background:var(--ok-bg);border-color:#b8e0c9;color:#12603a}
.besked.fejl{background:var(--fejl-bg);border-color:#f3c2be;color:#8c1d18}
.besked.advarsel{background:var(--advarsel-bg);border-color:#f0d79a;color:#6b4600}

button,.knap{font:inherit;background:var(--accent);color:#fff;border:0;border-radius:7px;
  padding:.5rem .9rem;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.knap:hover{filter:brightness(1.08)}
button.sekundaer,.knap.sekundaer{background:var(--hvid);color:var(--blaek);
  border:1px solid var(--linje)}
button.fare{background:var(--fejl)}
button.lille,.knap.lille{padding:.3rem .6rem;font-size:.85rem}
button:disabled{background:#adb7c1;cursor:not-allowed}

label{display:block;font-size:.85rem;color:var(--daemp);margin:.6rem 0 .15rem}
input:not([type]),input[type=text],input[type=search],input[type=email],input[type=password],input[type=date],input[type=number],
select,textarea{width:100%;padding:.45rem .55rem;border:1px solid var(--linje);border-radius:7px;
  font:inherit;background:var(--hvid)}
textarea{min-height:70px}
.raekke{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.raekke>*{flex:1;min-width:140px}
.knapraekke{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}

.dok-visning{width:100%;height:70vh;border:1px solid var(--linje);border-radius:8px;
  background:var(--hvid)}
.dok-visning img{max-width:100%}

.evidens{font-size:.8rem;color:var(--daemp);margin-top:.15rem;font-style:italic}
.felt{margin-bottom:.5rem}
.tom{padding:2.5rem 1rem;text-align:center;color:var(--daemp);background:var(--hvid);
  border:1px dashed var(--linje);border-radius:10px}
.liste-ren{list-style:none;padding:0;margin:.3rem 0}
.liste-ren li{padding:.3rem 0;border-bottom:1px solid var(--linje)}
.smaa{font-size:.85rem;color:var(--daemp)}
.trin{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem 0;
  border-bottom:1px solid var(--linje)}
.trin .nr{width:28px;height:28px;border-radius:50%;background:var(--neutral-bg);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.trin.klar .nr{background:var(--ok-bg);color:var(--ok)}
.advarselsboks{background:var(--advarsel-bg);border:1px solid #f0d79a;border-radius:8px;
  padding:.7rem .9rem;margin:.6rem 0}
.fejlboks{background:var(--fejl-bg);border:1px solid #f3c2be;border-radius:8px;
  padding:.7rem .9rem;margin:.6rem 0}
.infoboks{background:var(--info-bg);border:1px solid #bcd6ee;border-radius:8px;
  padding:.7rem .9rem;margin:.6rem 0}
code{background:var(--neutral-bg);padding:.05rem .3rem;border-radius:4px;font-size:.88em}