/* myPool — landingssidens stilark.
 *
 * Tokens, typeskala og spacing er FLYTTET fra mypool-designsystem.md, ikke
 * genopfundet. Ændres et tal her, skal designsystemet ændres først — og de
 * målte kontrastforhold skal måles om. To ting falder og findes ikke i dette
 * ark: hvid tekst på aqua (3,2:1) og sand som tekstfarve (3,6:1).
 */

/* --- skrifter: selvhostet, issue #17 -----------------------------------
 * Hentet fra Google Fonts' css2-API og lagt i skrifter/ — siden må ikke
 * hente noget fra fonts.googleapis.com/fonts.gstatic.com ved visning.
 * Instrument Serif findes kun i regular (400); Inter i 400/500/600 — de
 * eneste snit designsystemet tillader. Begge er variable fonte hos Google,
 * så samme woff2-fil dækker alle tre Inter-vægte; hver @font-face vælger
 * blot sin instans via font-weight-deskriptoren. latin dækker dansk
 * (æøå); latin-ext ligger med, fordi den var let at tage med.
 * Licens: skrifter/OFL.txt (SIL Open Font License 1.1). */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrifter/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrifter/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrifter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('skrifter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('skrifter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('skrifter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('skrifter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('skrifter/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Bærende */
  --mp-teal: #0F5E63;
  --mp-teal-mork: #0A4448;
  --mp-teal-lys: #E3EFEF;

  /* Accent — vandet */
  --mp-aqua: #2A9BC9;
  --mp-aqua-lys: #7EC8DC;      /* KUN på mørk bund */

  /* Neutraler */
  --mp-ink: #1D2B2E;
  --mp-skifer: #5C6D77;
  --mp-sten: #C3C7C5;
  --mp-papir: #F7F5F1;
  --mp-hvid: #FFFFFF;
  --mp-nat: #16211F;

  /* Typeskala */
  --mp-display: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  --mp-h2: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --mp-h3: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --mp-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --mp-brod: 1.0625rem;
  --mp-lille: 0.9375rem;
  --mp-label: 0.8125rem;

  /* 4-punkts skala — kun disse trin */
  --mp-1: 4px;  --mp-2: 8px;  --mp-3: 12px; --mp-4: 16px;
  --mp-5: 24px; --mp-6: 32px; --mp-7: 48px; --mp-8: 64px;

  /* Form */
  --mp-r-sm: 4px;
  --mp-r-md: 8px;
  --mp-r-lg: 16px;
  --mp-r-fuld: 999px;
  --mp-streg: 1px solid var(--mp-sten);
  --mp-skygge-1: 0 1px 2px rgba(29,43,46,.06), 0 2px 8px rgba(29,43,46,.04);
  --mp-skygge-2: 0 8px 24px rgba(29,43,46,.10);

  /* Bevægelse */
  --mp-hurtig: 160ms;
  --mp-rolig: 240ms;
  --mp-kurve: cubic-bezier(0.2, 0, 0, 1);

  /* Sektionsluft. Det er den luft, der gør siden dyr — skær aldrig ned. */
  --mp-sektion: clamp(64px, 8vw, 128px);

  --mp-serif: 'Instrument Serif', Georgia, serif;
  --mp-sans: Inter, system-ui, sans-serif;
}

/* --- grundlag ---------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mp-papir);
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-size: var(--mp-brod);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mp-teal); text-decoration: none; }
a:hover { color: var(--mp-teal-mork); text-decoration: underline; }

input, select, textarea, button { font-family: var(--mp-sans); }
input, select, textarea { width: 100%; min-width: 0; }

/* Fokus er synligt overalt — også på det, der ligger på et foto.
   `[tabindex]` står med, fordi listen ellers kun rammer det, browseren
   allerede kender: tegnefladen (`#markeringlaerred`) er et canvas, der er
   gjort fokuserbart i hånden, og den er tastaturvejens ENESTE indgang til at
   markere. Uden reglen fik den browserens egen 1 px sorte streg — målt, ikke
   skønnet — og en tynd systemring oven på et havefoto er netop den, der
   forsvinder for den bruger, der ikke kan pege. */
input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible, label:focus-within,
[tabindex]:focus-visible {
  outline: 2px solid var(--mp-aqua);
  outline-offset: 2px;
}

img { max-width: 100%; }

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

/* Kun for skærmlæsere — bruges til statusbeskeder, der ellers ville stå
   dobbelt på skærmen. */
.mp-kun-oplaest {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mp-skjul { display: none !important; }

/* Om px-værdier UDEN for 4-punkts-skalaen (6, 10, 11, 19, 20, 26, 44, 88,
   120 …): de er BÅRET MED fra den side, flytningen skulle gengive 1:1, ikke
   valgt her. Designsystemet siger «brug KUN disse trin», og det gælder alt
   nyt. Skal de rettes ind, er det en designbeslutning med en visuel
   efterprøvning — ikke en oprydning, man laver undervejs, for hver enkelt
   flytter noget, der stod rigtigt før. --mp-9 (96px) og --mp-10 (128px)
   findes ikke her, fordi ingen regel bruger dem; sektionsluften er
   --mp-sektion. */

/* --- fælles byggeklodser ------------------------------------------------ */

.mp-baand {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--mp-5);
}

.mp-sektion { padding-block: var(--mp-sektion); }
.mp-sektion--hvid { background: var(--mp-hvid); border-block: var(--mp-streg); }

.mp-label {
  font-size: var(--mp-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mp-teal);
  line-height: 1.5;
}
/* Sat som afsnit skal etiketten ikke arve browserens 1em-margin: afstanden
   ned til overskriften er 12 px og styres af overskriften selv. */
p.mp-label { margin: 0; }

h1, h2, h3 { font-family: var(--mp-serif); font-weight: 400; }

.mp-h1 {
  font-size: var(--mp-display);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
}

.mp-h2 {
  font-size: var(--mp-h2);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}

.mp-h3 { font-size: var(--mp-h3); line-height: 1.2; margin: 0; }

.mp-lead {
  font-size: var(--mp-lead);
  line-height: 1.55;
  color: var(--mp-skifer);
  max-width: 34em;
}

.mp-brod { font-size: var(--mp-brod); line-height: 1.65; max-width: 34em; }
.mp-lille { font-size: var(--mp-lille); line-height: 1.5; }
.mp-daempet { color: var(--mp-skifer); }
.mp-tal { font-variant-numeric: tabular-nums; }

/* Knapper. Tre og kun tre. */
.mp-knap {
  display: inline-block;
  background: var(--mp-teal);
  color: var(--mp-hvid);
  border: none;
  padding: 14px 28px;
  border-radius: var(--mp-r-md);
  font-weight: 600;
  font-size: var(--mp-brod);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--mp-hurtig) var(--mp-kurve);
}
.mp-knap:hover { background: var(--mp-teal-mork); color: var(--mp-hvid); text-decoration: none; }

/* Låst knap: --mp-sten er systemets «deaktiveret», men KUN med --mp-ink
   ovenpå. Hvid på sten er 1,71:1 og falder — målt 15/8. */
.mp-knap[disabled], .mp-knap[aria-disabled="true"] {
  background: var(--mp-sten);
  color: var(--mp-ink);
  cursor: not-allowed;
}
.mp-knap[disabled]:hover, .mp-knap[aria-disabled="true"]:hover { background: var(--mp-sten); color: var(--mp-ink); }

/* Sekundær. Den har stået i designsystemet §4 hele tiden — «gennemsigtig med
   1 px teal ramme, teal tekst» — og manglede bare i koden, indtil markeringen
   fik brug for en knap, der ikke må konkurrere med «Lav min AI-visualisering».
   Teal på papir er 7,0:1, altså AAA. */
.mp-knap--sekundaer {
  background: transparent;
  border: 1px solid var(--mp-teal);
  color: var(--mp-teal);
}
.mp-knap--sekundaer:hover {
  background: var(--mp-teal-lys);
  border-color: var(--mp-teal-mork);
  color: var(--mp-teal-mork);
}

.mp-tekstknap { font-weight: 500; }

.mp-felt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--mp-lille);
  font-weight: 500;
}
.mp-felt input, .mp-felt select, .mp-felt textarea {
  border: var(--mp-streg);
  border-radius: var(--mp-r-sm);
  padding: var(--mp-3);
  font-size: var(--mp-brod);
  font-weight: 400;
  background: var(--mp-hvid);
  color: var(--mp-ink);
}
.mp-felt textarea { resize: vertical; }

