/* ==========================================================================
   Mestertavlen — det offentlige site (UC-152). ÉT stylesheet for alle sider.

   Lå før inline i index.html. Da siden blev delt op i forside + undersider
   (feedback 19-08), ville det have betydet den samme CSS fem steder — og fem
   steder, der falder fra hinanden hver gang brandet flytter sig.

   Ren CSS uden build: siderne skal kunne renderes af en browser med JavaScript
   slået fra, og de må ikke afhænge af Wasm-bundlet for at vise noget.

   Farverne er de samme tokens som mockups/assets/app.css og AppFarver.
   ========================================================================== */

:root{
  --navy:#17293a; --messing:#b08653; --messing-soft:#f7efe4;
  --bg:#f4f6f8; --card:#fff; --ink:#1f2933; --muted:#6b7684; --line:#e4e8ec;
  --green:#16a34a; --orange:#f59e0b; --red:#dc2626;
  --wrap:1040px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
a{color:var(--navy)}

/* ---- Topbjælke ---- */
/* NAVY BJÆLKE — og det er ikke pynt, det er den eneste ærlige løsning på et logo, der kun findes
   i lyse varianter. Vi har prøvet begge alternativer: en navy PLADE bag logoet ligner et klistermærke,
   og en OMFARVET mørk udgave bliver klodset, fordi tykke lyse streger optisk vejer tungere, når man
   vender kontrasten (det er derfor en designer tegner den mørke variant i stedet for at farve om).
   Med en mørk bjælke passer designerens egen fil, som den er leveret. */
.top{background:var(--navy);border-bottom:1px solid var(--navy)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:64px;flex-wrap:wrap}
/* Logoet findes kun i LYSE varianter, så på den hvide bjælke står det på en navy plade.
   Ingen omfarvning: vi opfinder ikke en logo-variant, designeren ikke har lavet.

   ⚠️ BRUG «-kompakt»-FILEN, IKKE DEN FULDE LÅS. Den fulde bærer sloganet «OVERBLIK. STYRING.
   FREMDRIFT.» i en meget fin sporing, og den falder fra hinanden ved ENHVER størrelse, der passer
   i et sidehoved — ved 22 px er den grød, og selv ved 46 px står der «OVERB. K STYRNG FREMDRFT».
   Den kompakte er nøjagtig samme fil med sloganets 29 stier fjernet; mærke og ordbillede er
   designerens egne, urørte. Sloganet hører til, hvor logoet er stort.

   SIDEHOVEDET bruger «-moerk»: samme kompakte fil, hvor den nær-hvide flade (#F8F9F9) er byttet til
   brandets navy. Et rent farveskift på 23 flader — ingen sti flyttet, messingen urørt. Det er den
   variant, en designer normalt leverer som par til den lyse, og vi manglede den.
   FODEN er navy, så dér står den LYSE (-kompakt) — det er hele grunden til, at der findes to. */
.logo{display:inline-flex;align-items:center;gap:11px;flex:none;text-decoration:none}
.logo img{display:block;height:34px;width:auto}
/* Navnet sættes i sidens EGEN skrift i stedet for at bruge logo-filens ordbillede. Sporingen i
   filen er for fin til små størrelser (sloganet forsvandt helt), og en levende skrift er skarp i
   enhver størrelse og på enhver skærm. Ikonet er designerens — urørt, i sine egne farver. */
.logo .ordmaerke{font-weight:800;font-size:20px;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.logo .ordmaerke em{font-style:normal;color:var(--messing)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.top nav a{
  text-decoration:none;color:#a8b6c4;font-size:14.5px;font-weight:600;
  padding:8px 11px;border-radius:7px;white-space:nowrap;
}
.top nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.top nav a.her{color:#fff;background:rgba(255,255,255,.14)}

/* ---- Knapper ---- */
.btn{
  display:inline-block;padding:13px 24px;border-radius:9px;font-weight:700;font-size:16px;
  text-decoration:none;border:1px solid transparent;white-space:nowrap;
}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{filter:brightness(1.2)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--navy)}
/* En knap, der ikke virker, er værre end ingen knap: ikke-klikbare ting ser ikke klikbare ud. */
.btn-vent{background:#eef1f4;border-color:var(--line);color:var(--muted);cursor:default}
.btn small{display:block;font-weight:500;font-size:13px;opacity:.75;margin-top:3px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Hero ---- */
.hero{padding:72px 0 56px}
.hero h1{font-size:clamp(32px,5.6vw,54px);line-height:1.08;letter-spacing:-.03em;margin:0 0 20px;max-width:15em}
.hero h1 em{font-style:normal;color:var(--messing)}
.hero .lead{font-size:clamp(17px,2.2vw,20px);color:var(--muted);margin:0 0 30px;max-width:32em}

/* ---- Sektioner ---- */
section{padding:56px 0}
section.alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(24px,3.4vw,32px);letter-spacing:-.02em;margin:0 0 10px;line-height:1.15}
h3{margin:0 0 8px;font-size:17px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 30px;max-width:42em}

/* ---- Problem-kort: forsidens eneste indhold ---- */
/* 420px og ikke 280: med fire kort giver en smallere spærring 3+1, og det ene kort på anden række
   ser ud som om der mangler noget. To og to læses som «fire ting», hvilket er dét, teksten siger. */
/* `min(420px,100%)` og ikke bare `420px`: en bar minmax-bund KRYMPER IKKE under sit minimum, så
   på en 360 px telefon tvang kortene siden 80 px bredere end skærmen. `auto-fit` fjerner kolonner,
   men den fjerner ikke minimumsbredden — det er dét, `min()` gør. */
.problemer{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.problem{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.problem b{display:block;font-size:18px;letter-spacing:-.01em;margin-bottom:6px;line-height:1.25}
.problem span{color:var(--muted);font-size:15px}

/* ---- Kort i gitter ---- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.kort{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
section.alt .kort{background:var(--bg)}
.kort p{margin:0;color:var(--muted);font-size:14.5px}

/* ---- Nummereret punktform (den form, demoen faktisk forstod) ---- */
ul.punkter{list-style:none;margin:0;padding:0;display:grid;gap:14px}
ul.punkter li{display:flex;gap:13px;align-items:flex-start}
ul.punkter b{display:block;font-size:15.5px}
ul.punkter span{color:var(--muted);font-size:14.5px}
.nr{
  flex:none;width:24px;height:24px;margin-top:2px;border-radius:7px;
  background:var(--messing-soft);color:var(--messing);font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.todelt{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}

/* ---- Skærmbilleder: altid i en ramme, så de ikke forveksles med siden selv ---- */
.skaerm{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(23,41,58,.06)}
.skaerm .bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f7f9fb;border-bottom:1px solid var(--line)}
.skaerm .bar i{width:9px;height:9px;border-radius:50%;background:#d6dce2;display:block}
.skaerm .bar em{font-style:normal;margin-left:8px;font-size:11.5px;color:var(--muted)}
.skaerm img{display:block;width:100%;height:auto}
figure{margin:0}
figcaption{margin-top:12px}
figcaption > b{display:block;font-size:16.5px;letter-spacing:-.01em;margin-bottom:3px}
figcaption span{color:var(--muted);font-size:14.5px}

/* ---- Eksempel-illustration ---- */
.demo{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.demo .demo-h{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.demo .demo-h b{font-size:15px}
.maerkat{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 9px;
}
.rows{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;border-left-width:4px;background:var(--card)}
.row.g{border-left-color:var(--green)} .row.o{border-left-color:var(--orange)} .row.r{border-left-color:var(--red)}
.row .navn{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .num{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.row.g .num{color:var(--green)} .row.o .num{color:var(--orange)} .row.r .num{color:var(--red)}
.row .lbl{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.demo .forklaring{margin:14px 0 0;font-size:13.5px;color:var(--muted)}

/* ---- Lister på undersider ---- */
ol.trin{margin:0;padding-left:22px}
ol.trin li{margin-bottom:10px;font-size:15px}
.note{font-size:13.5px;color:var(--muted);margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}

/* ---- Fod ---- */
footer{background:var(--navy);color:#93a3b3;padding:36px 0;font-size:14px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer .logo{background:none;padding:0}
footer .logo img{height:28px}
footer .hoejre{margin-left:auto}
footer a{color:#fff}

@media (max-width:640px){
  .hero{padding:48px 0 40px}
  section{padding:44px 0}
  .row .num{font-size:22px}
  .cta .btn{flex:1 1 100%;text-align:center}
  /* Sidehovedet på en telefon: ikon + navn + fem menupunkter er bredere end 390 px, og resultatet
     var 50 px vandret scroll på FORSIDEN — den skærm, flest lander på fra et link. Logoet skrumper,
     og menuen får hele bredden på sin egen linje. */
  .top .wrap{min-height:0;padding-top:10px;padding-bottom:10px}
  .logo img{height:28px}
  .logo .ordmaerke{font-size:17px}
  .top nav{width:100%;margin-left:0;gap:2px}
  .top nav a{padding:7px 9px;font-size:14px}
}