@charset "UTF-8";
/* ==========================================================================
   Mizo Motor – mizomotor.dk
   Én samlet stilfil. Alle farver og skriftstørrelser er variabler i :root.
   Rækkefølge: 1) fonte  2) variabler  3) grundlag  4) komponenter
               5) sidespecifikt  6) responsivt  7) print
   ========================================================================== */

/* ---------- 1. Fonte (selvhostet, /assets/fonts/) ------------------------ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibmplexsans400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibmplexsans500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibmplexsans600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Designtokens --------------------------------------------- */

:root {
  /* Marineblå – bærende brandfarve */
  --navy-950: #001a36;
  --navy-900: #002c5a;
  --navy-700: #0f4c87;
  --navy-500: #3b7cbd;
  --navy-300: #8fb6da;
  --navy-100: #d6e5f2;
  --navy-50: #eef4fa;

  /* Orange – signalfarve. #FB6600 kun i logo og store flader.
     Hvid tekst på #FB6600 er 3,00:1 og falder igennem WCAG AA. */
  --orange-700: #b34700; /* alle knapper og links – 5,50:1 mod hvid */
  --orange-800: #9a3d00; /* hover */
  --orange-500: #fb6600; /* kun logo og grafiske flader */
  --orange-400: #ff8534; /* orange tekst på mørk blå – 5,74:1 */

  /* Kølig stålgrå – neutraler */
  --steel-800: #2b323c;
  --steel-700: #3d4652;
  --steel-600: #55606e;
  --steel-500: #6e7a89;
  --steel-400: #94a0ae;
  --steel-200: #d7dde4;
  --steel-100: #e8ecf1;
  --steel-50: #f4f6f9;
  --hvid: #ffffff;

  /* Systemfarver */
  --success: #15803d;
  --success-bg: #f0faf3;
  --success-kant: #bfe5cd;
  --warning: #a16207;
  --warning-bg: #fefaf0;
  --warning-kant: #efdca8;
  --warning-tekst: #7a4b05;
  --error: #b42318;
  --error-bg: #fef3f2;
  --error-kant: #fecdc9;

  /* Typografi */
  --font-overskrift: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-broed: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --tekst-h1: 50px;
  --tekst-h1-under: 38px;
  --tekst-h2: 34px;
  --tekst-h3: 18px;
  --tekst-broed: 16px;
  --tekst-hero: 17px;
  --tekst-kort: 14.5px;
  --tekst-label: 13.5px;
  --tekst-hjaelp: 12.5px;
  --tekst-eyebrow: 12px;
  --tekst-noegletal: 25px;

  /* Mål og former */
  --bredde: 1180px;
  --bredde-formular: 920px;
  --bredde-tekst: 760px;
  --side-padding: 28px;
  --radius-s: 8px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-pill: 99px;
  --skygge: 0 1px 2px rgba(0, 44, 90, 0.06), 0 2px 8px rgba(0, 44, 90, 0.06);
  --skygge-panel: 0 6px 18px rgba(0, 44, 90, 0.1);
}

/* ---------- 3. Grundlag -------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--steel-50);
  color: var(--steel-800);
  font-family: var(--font-broed);
  font-size: var(--tekst-broed);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-overskrift);
  color: var(--navy-900);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--orange-700);
  text-decoration: none;
}

a:hover {
  color: var(--orange-800);
  text-decoration: underline;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* hidden skal altid vinde – ellers overtrumfer fx .felt{display:flex}
   attributten, og skjulte felter bliver alligevel vist. */
[hidden] {
  display: none !important;
}

input,
select,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--orange-700);
  outline-offset: 2px;
  border-radius: 3px;
}

.indhold {
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: var(--side-padding);
  width: 100%;
}

/* Skjult for øjet, men læses af skærmlæsere */
.kunskaermlaeser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Springlink til hovedindhold */
.springlink {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--orange-700);
  color: var(--hvid);
  padding: 12px 18px;
  border-radius: var(--radius-s);
  font-weight: 600;
  transition: top 0.15s ease-out;
}

.springlink:focus {
  top: 12px;
  color: var(--hvid);
  text-decoration: none;
}

.eyebrow {
  font-size: var(--tekst-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-700);
  margin-bottom: 8px;
}

.eyebrow-lys {
  color: var(--orange-400);
}