/* Mærkningen på et illustrationsfoto. Den sidder ALTID på siden — den er
   ikke en indstilling, man kan slå fra, for et umærket AI-billede, der først
   er delt, kan ikke kaldes tilbage. */
.mp-maerkning {
  position: absolute;
  right: var(--mp-3);
  bottom: 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Var hvid ved 75 % direkte oven på fotoet. Målt 15/8 til 1,43:1 på
     inspirationskortet og 1,75:1 i heroen — altså ulæselig præcis dér, hvor
     den skal kunne læses. En mærkning, man ikke kan læse, er det samme som
     ingen mærkning, bare med bedre samvittighed.
     Pladen gør baggrunden KENDT, så tallet ikke længere afhænger af, hvad
     der tilfældigvis er bag. Samme greb som .mp-preview__navn, som
     fuldskærmsoverlayet, og som det indbrændte mærke på OG-billedet.
     Issue #19. */
  color: var(--mp-papir);
  background: rgba(22,33,31,.8);
  padding: 4px var(--mp-2);
  border-radius: var(--mp-r-sm);
  /* Ordmærket står INDE i pladen, ikke ved siden af. Pladen findes, fordi
     baggrunden ellers er ukendt; et ordmærke direkte på fotoet ville have
     præcis det læsbarhedsproblem, pladen blev lavet for at løse. */
  display: inline-flex;
  align-items: baseline;
  gap: var(--mp-2);
}
/* Ordmærket arver ikke pladens sætning: versaler ville gøre det til
   «MYPOOL», og sperringen hører til etiketten, ikke til navnet.

   STØRRELSEN arver det derimod, og det er en beslutning. Pladen på siden og
   den, der brændes ind i et AI-billede, er ÉT mærke — CLAUDE.md siger det, og
   `motor/aimaerke.py` regner det ud med
   `logo_skala = versal_hoejde / VERSALHOEJDE`: ordmærkets versal sat LIG
   etikettens. CSS'en havde sit eget tal (14 px mod etikettens 11), og
   afsenderen stod dermed 27 % større end oplysningen — modsat husreglen om,
   at oplysningen er det, der bliver, når noget skal vige.

   Målt 16/8 med canvas i sidens egne skrifter: Instrument Serif og Inter har
   begge versalhøjde 0,73 em, så lige stor skrift ER lige høje versaler. Derfor
   intet tal her: pladen sætter 11 px på kortene og 13 px i fuld skærm, og
   ordmærket følger med af sig selv. `proev_siden.py` måler forholdet. */
