/* Markedine.dk — laget der gør det kompilerede design responsivt og navigerbart.
   Designets egne styles ligger inline på hvert element. Inline vinder over et
   stylesheet, så overstyringer her skal bruge !important. Det er ikke pænt;
   det er prisen for at beholde designet præcis som tegnet på store skærme. */

:root{
  --gul:#F8B500; --gul-moerk:#ce9b0e; --moerk:#283149; --groen:#009879; --groen-moerk:#007a61;
  --graa:#575757; --sand:#faf8f3; --kant:#e9e9e9;
  --nav-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}
/* Basisskrift. Designet sætter selv skrift inline på hvert synligt element, så
   denne rammer kun det, vi selv har bygget — mobilmenuens knaptekst og de
   skjulte skærmlæser-etiketter. Uden den tegnes de i Arial, og skriftkontrollen
   (tools/skrifttjek.mjs) melder fald-tilbage, man så lærer at ignorere. */
body{margin:0;overflow-x:hidden;font-family:Roboto,Arial,sans-serif}
/* Formularelementer arver ikke skrift fra body — de har browserens egen.
   Uden denne linje tegnes burgerknappen og videoknappens skjulte etiket i
   Arial, selv om alt omkring dem er Roboto. */
button,input,select,textarea{font-family:inherit}
img,video{max-width:100%}

/* Designets rod har min-width:1100px. Den fjernes, ellers scroller mobilen vandret. */
.md-side{min-width:0 !important;overflow-x:clip}

.md-visuelt-skjult{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.md-spring{position:absolute;left:-9999px;z-index:200;padding:12px 18px;background:var(--moerk);color:#fff;border-radius:0 0 10px 0;font:500 15px Roboto,Arial,sans-serif}
.md-spring:focus{left:0;top:0}

:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--gul);outline-offset:2px}