.tal {
  font-variant-numeric: tabular-nums;
}

/* ---------- 4. Komponenter ---------------------------------------------- */

/* Topbar */
.topbar {
  background: var(--navy-950);
  color: var(--navy-300);
  font-size: 13px;
  padding: 9px 0;
}

.topbar .indhold {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.topbar a {
  color: var(--navy-300);
}

.topbar a:hover {
  color: var(--hvid);
}

.topbar .skilletegn {
  color: var(--navy-500);
}

.topbar .telefon {
  margin-left: auto;
  color: var(--orange-400);
  font-weight: 600;
}

.topbar .telefon:hover {
  color: var(--hvid);
}

/* Header */
.sidehoved {
  background: var(--hvid);
  border-bottom: 1px solid var(--steel-200);
  position: sticky;
  top: 0;
  z-index: 20;
}

.sidehoved .indhold {
  padding-block: 10px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.sidehoved .logo {
  height: 58px;
  width: auto;
  flex-shrink: 0;
}

.hovedmenu {
  display: flex;
  gap: 24px;
  font-size: 14.5px;
  font-weight: 500;
}

.hovedmenu a {
  color: var(--navy-900);
  padding: 6px 0;
}

.hovedmenu a:hover {
  color: var(--orange-700);
}

.hovedmenu a[aria-current="page"] {
  color: var(--orange-700);
  box-shadow: inset 0 -2px 0 var(--orange-700);
}

.menuknap {
  display: none;
  margin-left: auto;
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-s);
  padding: 9px 12px;
  cursor: pointer;
  color: var(--navy-900);
  font-weight: 600;
  font-size: 14px;
  align-items: center;
  gap: 8px;
}

.menuknap .streger {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.menuknap .streger::before,
.menuknap .streger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.menuknap .streger::before {
  top: -6px;
}

.menuknap .streger::after {
  top: 6px;
}

/* Knapper */
.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-s);
  font-weight: 600;
  font-size: 15.5px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  text-align: center;
}

.knap-primaer {
  background: var(--orange-700);
  color: var(--hvid);
}

.knap-primaer:hover {
  background: var(--orange-800);
  color: var(--hvid);
  text-decoration: none;
}

.knap-sekundaer {
  background: transparent;
  color: var(--hvid);
  border-color: var(--navy-500);
}

.knap-sekundaer:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--hvid);
  text-decoration: none;
}

.knap-lys {
  background: var(--hvid);
  color: var(--navy-900);
  border-color: var(--steel-200);
}

.knap-lys:hover {
  background: var(--steel-50);
  color: var(--navy-900);
  text-decoration: none;
}

.knap-header {
  margin-left: auto;
  padding: 11px 18px;
  font-size: 14.5px;
  flex-shrink: 0;
}

/* Kort */
.kort {
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-m);
  padding: 20px 20px 18px;
}

.kort h3 {
  font-size: var(--tekst-h3);
  font-weight: 700;
  margin-bottom: 8px;
}

.kort p {
  font-size: var(--tekst-kort);
  color: var(--steel-600);
}

.gitter-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Beskeder */
.besked {
  border-radius: var(--radius-s);
  padding: 13px 16px;
  font-size: 14.5px;
  border: 1px solid;
  border-left-width: 3px;
}

.besked-advarsel {
  background: var(--warning-bg);
  border-color: var(--warning-kant);
  border-left-color: var(--warning);
  color: var(--warning-tekst);
}

.besked-fejl {
  background: var(--error-bg);
  border-color: var(--error-kant);
  border-left-color: var(--error);
  color: #7a1c14;
}

.besked-ok {
  background: var(--success-bg);
  border-color: var(--success-kant);
  border-left-color: var(--success);
  color: #0d5228;
}

.besked a {
  color: inherit;
  text-decoration: underline;
}

/* Formularfelter */
.felter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

.felt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.felt-fuld {
  grid-column: 1 / -1;
}

.felt > label,
.feltnavn {
  font-size: var(--tekst-label);
  font-weight: 600;
  color: var(--steel-700);
}

.paakraevet {
  color: var(--error);
  font-weight: 600;
}

.valgfrit {
  color: var(--steel-500);
  font-weight: 400;
}