.mp-maerkning .mp-navn,
.mp-fuldskaerm__maerkning .mp-navn {
  font-family: var(--mp-serif);
  letter-spacing: 0;
  text-transform: none;
}
/* Stregen skiller afsender fra oplysning. Mærkningen skal kunne læses som
   sin egen sætning — ikke som en del af et logo. */
.mp-maerkning__tekst {
  border-left: 1px solid rgba(247,245,241,.3);
  padding-left: var(--mp-2);
}
.mp-maerkning--top { top: 10px; bottom: auto; }

/* --- toppen: DEMO-bånd + hoved ------------------------------------------- */

/* Båndet og headeren klæber som ÉT element. Klæbede de hver for sig med
   `top: 0`, ville de lægge sig oven på hinanden; og et bånd, der kun står
   øverst på siden, ville mangle på præcis de screenshots, der viser priser og
   kontaktoplysninger — som er hele grunden til, at det står der (Q6). */
.mp-top {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Nat-bund med papir-tekst, som foden: den parring er målt og holder. Hvid på
   aqua (3,2:1) og sand som tekstfarve (3,6:1) falder — se designsystemet §1 —
   og et forbehold, man ikke kan læse, er intet forbehold. */
.mp-demo {
  background: var(--mp-nat);
  color: var(--mp-papir);
  font-size: var(--mp-label);
  line-height: 1.5;
}
.mp-demo__indhold {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mp-1) var(--mp-3);
  padding-block: var(--mp-2);
}
.mp-demo__maerkat {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mp-aqua-lys);
  white-space: nowrap;
}
.mp-demo__tekst { color: var(--mp-sten); }

.mp-hoved {
  background: rgba(247,245,241,.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--mp-streg);
}
.mp-hoved__indhold {
  display: flex;
  align-items: center;
  gap: var(--mp-6);
  padding-block: var(--mp-3);
}
/* NAVNET. Logoet er ordmærket alene — intet bomærke ved siden af — og derfor
   hører de to farver til NAVNET, ikke til headeren. `.mp-navn` sætter kun
   farverne og forbyder ombrydning; et navn, der knækker over to linjer, er
   ikke længere et logo. Størrelse og skrift sættes udenom, så navnet kan
   optræde to steder:
     .mp-ordmaerke  navnet som selvstændigt logo (header, fod) — sætter skriften
     .mp-navn alene navnet i løbende tekst — arver sætningen omkring sig
   Brug KUN den inline-form, hvor teksten i forvejen er Instrument Serif. I
   Inter er to farver ikke et ordmærke, bare et farvetrick. */
.mp-navn { white-space: nowrap; }
.mp-navn__my { color: var(--mp-skifer); }
.mp-navn__pool { color: var(--mp-teal); }

/* Navnet på MØRK bund. Skifer og teal er begge mørke; på en nat-plade
   forsvinder de. Parret vender om: «my» låner sten, «Pool» låner aqua-lys,
   som netop er tokenet, der KUN må bruges på mørk bund. Målt af
   proev_siden.py sammen med selve mærkningen. */
.mp-navn--mork .mp-navn__my { color: var(--mp-sten); }
.mp-navn--mork .mp-navn__pool { color: var(--mp-aqua-lys); }

.mp-maerke { display: inline-flex; align-items: center; }
.mp-maerke:hover { text-decoration: none; }
/* Ordmærket ALENE — header og fod. Løftet 24 → 26 px, da bomærket blev
   fjernet og navnet skulle bære headeren selv.
   Det MÅLTE: versalhøjden er 0,73 em i Instrument Serif, altså 19 px her; og
   `proev_siden.py` holder ved 390, 414 og 768 px, at navnet står på én linje
   inden for headeren, og at begge halvdele holder kontrasten i header,
   overskrift og fod. Det er en ØVRE grænse.
   Det UMÅLTE: hvorfor 26 og ikke 24 er en optisk beslutning uden anker —
   ingen anden værdi på siden hænger den op. Skal den stå fast, hører den til
   som et trin i designsystemet §2; indtil da er den Henriks at bekræfte. */
.mp-ordmaerke { font-family: var(--mp-serif); font-size: 26px; line-height: 1; }

.mp-nav {
  display: flex;
  gap: var(--mp-5);
  margin-left: auto;
  align-items: center;
  font-size: var(--mp-lille);
  font-weight: 500;
}
.mp-nav a { color: var(--mp-ink); }
.mp-hoved__cta { padding: 10px 20px; font-size: var(--mp-lille); margin-left: auto; }

