:root{
  color-scheme:light;
  --topbar:#4a5d5b;
  --deep:#1f3b39;
  --deep2:#2c524e;
  --panel:#23423f;
  --panel-line:rgba(255,255,255,.12);
  --sage:#d2dcda;
  --mint:#bfe9e1;
  --teal:#17a394;
  --teal-dark:#0f7f73;
  --ink:#1d2b2a;
  --muted:#5f6f6d;
  --lime:#c9e04a;
  --white:#fff;
  --shadow:0 6px 22px rgba(20,45,43,.14);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Rubik',system-ui,sans-serif;color:var(--ink);background:var(--sage);font-weight:400;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}

/* top bar */
.topbar{background:var(--topbar);color:#fff;height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:10}
.topbar .wrap{display:flex;align-items:center;gap:18px;width:100%}
.burger{width:18px;display:grid;gap:3px}
.burger span{height:2px;background:#fff;border-radius:1px}
.brand{font-weight:600;letter-spacing:.06em;font-variant:small-caps;font-size:17px}
.topbar nav{margin-left:auto;display:flex;gap:22px;font-size:13px;font-weight:500;opacity:.92}

/* hero */
.hero{background:linear-gradient(120deg,#132926 0%,#1b3835 55%,#29504b 100%);color:#fff;padding:32px 0 134px}
.hero h1{font-weight:400;font-size:35px;margin:0 0 24px}
.hero p{max-width:none;margin:0;opacity:.85;line-height:1.55;font-weight:300}
.eyebrow{display:flex;gap:10px;align-items:center;font-size:11px;font-weight:600;color:var(--lime);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.eyebrow i{width:1px;height:10px;background:#fff;opacity:.7}

/* uddannelse cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;column-gap:34px;margin-top:-78px}
.card{background:#fff;border:1px solid #e3e9e8;box-shadow:var(--shadow);padding:22px 20px 18px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(20,45,43,.2)}
.card.active{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal),var(--shadow)}
.card.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--teal)}
.icon{position:relative;width:34px;height:30px;margin-bottom:12px}
.icon::before{content:"";position:absolute;left:12px;top:-6px;width:20px;height:20px;border-radius:50%;background:var(--mint)}
.icon svg{position:relative;width:26px;height:26px;stroke:var(--deep2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin:0 0 4px;font-weight:400;font-size:17px}
.card small{color:var(--muted);font-size:12px;line-height:1.45;display:block}
.card .more{display:inline-block;margin-top:14px;font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* main area */
main{padding:40px 0 70px}
.layout{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;column-gap:34px;align-items:start}
.panel{background:var(--panel);color:#fff;box-shadow:var(--shadow);padding:0 0 6px;position:sticky;top:20px}
.panel h4{margin:0;padding:30px 22px 26px;border-bottom:1px solid var(--panel-line);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#eefaf7;opacity:1}
.spec{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;border-bottom:1px solid var(--panel-line);color:#fff;font:inherit;font-size:14.5px;font-weight:350;padding:13px 22px;cursor:pointer;text-align:left;gap:12px}
.spec:last-child{border-bottom:0}
.spec .n{font-size:11px;font-weight:400;opacity:.6;margin-left:auto}
.spec .arr{opacity:.6;transition:transform .15s}
.spec:hover{background:rgba(255,255,255,.06)}
.spec.active{background:var(--teal)}
.spec.active .n,.spec.active .arr{opacity:1}
.spec.active .arr{transform:translateX(3px)}

.result{background:#fff;box-shadow:var(--shadow);padding:28px 28px 22px;min-height:300px}
.result-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;justify-content:space-between;margin-bottom:18px}
.result h2{margin:0;font-weight:400;font-size:24px}
.result .sub{color:var(--muted);font-size:13px;margin-top:4px}
.tools{display:flex;gap:10px;flex-wrap:nowrap;align-items:center;width:100%}
.chip{white-space:nowrap;flex:0 0 auto}
.search{background:#fff;color:var(--ink);border:1px solid #c9d4d2;padding:8px 12px;font:inherit;font-size:13px;flex:1 1 auto;width:auto;min-width:180px;outline:none}
.search:focus{border-color:var(--teal);background:#fff}
.search::placeholder{color:#8a9896}
.chip{border:1px solid var(--teal);background:#fff;color:var(--teal-dark);font:inherit;font-size:12px;font-weight:500;padding:6px 12px;cursor:pointer}
.chip.on{background:var(--teal);color:#fff}

.stats{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.stat{background:#eef3f2;padding:10px 14px;min-width:120px}
.stat b{display:block;font-size:20px;font-weight:500;color:var(--deep2)}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:2px solid var(--deep2);padding:8px 10px;cursor:pointer;user-select:none;white-space:nowrap}
th .s{opacity:.5;font-size:10px;margin-left:3px}
td{padding:11px 10px;border-bottom:1px solid #e6ecea;vertical-align:top}
tr:hover td{background:#f5f8f7}
td.nr{color:var(--muted);font-variant-numeric:tabular-nums;width:80px}
td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:11.5px;font-weight:500;padding:3px 8px;background:var(--mint);color:var(--deep)}
.tag.amu{background:#e9f0c2}
.empty{padding:40px 10px;text-align:center;color:var(--muted)}
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);min-height:260px;gap:10px}
.placeholder .icon{margin:0}

.btn{display:inline-flex;gap:8px;align-items:center;background:var(--teal);color:#fff;border:0;font:inherit;font-size:12px;font-weight:600;padding:8px 14px;cursor:pointer}
.btn:hover{background:var(--teal-dark)}
.btn.ghost{background:#fff;color:var(--deep2);border:1px solid var(--deep2)}
.foot-note{font-size:11.5px;color:var(--muted);margin-top:16px}

footer{background:linear-gradient(120deg,#0d201e 0%,#142e2b 55%,#20423e 100%);color:#cfdcda;font-size:12px;padding:34px 0}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--deep);color:#fff;padding:10px 18px;font-size:13px;transition:transform .25s,opacity .25s;opacity:0;pointer-events:none;box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}


.hero{position:relative}
.logo{display:block;height:22px;width:auto;margin:0 auto 64px}

.foot{display:flex;align-items:center;gap:36px}
.foot p{margin:0;line-height:1.55;padding-left:36px;border-left:1px solid rgba(255,255,255,.18)}
.foot-logo{height:19px;width:auto;flex:0 0 auto;opacity:.95}
.tagline{display:inline-flex;align-items:center;gap:12px;margin-bottom:8px;font-size:14.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.tagline .dot{width:24px;height:1px;background:linear-gradient(90deg,rgba(23,163,148,0),rgba(23,163,148,.3))}
.tagline .txt{color:#8fc4b9;background:linear-gradient(90deg,#a9d9cf 0%,#8fc4b9 55%,#76b1a5 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.9}
.opdateret{display:block;margin-top:6px;color:#9fb5b1}
.foot-logo-link{display:inline-flex;flex:0 0 auto;transition:opacity .15s}
.foot-logo-link:hover{opacity:.75}
.foot-logo-link:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:2px}
.back{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);text-decoration:none;font-size:13px;margin-bottom:40px;transition:color .15s}
.back:hover{color:#fff}
.back span{transition:transform .15s}
.back:hover span{transform:translateX(-3px)}
.back:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:2px}
.hero .back + div{display:block}
/* afrundede hjørner */
.card,.panel,.result{border-radius:12px;overflow:hidden}
.search,.chip,.btn{border-radius:6px}
.tag{border-radius:4px}
.toast{border-radius:8px}
.panel .spec:first-of-type{border-radius:0}
.card{min-height:230px;padding:30px 26px 24px;display:flex;flex-direction:column}
.card .icon{margin-bottom:22px}
.card h3{font-size:23px;margin-bottom:8px}
.card small{font-size:13px}
.card .more{margin-top:auto;padding-top:18px}
.result{grid-column:span 2}
@media (max-width:820px){.tools{flex-wrap:wrap}.search{flex-basis:100%}.card{min-height:170px}.result{grid-column:auto}}

@media (max-width:820px){
  .cards{grid-template-columns:1fr;gap:12px}
  .layout{grid-template-columns:1fr}
  .panel{position:static}
  .topbar nav{display:none}
  .hero h1{font-size:27px}
  .logo{height:18px;margin-bottom:40px}
  .foot{flex-direction:column;align-items:center;text-align:center;gap:16px}
  .foot p{padding-left:0;border-left:0}
  .result{padding:20px 16px}
  td.nr{width:auto}
  .hide-sm{display:none}
}

/* --- Mobil: kompakte bokse og lavere hero --- */
@media (max-width:820px){
  .hero{padding:36px 0 52px}
  .cards-wrap{position:relative;background:var(--sage);border-radius:16px 16px 0 0;margin-top:-16px;padding-top:32px}
  .back{margin-bottom:36px}
  .hero h1{margin-bottom:18px}
  .cards{margin-top:0;gap:18px}
  .card{min-height:0;padding:22px 22px 20px;display:grid;grid-template-columns:34px 1fr;column-gap:14px;row-gap:0;align-items:start}
  .card .icon{grid-row:1 / span 3;margin:2px 0 0;width:30px}
  .card h3{font-size:18px;margin:0 0 8px;line-height:1.25}
  .card small{font-size:12.5px}
  .card .more{margin-top:0;padding-top:12px}
  main{padding-top:40px}
  /* kompakt tabel: nr | titel | niveau | varighed */
  .result{padding:20px 14px}
  .result table{table-layout:auto;font-size:13.5px}
  .result th{font-size:10px;letter-spacing:.04em;padding:8px 5px}
  .result th .s{display:none}
  .result td{padding:10px 5px;line-height:1.35}
  .result td.nr{font-size:12px;width:1%;white-space:nowrap}
  .result td.num{width:1%;white-space:nowrap;font-size:12.5px}
  .result .tag{font-size:11px;padding:2px 6px}
  .result td:nth-child(2){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
}