.felt input[type="text"],
.felt input[type="tel"],
.felt input[type="email"],
.felt input[type="password"],
.felt select,
.felt textarea {
  padding: 11px 13px;
  border: 1px solid var(--steel-400);
  border-radius: var(--radius-s);
  background: var(--hvid);
  width: 100%;
  min-height: 44px;
}

.felt textarea {
  resize: vertical;
  min-height: 84px;
}

.felt input[aria-invalid="true"],
.felt select[aria-invalid="true"],
.felt textarea[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
  background: var(--error-bg);
}

.hjaelp {
  font-size: var(--tekst-hjaelp);
  color: var(--steel-500);
}

.feltfejl {
  font-size: var(--tekst-hjaelp);
  color: var(--error);
  font-weight: 600;
  display: none;
}

.feltfejl.vist {
  display: block;
}

.regnr {
  text-transform: uppercase;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

/* Honeypot – skjult for mennesker, synligt for robotter */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Kundetype: privat eller erhverv */
.kundetype {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}

.kundetype legend {
  padding: 0;
  margin-bottom: 10px;
}

.kundetypevalg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.valgkort {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--steel-400);
  border-radius: var(--radius-s);
  background: var(--hvid);
  cursor: pointer;
  min-height: 44px;
}

.valgkort:hover {
  border-color: var(--navy-500);
}

.valgkort input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--orange-700);
  flex-shrink: 0;
}

.valgkort > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.valgkort strong {
  font-size: 15px;
  color: var(--navy-900);
  font-weight: 600;
}

.valgkort:has(input:checked) {
  border-color: var(--orange-700);
  border-width: 2px;
  padding: 13px 15px;
  background: #fff8f3;
}

.valgkort:has(input:focus-visible) {
  outline: 3px solid var(--orange-700);
  outline-offset: 2px;
}

.valgkort[aria-invalid="true"],
.kundetypevalg[aria-invalid="true"] .valgkort {
  border-color: var(--error);
}

/* Svar fra automatisk opslag */
.opslagssvar {
  font-size: var(--tekst-hjaelp);
  font-weight: 600;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 6px;
}

.opslagssvar[hidden] {
  display: none;
}

.opslagssvar.soeger {
  color: var(--steel-500);
  font-weight: 400;
}

.opslagssvar.intet {
  color: var(--warning-tekst);
}

/* Multi-valg-panel */
.multivalg {
  position: relative;
}

.multivalg-knap {
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--steel-400);
  border-radius: var(--radius-s);
  background: var(--hvid);
  color: var(--steel-800);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
}

.multivalg-knap[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
  background: var(--error-bg);
}

.multivalg-knap .pil {
  color: var(--steel-600);
  font-size: 12px;
  margin-left: auto;
}

.multivalg-knap[aria-expanded="true"] .pil {
  transform: rotate(180deg);
}

.multivalg-panel {
  margin-top: 8px;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-m);
  background: var(--hvid);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  box-shadow: var(--skygge-panel);
}

.multivalg-panel[hidden] {
  display: none;
}

.afkryds {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14.5px;
  cursor: pointer;
  min-height: 44px;
  font-weight: 400;
  color: var(--steel-800);
}

.afkryds input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--orange-700);
  flex-shrink: 0;
  margin: 0;
}

.accept {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  cursor: pointer;
}

.accept input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--orange-700);
  flex-shrink: 0;
}

/* Footer */
.sidefod {
  background: var(--navy-950);
  color: var(--hvid);
  padding: 44px 0 26px;
  font-size: 14px;
  margin-top: 60px;
}

.sidefod .indhold {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 30px;
}

.sidefod a {
  color: var(--hvid);
}

.sidefod a:hover {
  color: var(--orange-400);
}

.sidefod .kolonne {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidefod .kolonnetitel {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy-300);
  font-weight: 600;
  margin-bottom: 4px;
}

.wordmark {
  font-family: var(--font-overskrift);
  font-weight: 800;
  font-size: 20px;
  color: var(--hvid);
  letter-spacing: 0.01em;
}

.wordmark span {
  color: var(--orange-500);
}

.sidefod .bund {
  max-width: var(--bredde);
  margin: 26px auto 0;
  padding: 18px var(--side-padding) 0;
  border-top: 1px solid rgba(143, 182, 218, 0.2);
  font-size: 12.5px;
  color: var(--navy-300);
}

/* ---------- 5. Sidespecifikt -------------------------------------------- */