/* Ved 390 px fyldte navigationen alene 484 px og nægtede at ombryde — hele
   siden blev 613 px bred og kunne skubbes sidelæns. Målt 15/8, issue #16.
   Genvejene får deres egen linje under mærket; knappen bliver stående oppe. */
@media (max-width: 900px) {
  .mp-hoved__indhold { flex-wrap: wrap; gap: var(--mp-2) var(--mp-4); }
  .mp-nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: var(--mp-2) var(--mp-4);
    font-size: var(--mp-label);
  }
}

/* --- hero --------------------------------------------------------------- */

.mp-hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-start;
}
/* Foto, der dækker sin sektion helt — hero og aften-båndet. */
.mp-daekfoto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Blød lodret gradient — ikke et sort overlay hen over billedet. */
.mp-hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(22,33,31,.45) 0%, rgba(22,33,31,0) 40%);
}
.mp-hero__indhold {
  position: relative;
  width: 100%;
  padding-block: var(--mp-sektion);
}

/* Gradienten i toppen (`.mp-hero__gradient`) er designsystemets, og den
   slipper ved 40 % af heroen. Underrubrikken står LAVERE end det — på en
   telefon løber den hen over husets lyse facade, og dér blev hvid tekst målt
   til 1,02:1 mod den værste pixel; halvdelen af baggrunden lå under 4,5:1
   (målt 15/8, issue #16). Teksten får derfor sin egen bløde gradient, der
   følger med den ved enhver skærmbredde, i stedet for at ligge fast i
   procent af et billede, hvis udsnit skifter.
   Den er lodret på smalle skærme, hvor teksten fylder hele bredden, og
   vandret fra venstre på brede, hvor den kun fylder venstre side — så
   billedet bliver lyst dér, hvor der ikke står noget. */
.mp-hero__indhold::before {
  content: "";
  position: absolute;
  /* Fuld bredde, ikke båndets: stopper den ved båndets margen, står der en
     synlig lodret kant ned gennem billedet. */
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(22,33,31,.68) 0%, rgba(22,33,31,.68) 62%, rgba(22,33,31,0) 100%);
}
.mp-hero__indhold > * { position: relative; }

/* På brede skærme fylder teksten kun venstre side. Gradienten tones derfor
   også ud mod højre med en maske — så beholder den udtoningen nedad (ellers
   skærer den en vandret kant tværs over billedet, dér hvor tekstblokken
   slutter), og billedet bliver lyst dér, hvor der ikke står noget. */
@media (min-width: 900px) {
  .mp-hero__indhold::before {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 62%, transparent 96%);
    mask-image: linear-gradient(to right, #000 0%, #000 62%, transparent 96%);
  }
}
.mp-hero h1 { color: var(--mp-hvid); max-width: 13em; text-shadow: 0 1px 12px rgba(22,33,31,.35); }
.mp-hero__under {
  font-size: var(--mp-lead);
  line-height: 1.55;
  color: var(--mp-hvid);
  max-width: 30em;
  margin: var(--mp-5) 0 var(--mp-6);
  text-shadow: 0 1px 8px rgba(22,33,31,.4);
}
.mp-hero__valg { display: flex; gap: var(--mp-4); align-items: center; flex-wrap: wrap; }
.mp-hero__valg .mp-tekstknap {
  color: var(--mp-hvid);
  font-size: var(--mp-brod);
  text-shadow: 0 1px 8px rgba(22,33,31,.5);
}
.mp-hero__valg .mp-tekstknap:hover { color: var(--mp-hvid); text-decoration: underline; }

/* --- tillidslinje -------------------------------------------------------- */

.mp-tillid { border-bottom: var(--mp-streg); background: var(--mp-hvid); }
.mp-tillid__indhold {
  padding-block: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--mp-5);
  flex-wrap: wrap;
}
.mp-tillid__streg { width: 1px; height: 14px; background: var(--mp-sten); }

/* --- inspirationsdæk ----------------------------------------------------- */

.mp-daek-hoved {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mp-5);
  flex-wrap: wrap;
}
.mp-daek-hoved h2 { max-width: 16em; margin-top: var(--mp-3); }
.mp-daek-pile { display: flex; gap: var(--mp-2); }
.mp-pil {
  width: 44px; height: 44px;
  border-radius: var(--mp-r-md);
  border: 1px solid var(--mp-teal);
  background: transparent;
  color: var(--mp-teal);
  font-size: 18px;
  cursor: pointer;
}
.mp-pil:hover { background: var(--mp-teal-lys); }

.mp-daek {
  display: flex;
  gap: var(--mp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--mp-6) max(var(--mp-5), calc((100vw - 1200px) / 2 + var(--mp-5))) var(--mp-2);
  scrollbar-width: none;
}
.mp-daek::-webkit-scrollbar { display: none; }