/* ---------------------------------------------------------------- navigation */
.md-nav-baand{position:sticky;top:0;z-index:60;padding:14px 20px;background:linear-gradient(#fff 55%,rgba(255,255,255,0))}
.md-nav{display:flex;align-items:center;gap:20px;justify-content:space-between;
  max-width:1160px;margin:0 auto;padding:9px 10px 9px 20px;background:#fff;
  border-radius:999px;box-shadow:0 10px 34px rgba(40,49,73,.14)}
.md-logo{display:flex;align-items:center;flex-shrink:0}
.md-logo img{height:34px;width:auto;display:block}
.md-nav-midt{display:flex;align-items:center;gap:24px;font:500 15px Roboto,Arial,sans-serif}
.md-nav-hoejre{display:flex;align-items:center;gap:14px}
.md-nav-link{color:var(--moerk);text-decoration:none;padding:8px 4px}
.md-nav-link:hover,.md-drop-knap:hover{color:var(--gul-moerk)}
.md-nav-link.er-aktiv,.md-drop-knap.er-aktiv{background:var(--gul);color:var(--moerk);padding:8px 16px;border-radius:999px}

.md-drop{position:relative}
.md-drop-knap{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font:500 15px Roboto,Arial,sans-serif;color:var(--moerk);padding:8px 4px}
.md-drop--sprog .md-drop-knap{font-size:14px}
.md-drop-panel{position:absolute;top:calc(100% + 12px);left:-10px;width:min(340px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--kant);border-radius:16px;box-shadow:0 20px 48px rgba(40,49,73,.22);
  padding:10px;display:grid;gap:2px;z-index:90}
.md-drop-panel--sprog{left:auto;right:-8px;width:210px;border-radius:14px}
.md-drop-panel[hidden]{display:none}
.md-drop-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}

.md-nav-punkt{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:10px;
  font:500 14.5px Roboto,Arial,sans-serif;color:var(--moerk);text-decoration:none}
a.md-nav-punkt:hover{background:#fef3d2}
.md-nav-punkt--snart{color:#8a8a8a;cursor:default}
.md-nav-punkt.er-valgt{background:#fef3d2}
.md-nav-nr{font:400 13px "Fjalla One",Roboto,sans-serif;letter-spacing:.08em;color:var(--gul);width:22px;flex-shrink:0}
.md-nav-punkt--snart .md-nav-nr{color:#c4c4c4}
.md-flueben{margin-left:auto;color:var(--gul)}
.md-maerkat{margin-left:auto;font:400 10px "Fjalla One",Roboto,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:#8a8a8a;background:#f3f3f3;border-radius:999px;padding:5px 9px}

.md-knap{display:inline-flex;align-items:center;gap:8px;border-radius:999px;text-decoration:none;
  font:500 14.5px Roboto,Arial,sans-serif;white-space:nowrap}
.md-knap--linje{border:1.5px solid var(--moerk);color:var(--moerk);padding:9px 18px}
.md-knap--linje:hover{background:var(--moerk);color:#fff}
.md-knap--groen{background:var(--groen);color:#fff;padding:11px 22px;font-size:15px}
.md-knap--groen:hover{background:var(--groen-moerk);color:#fff}

.md-burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.md-burger-streg,.md-burger-streg::before,.md-burger-streg::after{position:absolute;left:11px;width:22px;height:2px;background:var(--moerk);border-radius:2px;content:""}
.md-burger-streg{top:21px}
.md-burger-streg::before{top:-7px;left:0}
.md-burger-streg::after{top:7px;left:0}
.md-burger[aria-expanded="true"] .md-burger-streg{background:transparent}
.md-burger[aria-expanded="true"] .md-burger-streg::before{transform:rotate(45deg);top:0}
.md-burger[aria-expanded="true"] .md-burger-streg::after{transform:rotate(-45deg);top:0}

.md-mobilmenu{display:none}
.md-mobil-gruppe{display:grid;gap:2px;padding:6px 0;border-top:1px solid var(--kant)}
.md-mobil-titel{font:400 12px "Fjalla One",Roboto,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8a;padding:8px 12px}
.md-mobil-knap{justify-content:center;margin:6px 12px 0}

@media (max-width:960px){
  .md-nav-midt,.md-nav-hoejre{display:none}
  .md-burger{display:block}
  .md-nav{padding:6px 8px 6px 16px}
  .md-mobilmenu{display:grid;max-width:1160px;margin:10px auto 0;background:#fff;border:1px solid var(--kant);
    border-radius:18px;box-shadow:0 18px 44px rgba(40,49,73,.18);padding:8px 6px 14px}
  .md-mobilmenu[hidden]{display:none}
}

/* ---------------------------------------------------------- responsivt layout */
/* Flerkolonne-grids klapper sammen. Antallet af spor er talt ved bygning. */
@media (max-width:1024px){
  .md-g5{grid-template-columns:repeat(3,1fr) !important}
  .md-g4{grid-template-columns:repeat(2,1fr) !important}
  .md-g3{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:760px){
  .md-g2,.md-g3,.md-g4,.md-g5,.md-g6{grid-template-columns:1fr !important}
  .md-g{gap:24px !important}
}
/* Vandrette flex-rækker skal kunne brydes på små skærme. */
@media (max-width:760px){
  .md-fx{flex-wrap:wrap !important}
}
/* Faste billedhøjder bliver til noget, der kan være på en telefon. */
@media (max-width:760px){
  .md-h{height:auto !important;min-height:220px !important;aspect-ratio:4/3}
  .md-pad{padding-left:18px !important;padding-right:18px !important}
  .md-pad-y{padding-top:52px !important;padding-bottom:52px !important}
}
/* De stribede prikkede linjer mellem procestrinnene giver ikke mening i én kolonne. */
@media (max-width:760px){ .md-proceslinje{display:none !important} }

/* ------------------------------------------------------------------ formular */
.md-formfejl{background:#fdecec;border:1px solid #f3bdbd;border-radius:8px;padding:11px 14px;
  font:400 13.5px/1.55 Roboto,Arial,sans-serif;color:#8f1d1d}
[hidden]{display:none !important}

/* ------------------------------------------------------------------ FAQ */
.md-faq-knap{width:100%;text-align:left;background:none;border:0;cursor:pointer}
.md-faq-svar[hidden]{display:none}

/* ------------------------------------------------------------------ video */
.md-video-holder{position:relative}
.md-video-afspil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;width:100%;padding:0;
  background:linear-gradient(rgba(0,0,0,0) 55%,rgba(14,19,30,.55))}
.md-video-ikon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center}
.md-video-hint{position:absolute;left:20px;bottom:18px;font:500 13px Roboto,Arial,sans-serif;
  color:#fff;opacity:.92;text-align:left}
@media (max-width:600px){ .md-video-hint{display:none} }