/* Hero */
.hero {
  background: var(--navy-900);
  color: var(--hvid);
  padding: 58px 0 50px;
}

.hero-gitter {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 46px;
  align-items: center;
}

.hero h1 {
  font-weight: 800;
  font-size: var(--tekst-h1);
  line-height: 1.06;
  color: var(--hvid);
  margin-bottom: 14px;
}

.hero .underrubrik {
  font-family: var(--font-overskrift);
  font-weight: 600;
  font-size: 21px;
  color: var(--hvid);
  margin-bottom: 20px;
}

.hero .manchet {
  color: var(--navy-100);
  font-size: var(--tekst-hero);
  max-width: 52ch;
  margin-bottom: 30px;
}

.hero .knapper {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Hero-foto */
.herofoto {
  display: block;
}

.herofoto img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--navy-700);
  display: block;
}

/* Foto i om-sektionen. Billedet er stående, så det får en makshøjde
   i stedet for at fylde hele kolonnen ud. */
.omfoto {
  display: flex;
  /* align-items SKAL stå her. Uden den er standarden "stretch", og så
     trækker flexboksen billedet ud i hele rækkens højde. */
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.omfoto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--steel-200);
  display: block;
}

/* Fotopladsholder – erstattes af rigtigt foto */
.fotoplads {
  background: var(--navy-950);
  border: 1px solid var(--navy-700);
  border-radius: 12px;
  height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(143, 182, 218, 0.07) 0 10px,
    transparent 10px 20px
  );
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--navy-300);
}

.fotoplads .maal {
  font-size: 11.5px;
  color: var(--steel-500);
}

.fotoplads-lys {
  background: var(--steel-100);
  border-color: var(--steel-200);
  height: 280px;
  color: var(--steel-600);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(85, 96, 110, 0.08) 0 10px,
    transparent 10px 20px
  );
}

/* Nøgletal */
.noegletal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 42px;
}

.noegletal .boks {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(143, 182, 218, 0.28);
  border-radius: var(--radius-m);
  padding: 16px 18px;
}

.noegletal .maerkat {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy-300);
  font-weight: 600;
}

.noegletal .vaerdi {
  font-family: var(--font-overskrift);
  font-weight: 700;
  font-size: var(--tekst-noegletal);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  color: var(--hvid);
}

.noegletal .enhed {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-300);
  font-family: var(--font-broed);
}

/* Sektioner */
.sektion {
  padding: 64px 0 8px;
}

.sektion h2 {
  font-size: var(--tekst-h2);
  font-weight: 700;
  margin-bottom: 10px;
}

.sektion .intro {
  color: var(--steel-600);
  max-width: 62ch;
  margin-bottom: 30px;
}

.sektion-smal {
  padding-top: 56px;
}

.ydelse {
  border-top: 3px solid var(--navy-900);
}

.ydelse-fremhaevet {
  border-top-color: var(--orange-700);
}

/* Procestrin */
.trin {
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-m);
  padding: 18px;
}

.trin .nummer {
  font-family: var(--font-overskrift);
  font-weight: 800;
  font-size: 15px;
  color: var(--orange-700);
  margin-bottom: 6px;
}

.trin h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 6px;
}

.trin p {
  font-size: 14px;
  color: var(--steel-600);
  margin: 0;
}

/* Om værkstedet */
.om-gitter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.om-gitter h2 {
  font-size: 32px;
  margin-bottom: 14px;
}

.om-gitter p {
  color: var(--steel-700);
  margin-bottom: 14px;
}

.om-gitter p:last-child {
  margin-bottom: 0;
}

/* Kontakt */
.kontaktkort {
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  border-radius: 12px;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 26px;
}

.kontaktkort h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.kontaktkort .kolonne {
  font-size: 14.5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kontaktkort .maerkat {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel-500);
  font-weight: 600;
}

.kontaktkort .maerkat + * {
  margin-bottom: 8px;
}

.kontaktkort .stor {
  font-family: var(--font-overskrift);
  font-weight: 700;
  font-size: 20px;
  color: var(--navy-900);
}

.kontaktkort .adresse {
  color: var(--navy-900);
}

/* Formular- og tekstsider */
.sideindhold {
  max-width: var(--bredde-formular);
  margin-inline: auto;
  padding: 40px var(--side-padding) 60px;
  width: 100%;
}