.mp-have {
  flex: 0 0 auto;
  width: min(720px, 84vw);
  margin: 0;
  border-radius: var(--mp-r-lg);
  overflow: hidden;
  scroll-snap-align: center;
  background: var(--mp-hvid);
  border: var(--mp-streg);
  cursor: zoom-in;
}
.mp-have__ramme { position: relative; aspect-ratio: 16 / 10; background: var(--mp-teal-lys); }
.mp-have img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-have__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,33,31,.72) 0%, rgba(22,33,31,0) 45%);
}
/* Billedteksten står UNDER billedet — ikke oven på det.
   Den lå oven på med en gradient bag sig, og på en telefon blev alle fire
   linjer ulæselige: motivordet 1,05:1, titlen 1,07:1, teksten 1,81:1 (målt
   15/8, issue #19). En gradient stærk nok til at bære fem linjer tekst
   dækkede til gengæld billedet næsten helt — og det er en INSPIRATIONS-
   sektion, hvor billedet er hele pointen.
   Under billedet er der ingen byttehandel: fotoet ses ubeskåret, og teksten
   står på papir med systemets egne målte forhold (ink på papir er 13,4:1).
   Fra 900 px lægger den sig tilbage oven på billedet, hvor kortet er stort
   nok til, at gradienten kan bære den uden at skjule motivet. */
.mp-have figcaption {
  padding: var(--mp-4) var(--mp-5) var(--mp-5);
  display: flex;
  flex-direction: column;
  gap: var(--mp-1);
}
.mp-have__titel { font-family: var(--mp-serif); font-size: 26px; line-height: 1.15; color: var(--mp-ink); }
.mp-have figcaption .mp-label { color: var(--mp-teal); }
.mp-have__tekst { font-size: var(--mp-lille); line-height: 1.5; color: var(--mp-skifer); max-width: 34em; }

@media (min-width: 900px) {
  .mp-have { position: relative; border: none; background: var(--mp-teal-lys); }
  .mp-have__titel { color: var(--mp-hvid); }
  .mp-have figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--mp-8) var(--mp-5) var(--mp-5);
    background: linear-gradient(to top,
      rgba(22,33,31,.86) 0%, rgba(22,33,31,.86) 78%, rgba(22,33,31,0) 100%);
  }
  .mp-have figcaption .mp-label { color: var(--mp-aqua-lys); }
  .mp-have__tekst { color: rgba(247,245,241,.92); }
}


/* --- ydelseskort --------------------------------------------------------- */

.mp-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mp-5);
}
.mp-kort {
  background: var(--mp-hvid);
  border: var(--mp-streg);
  border-radius: var(--mp-r-md);
  padding: var(--mp-5);
  display: flex;
  flex-direction: column;
  gap: var(--mp-3);
  transition: box-shadow var(--mp-hurtig) var(--mp-kurve);
}
.mp-kort:hover { box-shadow: var(--mp-skygge-1); }
/* Ikonstregen er teal. Den stod som stroke="#0F5E63" fire steder i HTML'en —
   samme farve stavet om i hånden uden for :root, hvilket er præcis dét,
   tokens findes for at forhindre. */
.mp-kort svg { stroke: var(--mp-teal); }
.mp-kort p { margin: 0; }
.mp-kort a { margin-top: auto; }

/* --- visualisering ------------------------------------------------------- */

.mp-vis-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--mp-5);
  align-items: start;
}
.mp-vis-valg { display: flex; flex-direction: column; gap: var(--mp-6); }
.mp-trin { display: flex; flex-direction: column; gap: var(--mp-3); }

.mp-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-2);
  border: 1px dashed var(--mp-skifer);
  border-radius: var(--mp-r-lg);
  padding: var(--mp-5);
  cursor: pointer;
  background: var(--mp-hvid);
  min-height: 120px;
  text-align: center;
}
.mp-upload[data-har-foto="ja"] { background: var(--mp-teal-lys); }
.mp-upload input[type="file"] { display: none; }
.mp-upload img { max-width: 100%; max-height: 180px; border-radius: var(--mp-r-md); object-fit: cover; }

/* Miniaturen med markeringen. Indpakningen krymper om billedet, så lærredet
   kan lægge sig præcis oven på det — plads og størrelse sættes af JS, for
   CSS kan ikke vide, hvor et nedskaleret billede faktisk ender. Lærredet må
   ikke opsnappe klik: hele feltet er en <label>, og et tryk skal blive ved
   med at åbne filvælgeren. */
.mp-upload__foto { position: relative; display: inline-flex; max-width: 100%; }
.mp-upload__foto canvas { position: absolute; pointer-events: none; }

.mp-serie {
  display: flex;
  align-items: center;
  gap: var(--mp-4);
  text-align: left;
  border: var(--mp-streg);
  background: var(--mp-hvid);
  border-radius: var(--mp-r-md);
  padding: var(--mp-3);
  cursor: pointer;
  transition: border-color var(--mp-hurtig) var(--mp-kurve);
}
.mp-serie img { width: 88px; height: 60px; object-fit: cover; border-radius: var(--mp-r-sm); flex: 0 0 auto; }
.mp-serie__navn { font-family: var(--mp-serif); font-size: 19px; color: var(--mp-ink); }
.mp-serie__spec { font-size: var(--mp-label); color: var(--mp-skifer); }
/* `.mp-serie__fra` — «fra 495.000 kr.» yderst på kortet — er væk sammen med
   prisstigen (JIMMY-PROEVEN.md Q14). Reglen står ikke tilbage som ubrugt CSS:
   skal kortene en dag bære en pris igen, er det en beslutning, ikke en
   genfunden stilregel. Prisen står ét sted, i beregneren. */
