@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/) ------------------------ */
/*
   Fire vægte, ikke seks. Archivo 600 blev brugt ét enkelt sted og
   IBM Plex 500 tre steder – de er mappet over på nabovægten, og
   filerne er slettet. Det sparer to netværkskald og ca. 38 KB.
   Tilføjes en ny vægt, skal både @font-face og filen med.
*/

@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/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%;
  /* Headeren er klæbende og ca. 79 px høj. Uden det her lander
     overskriften bag den, når man hopper til #ydelser og de andre. */
  scroll-padding-top: 96px;
}

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;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Meget smalle skærme: lange ord som "Cylinderservice" må gerne deles,
   ellers skubber h1 siden ud i siden på foldbare telefoner.
   min-width: 0 er nødvendig – en gitterkolonne kan ellers ikke blive
   smallere end sit længste ord, uanset hvad der står om ombrydning. */
.hero-gitter > *,
.om-gitter > *,
.gitter-3 > *,
.kontaktkort > * {
  min-width: 0;
}

@media (max-width: 340px) {
  h1 {
    hyphens: auto;
  }
}

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;
  /* var 500 – flyttet til 600, så IBM Plex 500 kunne fjernes helt */
  font-weight: 600;
}

.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);
}

/* Til handlinger der ikke kan fortrydes. Rød, så den ikke forveksles
   med de orange knapper man trykker på hele dagen. */
.knap-fare {
  background: var(--error);
  color: var(--hvid);
  border-color: var(--error);
}

.knap-fare:hover {
  background: #8f1c13;
  border-color: #8f1c13;
  color: var(--hvid);
  text-decoration: none;
}

.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-600);
  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);
  /* steel-500 måler 4,37:1 mod hvid og falder lige under AA-kravet
     på 4,5. steel-600 ligger på 5,91:1 og ser stort set ens ud. */
  color: var(--steel-600);
}

.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-600);
  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;
}

/* Kolonnerne får bredde efter deres indhold og centreres som gruppe.
   Med et fast gitter blev tredje kolonne stående langt fra højrekanten,
   fordi åbningstiderne er korte – og så så hele footeren skæv ud. */
.sidefod .indhold {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 70px;
}

.sidefod .indhold > * {
  flex: 0 1 auto;
  max-width: 34ch;
}

.sidefod a {
  color: var(--hvid);
  /* Farve alene må ikke være det der adskiller et link fra tekst –
     og i footeren er både tekst og links hvide. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}

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

/* WCAG 2.2 vil have mindst 24x24 px at ramme. Med ren linjeafstand
   måler de her links 22 px, og de står så tæt at et fejlklik rammer
   naboen. min-height løfter dem uden at flytte teksten. */
.sidefod .kolonne a,
.sidefod .kolonne > span {
  min-height: 24px;
  display: flex;
  align-items: center;
}

.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);
  text-align: center;
}

/* ---------- 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);
  /* var 600 – flyttet til 700, så Archivo 600 kunne fjernes helt */
  font-weight: 700;
  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-600);
}

.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: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel-600);
  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-600);
  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-600);
  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-600);
  font-weight: 600;
}

/* Admin – samme topbar og header som resten af siden, mørkt indhold */
/* Admin var oprindeligt mørkeblå på mørkeblå. Alt lå inden for få
   nuancer af hinanden, og både sletteknap og kundeoplysninger forsvandt
   i fladen. Nu er indholdsfeltet lyst som resten af sitet – topbar,
   header og footer er uændrede og deles med de øvrige sider. */
body.admin {
  background: var(--hvid);
}

.adminindhold {
  background: var(--hvid);
  color: var(--steel-800);
  flex: 1;
  /* body er en flex-kolonne, og et flex-element kan som udgangspunkt
     ikke blive smallere end sit indhold. Uden min-width: 0 skubber den
     brede sagstabel hele siden ud i siden i stedet for at scrolle
     inde i sin egen ramme. */
  min-width: 0;
}

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

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

/* Knapper er også <a> – de må ikke farves eller understreges som links */
.adminindhold a.knap,
.adminindhold a.knap:hover {
  text-decoration: none;
}

.adminindhold a.knap-primaer,
.adminindhold a.knap-primaer:hover {
  color: var(--hvid);
}

/* Gælder både <a> og <button>: den sekundære knap er hvid tekst på
   mørk bund i resten af sitet, og ville stå usynlig her. */
.adminindhold .knap-sekundaer,
.adminindhold .knap-lys {
  background: var(--hvid);
  color: var(--navy-900);
  border-color: var(--steel-400);
}

.adminindhold .knap-sekundaer:hover,
.adminindhold .knap-lys:hover {
  background: var(--steel-50);
  color: var(--navy-900);
}

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

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

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

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

.loginkort .boks {
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--skygge-panel);
}

.adminindhold .felt input {
  background: var(--hvid);
  border-color: var(--steel-400);
  color: var(--steel-800);
}

.adminindhold .felt > label {
  color: var(--steel-700);
}

.tabel {
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  border-radius: 12px;
  /* auto, ikke hidden. Med hidden blev de yderste kolonner klippet væk
     uden hverken rullebjælke eller anden antydning af at der manglede
     noget – statusvælgeren stod halvt afskåret bag sletteknappen. */
  overflow: auto;
  box-shadow: var(--skygge);
  /* position: relative gør rammen til udgangspunkt for de klæbende
     celler. Uden den regner browseren dem med i hele sidens bredde,
     og så scroller HELE siden vandret på en telefon i stedet for kun
     tabellen. */
  position: relative;
}

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

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