.sideindhold-smal {
  max-width: var(--bredde-tekst);
}

.sideindhold h1 {
  font-size: var(--tekst-h1-under);
  font-weight: 800;
  margin-bottom: 12px;
}

.sideindhold .manchet {
  color: var(--steel-600);
  max-width: 66ch;
  margin-bottom: 28px;
}

.panel {
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-l);
  box-shadow: var(--skygge);
  padding: 26px 28px 30px;
}

.panel .adskiller {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--steel-100);
}

.sendraekke {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.sendraekke .hjaelp {
  max-width: 46ch;
  font-size: var(--tekst-label);
}

/* Juridiske sider */
.juratekst h2 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 8px;
}

.juratekst h2:first-of-type {
  margin-top: 0;
}

.juratekst p,
.juratekst ul {
  line-height: 1.65;
  margin-bottom: 16px;
}

.juratekst ul {
  padding-left: 22px;
}

.juratekst li {
  margin-bottom: 4px;
}

.juratekst .opdateret {
  color: var(--steel-500);
  font-size: 14px;
  margin-bottom: 24px;
}

.udkastnote {
  font-style: italic;
  color: var(--steel-600);
  font-size: 14px;
  border-top: 1px solid var(--steel-200);
  padding-top: 16px;
  margin-top: 28px;
}

/* Kvitteringsside */
.sagsnummer {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: 0.04em;
}

.resume {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px 20px;
  font-size: 14.5px;
}

.resume dt {
  color: var(--steel-500);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 2px;
}

.resume dd {
  margin: 0;
  color: var(--steel-800);
}

/* Følgeseddel */
.folgeseddel {
  background: var(--hvid);
  border: 2px solid var(--navy-900);
  border-radius: var(--radius-l);
  padding: 28px;
  margin-top: 26px;
}

.folgeseddel .seddelhoved {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 2px solid var(--navy-900);
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.folgeseddel .seddelhoved img {
  height: 56px;
  width: auto;
}

.folgeseddel .stortnummer {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--navy-900);
  text-align: right;
  line-height: 1.2;
}

.folgeseddel .stortnummer small {
  display: block;
  font-family: var(--font-broed);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel-500);
  font-weight: 600;
}

/* Admin – samme topbar og header som resten af siden, mørkt indhold */
body.admin {
  background: var(--navy-950);
}

.adminindhold {
  background: var(--navy-950);
  color: var(--navy-100);
  flex: 1;
}

.adminindhold a {
  color: var(--orange-400);
}

.adminindhold a:hover {
  color: #ffe0cc;
}

.adminindhold :where(a, button, input, select):focus-visible {
  outline-color: var(--orange-400);
}

.adminindhold h1,
.adminindhold h2 {
  color: var(--hvid);
}

.loginramme {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px 80px;
}

.loginkort {
  width: 100%;
  max-width: 400px;
}

.loginkort .boks {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: 12px;
  padding: 24px;
}

.adminindhold .felt input {
  background: var(--navy-950);
  border-color: var(--navy-500);
  color: var(--hvid);
}

.adminindhold .felt > label {
  color: var(--navy-300);
}

.tabel {
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: 12px;
  overflow: hidden;
}

.tabel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabel th {
  background: var(--navy-950);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-300);
  font-weight: 600;
  text-align: left;
  padding: 12px 18px;
  white-space: nowrap;
}

.tabel td {
  padding: 14px 18px;
  border-top: 1px solid rgba(143, 182, 218, 0.16);
  vertical-align: top;
}

.tabel tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

.tabel .nr {
  font-family: var(--font-mono);
  color: var(--orange-400);
  white-space: nowrap;
}

.tabel .kunde {
  color: var(--hvid);
  font-weight: 500;
}

.tabel .arbejde {
  color: var(--navy-300);
}

.tabel .dato {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.maerke {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}

.maerke-ny {
  background: rgba(255, 133, 52, 0.14);
  border-color: rgba(255, 133, 52, 0.5);
  color: var(--orange-400);
}

.maerke-arbejde {
  background: rgba(143, 182, 218, 0.14);
  border-color: rgba(143, 182, 218, 0.4);
  color: var(--navy-100);
}

.maerke-klar {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.4);
  color: #86efac;
}

.maerke-afsluttet {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(143, 182, 218, 0.25);
  color: var(--navy-300);
}