.mp-serie-liste { display: flex; flex-direction: column; gap: var(--mp-2); }

.mp-chips { display: flex; gap: var(--mp-2); flex-wrap: wrap; }
.mp-chip {
  display: flex;
  align-items: center;
  gap: var(--mp-2);
  border: var(--mp-streg);
  background: var(--mp-hvid);
  color: var(--mp-ink);
  border-radius: var(--mp-r-fuld);
  padding: var(--mp-2) var(--mp-4);
  cursor: pointer;
  font-size: var(--mp-lille);
  font-weight: 500;
  transition: border-color var(--mp-hurtig) var(--mp-kurve);
}
.mp-chip--farve { padding-left: var(--mp-2); }
.mp-chip__prik {
  width: var(--mp-5); height: var(--mp-5);
  border-radius: var(--mp-r-fuld);
  flex: 0 0 auto;
}
.mp-chip--flise .mp-chip__prik { border: var(--mp-streg); }

/* Valgt tilstand — den samme markering på serier og chips. */
.mp-serie[aria-pressed="true"],
.mp-chip[aria-pressed="true"] { border: 2px solid var(--mp-teal); }
.mp-serie[aria-pressed="true"],
.mp-chip--tilbehoer[aria-pressed="true"] { background: var(--mp-teal-lys); }

.mp-preview {
  position: sticky;
  top: 88px;
  background: var(--mp-hvid);
  border: var(--mp-streg);
  border-radius: var(--mp-r-lg);
  overflow: hidden;
}
.mp-preview__ramme { position: relative; aspect-ratio: 16 / 10; background: var(--mp-teal-lys); }
.mp-preview__ramme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* contain, ikke cover: AI-mærket er brændt ind i billedets nederste højre
   hjørne, og cover skærer netop dét hjørne af, når kundens foto har et andet
   format end 16/10. Mærkningen må ikke kunne beskæres væk af et layout. */
.mp-preview__resultat { object-fit: contain !important; background: var(--mp-nat); }

.mp-preview__tone { position: absolute; inset: 0; mix-blend-mode: soft-light; }
.mp-preview__arbejder {
  position: absolute;
  inset: 0;
  background: rgba(22,33,31,.82);
  color: var(--mp-papir);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: var(--mp-5);
}
.mp-preview__arbejder-titel { font-family: var(--mp-serif); font-size: 24px; line-height: 1.15; }
.mp-preview__navn {
  position: absolute;
  left: var(--mp-3);
  bottom: 10px;
  background: rgba(22,33,31,.7);
  color: var(--mp-papir);
  font-size: var(--mp-label);
  padding: 6px var(--mp-3);
  border-radius: var(--mp-r-sm);
}
.mp-preview__panel { padding: var(--mp-5); display: flex; flex-direction: column; gap: var(--mp-4); }
.mp-preview__opsum { display: flex; flex-direction: column; gap: 6px; }
.mp-preview__opsum-titel { font-family: var(--mp-serif); font-size: 26px; line-height: 1.15; }
.mp-preview__pris { display: flex; align-items: baseline; gap: var(--mp-2); }
.mp-preview__pris-tal { font-family: var(--mp-serif); font-size: 32px; }

.mp-note {
  background: var(--mp-teal-lys);
  border-radius: var(--mp-r-md);
  padding: var(--mp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mp-1);
  font-size: var(--mp-lille);
  line-height: 1.5;
}
.mp-note__overskrift { font-weight: 600; color: var(--mp-teal); }
.mp-fejl {
  background: var(--mp-teal-lys);
  border-left: 3px solid var(--mp-teal);
  border-radius: var(--mp-r-sm);
  padding: var(--mp-4);
  font-size: var(--mp-lille);
  line-height: 1.5;
  color: var(--mp-ink);
}

/* --- prisoverslag -------------------------------------------------------- */

.mp-to-spalter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--mp-7);
  align-items: center;
}
.mp-pris-panel {
  background: var(--mp-teal-lys);
  border-radius: var(--mp-r-lg);
  padding: var(--mp-6);
  display: flex;
  flex-direction: column;
  gap: var(--mp-4);
}
.mp-par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mp-4); }
.mp-pris-svar {
  border-top: var(--mp-streg);
  padding-top: var(--mp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mp-1);
}
.mp-pris-svar__tal {
  font-family: var(--mp-serif);
  font-size: var(--mp-h2);
  line-height: 1.08;
}

/* --- proces -------------------------------------------------------------- */

.mp-trin-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mp-6);
  margin-bottom: var(--mp-7);
}
.mp-proces-trin {
  border-top: var(--mp-streg);
  padding-top: var(--mp-4);
  display: flex;
  flex-direction: column;
  gap: var(--mp-2);
}
.mp-proces-trin p { margin: 0; }

.mp-figur {
  position: relative;
  margin: 0;
  border-radius: var(--mp-r-lg);
  overflow: hidden;
  background: var(--mp-teal-lys);
}
.mp-figur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-figur--bred { aspect-ratio: 21 / 9; }
.mp-figur--staaende { aspect-ratio: 4 / 3; }