.tabel td {
  /* 14 px vandret i stedet for 18. Syv kolonner sparer 56 px, og det
     er forskellen på om tabellen kan være der uden rullebjælke. */
  padding: 14px 14px;
  border-top: 1px solid var(--steel-100);
  vertical-align: top;
  color: var(--steel-800);
}

/* Svag stribning gør det lettere at følge en række hele vejen ud,
   når listen bliver lang. Hover er en tone blåere, så det stadig er
   tydeligt hvilken række musen står på. */
.tabel tbody tr:nth-child(even) td {
  background: var(--steel-50);
}

.tabel tr:hover td {
  background: var(--navy-50);
}

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

.tabel .kunde {
  color: var(--navy-900);
  font-weight: 600;
}

.tabel .arbejde {
  color: var(--steel-700);
}

.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;
}

/* Alle fem er kontrolleret mod hvid og mod den stribede række.
   Laveste er Haster med 4,92:1 – kravet er 4,5:1. */
.maerke-ny {
  background: #fdf1e7;
  border-color: #e8c2a2;
  color: var(--orange-700);
}

.maerke-arbejde {
  background: #eaf1f8;
  border-color: #b9d0e6;
  color: var(--navy-700);
}

.maerke-klar {
  background: var(--success-bg);
  border-color: var(--success-kant);
  color: var(--success);
}

.maerke-afsluttet {
  background: var(--steel-100);
  border-color: var(--steel-200);
  color: var(--steel-600);
}

.maerke-haster {
  background: var(--warning-bg);
  border-color: var(--warning-kant);
  color: var(--warning);
}

/* Sletning stod som et blegt tekstlink i samme farve som resten af
   tabellen, yderst i den kolonne der ryger ud til højre så snart
   tabellen skal scrolles. Nu er den en synlig knap, og kolonnen bliver
   hængende i højre kant når der scrolles vandret. */
.sletlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--error-kant);
  border-radius: var(--radius-s);
  background: var(--error-bg);
  color: var(--error); /* 6,57:1 mod hvid */
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.sletlink::before {
  content: "×";
  font-size: 16px;
  line-height: 1;
}

.sletlink:hover,
.sletlink:focus-visible {
  background: var(--error);
  border-color: var(--error);
  color: var(--hvid);
  text-decoration: none;
}

/* Klæber til højre kant mens resten af tabellen scroller under den.
   background: inherit lader stribningen slå igennem, så cellen ikke
   står som en hvid klods oven på en grå række. */
.tabel td.slettecelle,
.tabel th.slettecelle {
  position: sticky;
  right: 0;
  background: inherit;
  box-shadow: -8px 0 8px -8px rgba(0, 44, 90, 0.18);
}

.tabel tbody tr td.slettecelle {
  background: var(--hvid);
}

.tabel tbody tr:nth-child(even) td.slettecelle {
  background: var(--steel-50);
}

.tabel tr:hover td.slettecelle {
  background: var(--navy-50);
}

.tabel th.slettecelle {
  background: var(--navy-900);
}

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

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

/* Klasser der før stod som style-attributter inde i formularadmin.php.
   Flyttet herind, så farverne kan skiftes ét sted. */
.kundekontakt {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--steel-600);
}

.koeretoej {
  font-family: var(--font-broed);
  font-size: 12px;
  color: var(--steel-600);
  margin-top: 4px;
  /* .nr sætter nowrap for selve nummerpladen. Bilnavnet står i samme
     celle og arvede den, så "Volkswagen Passat Variant 2,0 TDI AUT.
     2011" tvang kolonnen 100 px bredere end nødvendigt. */
  white-space: normal;
}

.tomtabel {
  padding: 40px 24px;
  text-align: center;
  color: var(--steel-600);
}

.statusvalg {
  background: var(--hvid);
  color: var(--steel-800);
  border: 1px solid var(--steel-400);
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 12.5px;
  /* Bred nok til at "Klar til afhentning" kan læses helt */
  width: 100%;
  min-width: 132px;
  max-width: 170px;
}

.datanote {
  margin-top: 14px;
  font-family: var(--font-mono);
  color: var(--steel-600);
}

.sagsnote,
.tjeknote {
  font-size: 12.5px;
  color: var(--steel-700);
  margin-top: 4px;
}

.tjeknote {
  font-size: inherit;
}

.tjekboks {
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: var(--skygge);
}

.knapsmal {
  padding: 10px 16px;
  font-size: 14.5px;
  min-height: 0;
}

/* Statusfeltet er en flex-kolonne, så mærkatet blev strakt ud i
   kolonnens fulde bredde og lignede en halv knap. Det skal hugge om
   sin egen tekst som alle andre mærkater på sitet. */
.tabel .maerke {
  align-self: flex-start;
}

.maerke-lille {
  margin-left: 6px;
  font-size: 11px;
}

.taelling {
  background: var(--hvid);
  border: 1px solid var(--steel-200);
  color: var(--steel-700);
  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;
  }

  .sidefod .indhold {
    justify-content: flex-start;
  }

  .sidefod .indhold > * {
    flex: 1 1 100%;
    max-width: none;
  }

  .kundetypevalg,
  .hero-gitter,
  .om-gitter,
  .gitter-3,
  .noegletal,
  .kontaktkort,
  .felter,
  .multivalg-panel,
  .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 table {
    min-width: 720px;
  }

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

/* Smalle telefoner: åbningstiden ryger ud af topbaren, så adresse og
   telefonnummer kan stå på én linje. Åbningstiden står stadig i footeren,
   på kontaktkortet og i sidens strukturerede data. */
@media (max-width: 620px) {
  .topbar {
    font-size: 12.5px;
  }

  .topbar .indhold {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .topbar .aabningstid,
  .topbar .skilletegn {
    display: none;
  }

  .topbar .kortlink {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .topbar .telefon {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 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;
  }
}