.maerke-haster {
  background: rgba(239, 220, 168, 0.14);
  border-color: rgba(239, 220, 168, 0.5);
  color: #f4d488;
}

.sletlink {
  color: var(--navy-300);
  font-size: 13px;
  white-space: nowrap;
}

.sletlink:hover {
  color: #ff9d9d;
}

.adminvaerktoej {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.adminvaerktoej h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--hvid);
  margin: 0;
}

.taelling {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(143, 182, 218, 0.3);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 13px;
}

/* 404 */
.fejlside {
  text-align: center;
  padding: 80px var(--side-padding) 60px;
  max-width: 620px;
  margin-inline: auto;
}

.fejlside .kode {
  font-family: var(--font-overskrift);
  font-weight: 800;
  font-size: 68px;
  color: var(--orange-700);
  line-height: 1;
  margin-bottom: 8px;
}

.fejlside .knapper {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* ---------- 6. Responsivt ------------------------------------------------ */

@media (max-width: 900px) {
  :root {
    --tekst-h1: 34px;
    --tekst-h1-under: 28px;
    --tekst-h2: 26px;
    --side-padding: 20px;
  }

  .menuknap {
    display: inline-flex;
  }

  .hovedmenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hvid);
    border-bottom: 1px solid var(--steel-200);
    flex-direction: column;
    gap: 0;
    padding: 8px var(--side-padding) 14px;
    box-shadow: var(--skygge-panel);
  }

  .hovedmenu.aaben {
    display: flex;
  }

  .hovedmenu a {
    padding: 13px 0;
    border-bottom: 1px solid var(--steel-100);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sidehoved {
    position: relative;
  }

  .sidehoved .indhold {
    gap: 12px;
    flex-wrap: wrap;
  }

  .sidehoved .logo {
    height: 46px;
  }

  .knap-header {
    margin-left: 0;
    order: 3;
  }

  .kundetypevalg,
  .hero-gitter,
  .om-gitter,
  .gitter-3,
  .noegletal,
  .kontaktkort,
  .felter,
  .multivalg-panel,
  .sidefod .indhold,
  .resume {
    grid-template-columns: 1fr;
  }

  .resume dt {
    text-transform: uppercase;
    font-size: 12px;
    padding-top: 6px;
  }

  .hero {
    padding: 36px 0 34px;
  }

  .fotoplads {
    height: 220px;
  }

  .sektion {
    padding-top: 44px;
  }

  .sideindhold {
    padding-top: 28px;
  }

  .panel {
    padding: 20px 18px 24px;
  }

  .kontaktkort {
    padding: 22px 20px;
  }

  .tabel {
    overflow-x: auto;
  }

  .tabel table {
    min-width: 720px;
  }

  .topbar .telefon {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .knap {
    width: 100%;
  }

  .knap-header {
    width: auto;
  }

  .hero .knapper .knap {
    width: 100%;
  }
}

/* ---------- 7. Print ----------------------------------------------------- */

@media print {
  @page {
    margin: 14mm;
  }

  body {
    background: var(--hvid);
    color: #000;
    font-size: 12pt;
  }

  .topbar,
  .sidehoved,
  .sidefod,
  .ikkeprint,
  .springlink {
    display: none !important;
  }

  .sideindhold {
    padding: 0;
    max-width: none;
  }

  /* På kvitteringssiden printes KUN selve formularen – ikke overskrift,
     knapper eller resten af siden. */
  .kvitteringsside > *:not(.folgeseddel) {
    display: none !important;
  }

  /* Papir er smallere end 900 px, så mobilreglerne ville ellers slå til og
     lægge etiketterne oven over værdierne. */
  .resume {
    grid-template-columns: 190px 1fr !important;
    gap: 8px 20px !important;
  }

  .resume dt {
    padding-top: 2px !important;
    font-size: 10.5pt !important;
  }

  .folgeseddel {
    margin-top: 0;
    border: 2px solid #000;
    box-shadow: none;
    margin: 0;
    page-break-inside: avoid;
    border-radius: 0;
  }

  .folgeseddel .seddelhoved,
  .folgeseddel .stortnummer {
    border-color: #000;
    color: #000;
  }

  .panel {
    box-shadow: none;
    border-color: #999;
  }

  a {
    color: #000;
    text-decoration: none;
  }
}

/* ---------- Reduceret bevægelse ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}