/* --- aften-båndet -------------------------------------------------------- */

.mp-aften {
  position: relative;
  background: var(--mp-nat);
  padding-block: var(--mp-sektion);
  overflow: hidden;
}
.mp-aften__foto { opacity: .5; }
.mp-aften__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(22,33,31,.85) 0%, rgba(22,33,31,.35) 100%);
}
.mp-aften .mp-baand { position: relative; }
/* Overskriften er alt, hvad der er tilbage i båndet, og bunden er derfor
   sektionens egen. Blev de 48 px stående efter tal-båndet, ville sektionen
   hænge skævt: luft under, ingen luft over. */
.mp-aften h2 { color: var(--mp-papir); max-width: 15em; margin-bottom: 0; }
/* `.mp-noegletal` — tal-båndet i aften-sektionen — er væk med tallene selv
   (Q17). Stilreglen står ikke tilbage: en tom komponent, der bare venter på
   fire tal, er en invitation til at finde på dem. */

/* --- FAQ ----------------------------------------------------------------- */

.mp-faq { max-width: 800px; margin: 0 auto; padding-inline: var(--mp-5); }
.mp-faq__liste { display: flex; flex-direction: column; }
.mp-faq__punkt { border-top: var(--mp-streg); }
.mp-faq__liste::after { content: ""; display: block; border-top: var(--mp-streg); }
.mp-faq__spm {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mp-4);
  background: none;
  border: none;
  padding: 20px 0;
  cursor: pointer;
  text-align: left;
  font-size: var(--mp-brod);
  font-weight: 500;
  color: var(--mp-ink);
  line-height: 1.4;
}
.mp-faq__tegn { color: var(--mp-teal); font-size: 20px; flex: 0 0 auto; }
.mp-faq__svar {
  margin: 0;
  padding: 0 0 20px;
  font-size: var(--mp-brod);
  line-height: 1.65;
  color: var(--mp-skifer);
  max-width: 34em;
}

/* --- lead-formular ------------------------------------------------------- */

.mp-kontakt { background: var(--mp-hvid); border-top: var(--mp-streg); }
.mp-kontakt__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--mp-7);
}
.mp-form { display: flex; flex-direction: column; gap: var(--mp-4); }
.mp-kvittering {
  background: var(--mp-teal-lys);
  border-radius: var(--mp-r-lg);
  padding: var(--mp-6);
  display: flex;
  flex-direction: column;
  gap: var(--mp-2);
  align-self: start;
}
.mp-kvittering__titel { font-family: var(--mp-serif); font-size: 26px; color: var(--mp-teal); }

/* --- footer -------------------------------------------------------------- */

.mp-fod { background: var(--mp-nat); color: var(--mp-papir); padding-block: var(--mp-8); }
.mp-fod__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--mp-7);
}
.mp-fod__spalte { display: flex; flex-direction: column; gap: var(--mp-2); font-size: var(--mp-lille); }
.mp-fod__spalte--maerke { gap: var(--mp-3); }
.mp-fod__spalte p { margin: 0; color: var(--mp-sten); }
.mp-fod .mp-ordmaerke { font-size: 28px; }
/* Teal falder på nat-bunden; »Pool« låner den lyse. »my« bliver i skifer,
   som holder begge steder. */
.mp-fod .mp-navn__pool { color: var(--mp-teal-lys); }
.mp-fod__overskrift {
  font-size: var(--mp-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mp-aqua-lys);
}
.mp-fod a { color: var(--mp-papir); }
.mp-fod__kontakt { color: var(--mp-sten); }

/* --- fuldskærm (#20) ------------------------------------------------------
 * Klik på et billede viser det stort. Et CSS-overlay, ikke Fullscreen-API'et:
 * requestFullscreen() virker ikke på vilkårlige elementer i Safari på iPhone,
 * og det var dér, ønsket kom fra.
 */

/* Billeder man kan åbne. Markøren og fokusringen skal sige det — ellers er
   det en skjult funktion, og en skjult funktion findes ikke. */
.mp-aabnbar { cursor: zoom-in; }

.mp-fuldskaerm {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(22,33,31,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mp-5);
}

/* contain, ikke cover — det samme krav som i panelet: AI-mærket er brændt
   ind i billedets nederste højre hjørne, og cover ville skære netop dét
   hjørne af, når kundens foto har et andet format end skærmen. */
.mp-fuldskaerm__billede {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mp-fuldskaerm__luk {
  position: absolute;
  /* Safaris adresselinje på iPhone lægger sig hen over toppen af et
     position:fixed-lag. Uden safe-area-indrykningen kan lukkeknappen ende
     under den — og så er der ingen synlig vej ud af overlayet. */
  top: calc(var(--mp-4) + env(safe-area-inset-top));
  right: calc(var(--mp-4) + env(safe-area-inset-right));
  width: 44px;              /* 44 px er den mindste ramme, en tommel rammer */
  height: 44px;
  border-radius: var(--mp-r-md);
  border: 1px solid rgba(247,245,241,.4);
  background: rgba(22,33,31,.6);
  color: var(--mp-papir);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mp-fuldskaerm__luk:hover { background: var(--mp-teal); border-color: var(--mp-teal); }

/* Mærkningen på en mørk plade, ikke som løs tekst oven på et foto: her er
   baggrunden kendt, og så kan den faktisk læses. Samme greb som
   .mp-preview__navn og som det indbrændte mærke på OG-billedet. */
.mp-fuldskaerm__maerkning {
  position: absolute;
  left: calc(var(--mp-4) + env(safe-area-inset-left));
  bottom: calc(var(--mp-4) + env(safe-area-inset-bottom));
  background: rgba(22,33,31,.85);
  color: var(--mp-papir);
  font-size: var(--mp-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px var(--mp-3);
  border-radius: var(--mp-r-sm);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

/* Baggrunden må ikke kunne rulles, mens overlayet er åbent. */
body.mp-laast { overflow: hidden; }


/* --------------------------------------------------------------------------
 * MARKERINGEN — kundens fire hjørner på hendes eget foto
 *
 * Samme mørke rum som fuldskærmsvisningen, men et andet møbel: her SKAL man
 * kunne røre ved billedet, og derfor ligger værktøjet nedenunder frem for at
 * svæve oven på fotoet. En knap oven på tegnefladen ville stjæle det tryk,
 * der skulle have været et hjørne.
 * ------------------------------------------------------------------------ */

.mp-markering {
  /* Rød findes ikke i paletten, og det bliver den ved med. Det her er ikke
     brugerfladens farve, men en INSTRUKTION til billedmodellen, som tegnes
     ind i et arbejdsbillede og skal være væk igen i resultatet. Den skal
     kunne kendes fra alt, hvad der gror i en dansk have.

     Nuancen SKAL følges ad med `MARKERING_FARVE` i motor/visualisering.py —
     det, kunden ser sig selv tegne, er dét, serveren brænder ind. Der er
     ingen byggetrin at dele en konstant igennem (ADR-0002), så de to steder
     holdes i familie i hånden. Rettes den ene, rettes den anden. */
  --mp-markering-farve: #E6141E;

  position: fixed;
  inset: 0;
  z-index: 110;                 /* over #fuldskaerm (100) */
  background: rgba(22,33,31,.97);
  display: flex;
  flex-direction: column;
  gap: var(--mp-3);
  padding: calc(var(--mp-4) + env(safe-area-inset-top)) var(--mp-4)
           calc(var(--mp-4) + env(safe-area-inset-bottom));
}

/* Fladen tager den plads, der er tilovers, og billedet skalerer ned i den.
   `min-height: 0` er ikke pynt: uden den nægter et flex-barn at blive mindre
   end sit indhold, og et højt telefonfoto ville skubbe værktøjslinjen ud
   under skærmkanten — altså ingen vej til at gemme markeringen. */
.mp-markering__flade {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-markering__billede {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--mp-r-sm);
  /* Fotoet er underlaget, ikke målet: alle tryk skal ned i lærredet. */
  pointer-events: none;
  user-select: none;
}

/* Plads og størrelse SÆTTES AF JS — se `opmaal()`. CSS kan ikke vide, hvor
   inde i elementet et object-fit'et billede faktisk ender. */
.mp-markering__laerred {
  position: absolute;
  touch-action: none;           /* ellers ruller siden, når man trækker et hjørne */
  cursor: crosshair;
}

.mp-markering__hjaelp {
  margin: 0;
  text-align: center;
  color: var(--mp-papir);
  font-size: var(--mp-lille);
  line-height: 1.5;
}

.mp-markering__vaerktoej {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-3) var(--mp-5);
  align-items: center;
  justify-content: center;
}
.mp-markering__gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mp-2);
  align-items: center;
  justify-content: center;
}

/* Overlayets egne knapper. Teal-på-papir fra §4 kan ikke bruges på en nat-
   mørk flade — 1,8:1 — så de låner lukkeknappens dragt: lys ramme, lys tekst,
   samme 44 px høje ramme, en tommel kan ramme. */
.mp-markering__vaerktoej-knap {
  min-height: 44px;
  padding: 0 var(--mp-4);
  border-radius: var(--mp-r-md);
  border: 1px solid rgba(247,245,241,.4);
  background: rgba(22,33,31,.6);
  color: var(--mp-papir);
  font-size: var(--mp-lille);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--mp-hurtig) var(--mp-kurve);
}
.mp-markering__vaerktoej-knap:hover { background: var(--mp-teal); border-color: var(--mp-teal); }
.mp-markering__vaerktoej-knap[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}
.mp-markering__vaerktoej-knap[aria-disabled="true"]:hover {
  background: rgba(22,33,31,.6);
  border-color: rgba(247,245,241,.4);
}
.mp-markering__vaerktoej .mp-knap { min-height: 44px; padding: 0 var(--mp-5); font-size: var(--mp-lille); }

/* Knappen og kvitteringen ude på siden. */
.mp-markeringsvalg { display: flex; flex-direction: column; gap: var(--mp-2); align-items: flex-start; }
.mp-markeringsvalg .mp-knap { width: 100%; }
/* Kvitteret markering: teal er systemets «det er i orden» — samme greb som
   fotokvitteringen lige ovenfor. */
.mp-markeringsvalg[data-markeret="ja"] #markeringstatus { color: var(--mp-teal); font-weight: 500; }