/* Nemday – designsystem og komponenter. Mobil først, ingen frameworks, ingen eksterne filer.
   1. Tokens (farver, typografi, afstande, hjørner, skygger)  2. Grundlag  3. Komponenter
   4. Ramme (top, menu, side)  5. Skærme
   Kontrast: alle tekstpar ≥ 4,5:1 og feltkanter ≥ 3:1 (WCAG AA) – testet i tests/test_design.py.
   Knapper og felter er mindst 44 px høje (store fingre). */

/* ---------- 1. Tokens ---------- */
:root {
  /* Neutral base */
  --bg: #f4f3ef;            /* siden */
  --flade: #ffffff;         /* kort og felter */
  --flade-2: #f8f7f4;       /* indlejrede flader (rækker i et kort) */
  --neutral-flade: #eceae5; /* sekundære knapper, neutrale mærker */
  --tekst: #17181c;
  --tekst-2: #565b66;       /* dæmpet tekst */
  --kant: #e5e2db;          /* skillelinjer og kortkanter */
  --feltkant: #8b909a;      /* kanten på felter (≥ 3:1 mod hvid) */
  /* Én accentfarve */
  --accent: #3b34c4;
  --accent-moerk: #2c2696;
  --accent-flade: #ecebfb;
  --accent-ring: rgba(59, 52, 196, .35);
  /* Tilstande */
  --mangler: #b42318;       --mangler-flade: #fdeceb; --mangler-kant: #f2b8b2;
  --advarsel: #8a4a00;      --advarsel-flade: #fff2d6; --advarsel-kant: #f1cf85;
  --vundet: #11703d;        --vundet-flade: #e1f3e7;  --vundet-kant: #a9dcbb;
  /* Miljøer (sikkerhed: demo og rigtigt firma skal kunne skelnes på et øjeblik) */
  --demo: #fbd56b; --demo-tekst: #3d2a00; --firma: #0f5132;

  /* Typografi */
  --skrift: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --skrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --str-xs: .8125rem;  /* 13 px – kun mærker */
  --str-s: .875rem;    /* 14 px – hjælpetekst */
  --str-m: 1rem;       /* 16 px – brødtekst og felter (ingen zoom på iOS) */
  --str-l: 1.125rem;
  --str-xl: 1.5rem;
  --str-xxl: 1.875rem;
  --str-tal: 2.25rem;  /* de store tal */
  --vaegt-normal: 400; --vaegt-medium: 550; --vaegt-fed: 700;

  /* Afstande (4 px-skala) */
  --rum-1: .25rem; --rum-2: .5rem; --rum-3: .75rem; --rum-4: 1rem; --rum-5: 1.25rem; --rum-6: 1.5rem;
  --rum-7: 2rem; --rum-8: 3rem;

  /* Hjørner og skygger */
  --hjoerne-s: 10px; --hjoerne-m: 14px; --hjoerne-l: 20px; --hjoerne-fuld: 999px;
  --skygge-1: 0 1px 2px rgba(23, 24, 28, .04), 0 2px 10px rgba(23, 24, 28, .04);
  --skygge-2: 0 8px 30px rgba(23, 24, 28, .14);

  /* Komponentmål */
  --knap-hoejde: 48px; --knap-hoejde-lille: 44px; --knap-hoejde-stor: 56px;

  /* Gamle navne (bruges stadig enkelte steder) */
  --radius: var(--hjoerne-l); --skygge: var(--skygge-1); --kort: var(--flade); --daempet: var(--tekst-2);
  --blaa: var(--accent); --blaa-lys: var(--accent-flade); --blaa-mellem: var(--accent);
  --roed: var(--mangler); --roed-bg: var(--mangler-flade); --gul: var(--advarsel); --gul-bg: var(--advarsel-flade);
  --gron: var(--vundet); --gron-bg: var(--vundet-flade);
}

/* ---------- 2. Grundlag ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--str-m)/1.5 var(--skrift); color: var(--tekst); background: var(--bg);
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; }
h1 { font-size: var(--str-xxl); line-height: 1.15; letter-spacing: -.02em; margin: var(--rum-1) 0 var(--rum-3); font-weight: var(--vaegt-fed); }
h2 { font-size: var(--str-l); line-height: 1.3; letter-spacing: -.01em; margin: 0 0 var(--rum-3); font-weight: var(--vaegt-fed); }
h3 { font-size: var(--str-m); margin: var(--rum-4) 0 var(--rum-1); }
small { color: var(--tekst-2); }
code { background: var(--accent-flade); padding: 0 .3em; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-flade); }
summary { cursor: pointer; min-height: 44px; padding: .6rem 0; }  /* alle folder kan rammes med en finger */

/* ---------- 3. Komponenter ---------- */

/* 3.0 Ikoner: streg-ikoner (inline SVG fra web/ikoner.py) i tekstens farve */
.ikon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

/* 3.1 Knapper: primær (accent), sekundær (neutral), grøn (accept/vundet). Mindst 44 px. */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: var(--rum-2); min-height: var(--knap-hoejde);
  padding: .6rem 1.25rem; border-radius: var(--hjoerne-m); border: 1.5px solid transparent; background: var(--neutral-flade);
  color: var(--tekst); font: inherit; font-weight: var(--vaegt-medium); line-height: 1.25; text-decoration: none;
  cursor: pointer; text-align: center; transition: background-color .15s, transform .05s; -webkit-tap-highlight-color: transparent; }
.knap:hover { background: #e2dfd8; }
.knap:active { transform: translateY(1px); }
.knap.primaer { background: var(--accent); color: #fff; }
.knap.primaer:hover { background: var(--accent-moerk); }
.knap.gron { background: var(--vundet); color: #fff; }
.knap.gron:hover { background: #0c5a31; }
.knap.stor { width: 100%; min-height: var(--knap-hoejde-stor); font-size: var(--str-l); font-weight: var(--vaegt-fed); }
.knap.lille { min-height: var(--knap-hoejde-lille); padding: .45rem 1rem; font-size: var(--str-s); }
.knap[disabled], .knap[disabled]:hover { background: var(--neutral-flade); color: #6b707a; cursor: not-allowed; transform: none; }
/* Tekstknap: ser ud som et link, men har en 44 px trykflade */
.knap.tekst, .knap.tekst:hover { background: transparent; color: var(--accent); padding: 0 var(--rum-2); font-size: var(--str-s); font-weight: var(--vaegt-fed); }
.knap.tekst:hover { background: var(--accent-flade); }
.knap-raekke { display: flex; gap: var(--rum-2); flex-wrap: wrap; align-items: center; margin-top: var(--rum-3); }
.knap-raekke form { margin: 0; }
.link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--rum-2); font-weight: var(--vaegt-medium); }

/* 3.2 Kort */
.kort { background: var(--flade); border: 1px solid var(--kant); border-radius: var(--hjoerne-l); padding: var(--rum-5);
  box-shadow: var(--skygge-1); margin-bottom: var(--rum-4); }
.kort > h2:first-child { margin-top: 0; }

/* 3.3 Statusmærker */
.badge { display: inline-flex; align-items: center; gap: .3em; font-size: var(--str-xs); font-weight: var(--vaegt-fed);
  padding: .2rem .65rem; border-radius: var(--hjoerne-fuld); line-height: 1.4; white-space: nowrap; }
.badge::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.kladde { background: var(--neutral-flade); color: #45494f; }
.badge.sendt { background: var(--accent-flade); color: var(--accent); }
.badge.vundet { background: var(--vundet-flade); color: var(--vundet); }
.badge.tabt { background: var(--neutral-flade); color: var(--tekst-2); }
.badge.advar { background: var(--advarsel-flade); color: var(--advarsel); }
.badges { display: inline-flex; gap: var(--rum-1); flex-wrap: wrap; justify-content: flex-end; }
.badge.udloebet { background: var(--mangler-flade); color: var(--mangler); }
.badge.spoergsmaal { background: var(--accent); color: #fff; }
.badge.paabegyndt { background: var(--advarsel-flade); color: var(--advarsel); }

/* 3.4 Formularfelter */
.formular .felt, .felt { display: block; margin-bottom: var(--rum-4); }
.felt-navn { display: block; font-size: var(--str-s); font-weight: var(--vaegt-medium); color: var(--tekst); margin-bottom: var(--rum-1); }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; font: inherit; font-size: 16px; /* undgå zoom på iOS */
  padding: .7rem .85rem; border: 1.5px solid var(--feltkant); border-radius: var(--hjoerne-m); background: var(--flade);
  color: var(--tekst); min-height: 48px; transition: border-color .15s, box-shadow .15s; }
input[type=file] { padding: .55rem; }
select { -webkit-appearance: none; appearance: none; padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst-2) 50%), linear-gradient(135deg, var(--tekst-2) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #6b707a; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
input.intern, textarea.intern { background: #fffaeb; border-color: #b8975a; }
/* Ingen standardramme om fieldsets – de følger kortdesignet (fieldset.kort, .ny-kunde og .pris-blok har deres egen) */
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
fieldset.ny-kunde { border: 1.5px dashed var(--kant); border-radius: var(--hjoerne-m); padding: var(--rum-4); margin: 0 0 var(--rum-4); }
fieldset.ny-kunde legend { font-weight: var(--vaegt-medium); padding: 0 var(--rum-1); }
.hjaelp { color: var(--tekst-2); font-size: var(--str-s); margin: var(--rum-2) 0; }
.afkryds { display: flex; gap: var(--rum-2); align-items: center; min-height: 44px; margin-top: var(--rum-1); font-size: var(--str-s); }
/* Store valg (radioknapper) som fliser */
.valg { border: 0; padding: 0; margin: var(--rum-3) 0; }
.valg-linje { display: flex; align-items: center; gap: var(--rum-3); min-height: 52px; padding: .3rem var(--rum-4);
  border: 1.5px solid var(--kant); border-radius: var(--hjoerne-m); margin-top: var(--rum-2); cursor: pointer; background: var(--flade);
  font-weight: var(--vaegt-medium); }
.valg-linje:has(input:checked) { border-color: var(--accent); background: var(--accent-flade); color: var(--accent-moerk); }
.valg-linje input { width: 1.25rem; height: 1.25rem; margin: 0; }

/* 3.5 Tomme tilstande */
/* li.tom/p.tom = tom tilstand (overskrift, en linje tekst og evt. én knap). .raekke.tom er noget andet: en blank linje. */
li.tom, p.tom { color: var(--tekst-2); list-style: none; text-align: center; padding: var(--rum-7) var(--rum-5); margin: 0 0 var(--rum-4);
  border: 1.5px dashed #d6d2c9; border-radius: var(--hjoerne-l); background: var(--flade-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--rum-2); }
/* Et lille streg-ikon i en blød cirkel (tom-ikon) – også i "Alt er klaret" */
.tom-ikon { box-sizing: content-box; width: 24px; height: 24px; padding: 12px; border-radius: 50%; background: var(--accent-flade);
  color: var(--accent); margin-bottom: var(--rum-1); }
.tom span { max-width: 34ch; }
[data-alt-klaret] .tom-ikon { background: var(--vundet-flade); color: var(--vundet); }
/* Forsiden, når intet venter: én rolig linje i stedet for "Kræver din handling" */
.kort.alt-klaret { display: flex; align-items: center; gap: var(--rum-4); }
.kort.alt-klaret .tom-ikon { margin: 0; flex: none; }
.alt-klaret p { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.alt-klaret strong { font-size: var(--str-l); }
.alt-klaret span { color: var(--tekst-2); font-size: var(--str-s); }
.tom strong { color: var(--tekst); font-size: var(--str-l); }
.tom .knap { margin-top: var(--rum-2); }
td.tom { color: var(--tekst-2); }

/* 3.6 Bekræftelser og beskeder */
.flash { display: flex; gap: var(--rum-3); align-items: flex-start; padding: var(--rum-4) var(--rum-5); border-radius: var(--hjoerne-m);
  margin-bottom: var(--rum-4); font-weight: var(--vaegt-medium); }
.flash::before { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: .85rem; font-weight: var(--vaegt-fed); color: #fff; }
.flash.ok { background: var(--vundet-flade); color: var(--vundet); }
.flash.ok::before { content: "✓"; background: var(--vundet); }
.flash.fejl { background: var(--mangler-flade); color: var(--mangler); }
/* Godkendt eller vundet: et grønt flueben, der toner ind og tegnes – diskret, ingen konfetti */
.flash.fejr { align-items: center; }
.flash.fejr::before { content: none; }
.fejr-maerke { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--vundet); color: #fff; animation: fejr-ind .45s ease-out both; }
.fejr-maerke .ikon { width: 18px; height: 18px; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 0;
  animation: fejr-tegn .4s .2s ease-out both; }
.kunde-kvittering h1 { display: flex; align-items: center; gap: var(--rum-3); }
@keyframes fejr-ind { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes fejr-tegn { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .fejr-maerke, .fejr-maerke .ikon { animation: none; } }
.flash.fejl::before { content: "!"; background: var(--mangler); }
.callout { display: block; padding: var(--rum-4) var(--rum-5); border-radius: var(--hjoerne-l); margin-bottom: var(--rum-3);
  text-decoration: none; border: 1px solid transparent; }
.callout strong { display: block; font-size: var(--str-m); line-height: 1.35; }
.callout span { display: block; margin-top: var(--rum-1); font-size: var(--str-s); }
a.callout { transition: transform .05s; }
a.callout span:last-child { font-weight: var(--vaegt-medium); }
a.callout:active { transform: translateY(1px); }
.callout.advar { background: var(--advarsel-flade); color: var(--advarsel); border-color: var(--advarsel-kant); }
.callout.info { background: var(--accent-flade); color: var(--accent-moerk); }
.callout.ok { background: var(--vundet-flade); color: var(--vundet); border-color: var(--vundet-kant); }
.callout.udloebet { background: var(--mangler-flade); color: var(--mangler); border-color: var(--mangler-kant); }
.callout.spoergsmaal { background: var(--accent-flade); color: var(--accent-moerk); border-color: #cfccf4; }
.callout.spoergsmaal .citat { font-style: italic; margin: var(--rum-1) 0; color: var(--tekst); }
.callout.nej-tak { background: var(--neutral-flade); color: #45494f; }
.callout.henv { background: var(--accent-flade); color: var(--accent-moerk); border-color: #cfccf4; }
.callout.henv.advar { background: var(--advarsel-flade); color: var(--advarsel); border-color: var(--advarsel-kant); }
.callout .knap-raekke form { display: inline; }
.fejl-tekst { color: var(--mangler); font-weight: var(--vaegt-medium); }
.advar-tekst { color: var(--advarsel); }
.ok-tekst { color: var(--vundet); font-weight: var(--vaegt-medium); }
.center { text-align: center; }
.fodnote { color: var(--tekst-2); font-size: var(--str-s); }
.mangler-mark { color: var(--mangler); }

/* 3.7 Tal */
.totaler { display: grid; grid-template-columns: 1fr auto; gap: var(--rum-2) var(--rum-4); margin: 0; font-variant-numeric: tabular-nums; }
.totaler dt { color: var(--tekst-2); } .totaler dd { margin: 0; text-align: right; }
.totaler .streg { border-top: 1px solid var(--kant); padding-top: var(--rum-2); }
.totaler .i-alt { font-weight: var(--vaegt-fed); font-size: var(--str-l); color: var(--tekst); border-top: 2px solid var(--tekst);
  padding-top: var(--rum-3); margin-top: var(--rum-1); }
.totaler dd.i-alt { font-size: var(--str-xl); letter-spacing: -.01em; }
.totaler dd.i-alt.fejl-tekst { color: var(--mangler); }

/* 3.8 Tabeller */
.tabel { width: 100%; border-collapse: collapse; font-size: var(--str-s); }
.tabel th, .tabel td { text-align: left; padding: var(--rum-2) var(--rum-2); border-bottom: 1px solid var(--kant); vertical-align: top; }
.tabel th { font-size: var(--str-xs); color: var(--tekst-2); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--vaegt-medium); }
.tabel .h { text-align: right; white-space: nowrap; }
.tabel-rul { overflow-x: auto; }
/* Appen på hjemmeskærmen: vejledningen kun i browseren, "du bruger allerede appen" kun i appen (app.js: .standalone) */
.kun-standalone { display: none; }
.standalone .kun-i-browser { display: none !important; }
.standalone .kun-standalone { display: block; }
@media (display-mode: standalone) { .kun-i-browser { display: none !important; } .kun-standalone { display: block; } }
.trin-vejledning ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rum-3); counter-reset: trin; }
.trin-vejledning li { display: flex; gap: var(--rum-3); align-items: flex-start; counter-increment: trin; }
.trin-vejledning li .ikon { box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border-radius: 50%; flex: none;
  background: var(--accent-flade); color: var(--accent); }
.trin-vejledning li span::before { content: counter(trin) ". "; font-weight: var(--vaegt-fed); }
.trin-vejledning li span { padding-top: .55rem; }
/* Hurtige sideskift: fokus flyttes til indholdet uden en synlig ramme; en tynd streg øverst, mens siden hentes */
main.side:focus { outline: none; }
html[data-henter] body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: var(--accent); transform-origin: left; animation: henter 1.2s ease-out both; }
@keyframes henter { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@media (prefers-reduced-motion: reduce) { html[data-henter] body::before { animation: none; transform: scaleX(.6); } }
.sideskift { display: flex; justify-content: space-between; align-items: center; gap: var(--rum-2); margin-top: var(--rum-4); }
.sideskift .knap { gap: .2rem; }
.indst-oversigt + .indst-oversigt { margin-top: var(--rum-4); }

/* 3.9 Arbejder-lag og spinner */
.spinner { width: 36px; height: 36px; border: 4px solid var(--accent-flade); border-top-color: var(--accent); border-radius: 50%;
  animation: drej .9s linear infinite; margin: 0 auto; }
.spinner.stor { width: 56px; height: 56px; border-width: 5px; margin-bottom: var(--rum-4); }
@keyframes drej { to { transform: rotate(360deg); } }
.overlay { position: fixed; inset: 0; background: rgba(23, 24, 28, .5); display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: var(--rum-4); }
.overlay[hidden] { display: none; }
.overlay-boks { background: var(--flade); padding: var(--rum-7) var(--rum-7); border-radius: var(--hjoerne-l); text-align: center;
  min-width: 260px; box-shadow: var(--skygge-2); }
.overlay-boks p { margin: var(--rum-4) 0 0; font-weight: var(--vaegt-medium); }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .knap, a.callout { transition: none; } }

/* ---------- 4. Ramme ---------- */

/* Miljø: demo og rigtigt firma skal altid kunne skelnes på et øjeblik */
.miljoe-baand { font-size: var(--str-xs); text-align: center; padding: .4rem var(--rum-4); letter-spacing: .02em; line-height: 1.4; }
.miljoe-baand a { color: inherit; font-weight: var(--vaegt-fed); margin-left: var(--rum-2); display: inline-block; }
.miljoe-baand.demo { background: var(--demo); color: var(--demo-tekst); }
.miljoe-baand.firma { background: var(--firma); color: #fff; }
.miljoe-maerke { font-size: var(--str-xs); font-weight: var(--vaegt-fed); padding: .15rem .6rem; border-radius: var(--hjoerne-fuld);
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miljoe-maerke.demo { background: var(--demo); color: var(--demo-tekst); }
.miljoe-maerke.firma { background: var(--vundet-flade); color: var(--firma); }

.top { background: var(--bg); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--kant); }
body.miljoe-firma .top { box-shadow: inset 0 -3px 0 var(--firma); }
body.miljoe-demo .top { box-shadow: inset 0 -3px 0 var(--demo); }
.top-indre { max-width: 1120px; margin: 0 auto; padding: var(--rum-3) var(--rum-4); display: flex; align-items: center;
  gap: var(--rum-2) var(--rum-4); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--rum-2); min-height: 44px; text-decoration: none; color: var(--tekst);
  font-weight: var(--vaegt-fed); font-size: var(--str-l); letter-spacing: -.01em; min-width: 0; }
.brand img { height: 32px; }
.brand img.produkt-logo { width: 32px; }
.brand-firma { font-size: var(--str-s); font-weight: var(--vaegt-medium); color: var(--tekst-2); white-space: nowrap; }
body.miljoe-firma .brand-firma { background: var(--vundet-flade); color: var(--firma); padding: .15rem .6rem; border-radius: var(--hjoerne-fuld);
  font-size: var(--str-xs); font-weight: var(--vaegt-fed); }
.nav { display: flex; flex-wrap: wrap; gap: var(--rum-1); margin-left: auto; }  /* brydes i flere linjer – alt er synligt */
.nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none; color: var(--tekst-2);
  padding: 0 var(--rum-4); border-radius: var(--hjoerne-fuld); font-weight: var(--vaegt-medium); }
.nav a:hover { color: var(--tekst); background: var(--neutral-flade); }
.nav a.aktiv { background: var(--tekst); color: #fff; }
.nav-tal { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; margin-left: .35rem; border-radius: var(--hjoerne-fuld);
  background: var(--accent); color: #fff; font-size: var(--str-xs); font-weight: var(--vaegt-fed); text-align: center; line-height: 1.4rem; }
.nav a.aktiv .nav-tal { background: #fff; color: var(--tekst); }
.log-ud { display: flex; align-items: center; gap: var(--rum-2); margin: 0; flex-wrap: wrap; }
.bruger-navn { color: var(--tekst-2); font-size: var(--str-s); }

.side { max-width: 1120px; margin: 0 auto; padding: var(--rum-5) var(--rum-4) 7rem; }
.side-hoved { display: flex; justify-content: space-between; align-items: center; gap: var(--rum-4); margin-bottom: var(--rum-3); }
.side-hoved h1 { margin-bottom: 0; }
.side-hoved > div { min-width: 0; }
.ingress { color: var(--tekst-2); max-width: 60ch; margin: 0 0 var(--rum-5); }
.under { color: var(--tekst-2); margin: var(--rum-1) 0 0; display: flex; gap: var(--rum-2); align-items: center; flex-wrap: wrap;
  font-size: var(--str-s); }
.tilbage { display: inline-flex; align-items: center; gap: .15rem; min-height: 44px; text-decoration: none; font-size: var(--str-s);
  font-weight: var(--vaegt-medium); color: var(--tekst-2); }
.tilbage:hover { color: var(--tekst); }
.tilbage .ikon { width: 18px; height: 18px; margin-left: -4px; }

/* telefon: menuen fylder hele bredden og følger ikke med ned (ville tage halvdelen af skærmen) */
@media (max-width: 719px) {
  h1 { font-size: 1.75rem; }
  /* Toppen er én smal linje: logo, firmanavn (og DEMO-mærket). Menuen er bundmenuen; båndet siges af toppen. */
  .med-menu .miljoe-baand { display: none; }
  .med-menu .top .nav, .med-menu .top .log-ud { display: none; }
  .top-indre { padding: var(--rum-1) var(--rum-4); flex-wrap: nowrap; }
  .med-menu .brand-navn { display: none; }
  .brand { min-width: 0; font-size: var(--str-m); }
  .brand img { height: 28px; max-width: 96px; object-fit: contain; }
  .brand img.produkt-logo { width: 28px; }
  body.med-menu .brand-firma { font-size: var(--str-m); font-weight: var(--vaegt-fed); color: var(--tekst); background: none; padding: 0;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav { margin-left: 0; width: 100%; gap: var(--rum-1); }
  .nav a { padding: 0 .8rem; }
  .side-hoved .knap { white-space: nowrap; padding: .5rem .9rem; min-height: 44px; font-size: var(--str-s); }
  .log-ud { width: 100%; justify-content: space-between; }
  /* Plads nederst, så bundmenuen (og minitotalen/gem-bjælken) aldrig dækker det sidste på siden */
  .med-menu .side { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
  .med-menu .side:has(.mini-total) { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
  .med-menu .mini-total { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .med-menu .gem-bjaelke { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .js .med-menu form[data-aendringer].aendret .gem-bjaelke { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .js .med-menu .side:has(form.aendret[data-aendringer]) { padding-bottom: calc(184px + env(safe-area-inset-bottom)); }
  .kort { padding: var(--rum-4); }
  /* prislisten som stablede rækker: varenr. og pris øverst, beskrivelsen under, enhed og salgspris nederst */
  .tabel.stablet thead { display: none; }
  .tabel.stablet tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rum-3);
    grid-template-areas: "nr pris" "beskr beskr" "enhed salg"; padding: var(--rum-2) 0; border-bottom: 1px solid var(--kant); }
  .tabel.stablet td { border: 0; padding: .05rem 0; }
  .tabel.stablet td.nr { grid-area: nr; color: var(--tekst-2); font-size: var(--str-xs); }
  .tabel.stablet td.pris { grid-area: pris; font-weight: var(--vaegt-medium); }
  .tabel.stablet td.beskr { grid-area: beskr; }
  .tabel.stablet td.enhed { grid-area: enhed; color: var(--tekst-2); font-size: var(--str-xs); }
  .tabel.stablet td.enhed::before { content: "Enhed: "; }
  .tabel.stablet td.salg { grid-area: salg; color: var(--tekst-2); font-size: var(--str-xs); }
  .tabel.stablet td.salg::before { content: attr(data-etiket) " "; }
}

/* Bundmenu (kun telefon): Tilbud, Henvendelser, stort "+", Opfølgning, Mere */
.bundmenu { display: none; }
@media (max-width: 719px) {
  .bundmenu { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: end; position: fixed; left: 0; right: 0;
    bottom: 0; z-index: 30; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  /* Baggrunden er et lag for sig, så mørket bag et åbent ark ligger under bjælken (z-index -2 < -1) */
  .bundmenu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--flade); border-top: 1px solid var(--kant);
    box-shadow: 0 -4px 20px rgba(23, 24, 28, .06); }
  .bundmenu summary { list-style: none; padding: 0; }
  .bundmenu summary::-webkit-details-marker { display: none; }
  .bund-punkt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; padding: 6px 2px; color: var(--tekst-2); text-decoration: none; font-size: .75rem; line-height: 1.2;
    font-weight: var(--vaegt-medium); border-radius: var(--hjoerne-m); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bund-punkt .ikon { width: 24px; height: 24px; }
  .bund-punkt.aktiv, .bund-mere[open] > .bund-punkt { color: var(--accent); }
  .bund-punkt.aktiv .ikon { stroke-width: 2.4; }
  .bund-punkt .nav-tal { position: absolute; top: 2px; left: calc(50% + 4px); margin: 0; border: 2px solid var(--flade); line-height: 1.2rem; }
  .bund-ny > summary { width: 60px; height: 60px; margin: -24px auto 2px; border-radius: 50%; background: var(--accent); color: #fff;
    display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(59, 52, 196, .35); border: 4px solid var(--bg); }
  .bund-ny > summary .ikon { width: 28px; height: 28px; stroke-width: 2.4; transition: transform .15s; }
  .bund-ny[open] > summary .ikon { transform: rotate(45deg); }
  .bundmenu details[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: -2; background: rgba(23, 24, 28, .45); cursor: default; }
  .bund-ark { position: fixed; left: var(--rum-3); right: var(--rum-3); bottom: calc(80px + env(safe-area-inset-bottom)); display: grid; gap: 2px;
    padding: var(--rum-2); background: var(--flade); border-radius: var(--hjoerne-l); box-shadow: var(--skygge-2); }
  .bundmenu details:not([open]) > .bund-ark { display: none; }  /* et lukket ark har ingen boks */
  .bund-ark form { margin: 0; }
  .bund-ark a, .bund-ark button { display: flex; align-items: center; gap: var(--rum-3); width: 100%; min-height: 56px; padding: var(--rum-2) var(--rum-3);
    border: 0; border-radius: var(--hjoerne-m); background: none; color: var(--tekst); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
  .bund-ark a:hover, .bund-ark button:hover { background: var(--flade-2); }
  .bund-ark .ikon { width: 24px; height: 24px; color: var(--accent); }
  .bund-ark strong { display: block; font-weight: var(--vaegt-medium); }
  .bund-ark small { display: block; font-size: var(--str-s); }
}
@media (max-width: 719px) and (prefers-reduced-motion: reduce) { .bund-ny > summary .ikon { transition: none; } }

/* ---------- 5. Skærme ---------- */

/* 5.1 Forside: ét stort tal, tre små, så det, der venter, og listen */
.noegletal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rum-2); margin: var(--rum-4) 0 var(--rum-5); }
.tal-kort { background: var(--flade); border: 1px solid var(--kant); border-radius: var(--hjoerne-l); padding: var(--rum-3) var(--rum-3);
  display: flex; flex-direction: column; text-decoration: none; color: inherit; box-shadow: var(--skygge-1); min-width: 0; }
.tal-kort .tal { font-size: var(--str-xl); font-weight: var(--vaegt-fed); color: var(--tekst); line-height: 1.15; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.tal-kort .tal.lille { font-size: var(--str-l); padding-top: .35rem; }
.tal-kort .etiket { color: var(--tekst-2); font-size: var(--str-s); line-height: 1.3; margin-top: var(--rum-1); }
.tal-kort .etiket small { display: block; font-size: var(--str-xs); }
.tal-kort.advar .tal { color: var(--advarsel); }
/* Det store tal: vundet i alt */
.tal-kort.hero { background: var(--accent); border-color: var(--accent); color: #fff; margin: var(--rum-4) 0;
  padding: var(--rum-5) var(--rum-5) var(--rum-6); }
.tal-kort.hero .etiket { order: -1; color: #e4e2fb; margin: 0 0 var(--rum-1); font-size: var(--str-s); font-weight: var(--vaegt-medium); }
.tal-kort.hero .tal, .tal-kort.hero .tal.lille { color: #fff; font-size: var(--str-tal); padding: 0; }
/* "Kræver din handling": ét kort, én række pr. ting – farven sidder kun på ikonet */
.kort.handlinger { padding: var(--rum-2) 0; overflow: hidden; }
.handlinger h2 { padding: var(--rum-3) var(--rum-5) var(--rum-1); margin: 0; font-size: var(--str-m); }
.handling-liste { list-style: none; margin: 0; padding: 0; }
.handling-liste li + li { border-top: 1px solid var(--kant); }
.handling { display: flex; align-items: center; gap: var(--rum-3); min-height: 64px; padding: var(--rum-3) var(--rum-5);
  text-decoration: none; color: var(--tekst); -webkit-tap-highlight-color: transparent; }
.handling:hover { background: var(--flade-2); }
.handling-ikon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.handling-ikon .ikon { width: 20px; height: 20px; }
.handling-ikon.accent { background: var(--accent-flade); color: var(--accent); }
.handling-ikon.advarsel { background: var(--advarsel-flade); color: var(--advarsel); }
.handling-ikon.mangler { background: var(--mangler-flade); color: var(--mangler); }
.handling-ikon.vundet { background: var(--vundet-flade); color: var(--vundet); }
.handling-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.handling-tekst strong { font-weight: var(--vaegt-medium); line-height: 1.35; }
.handling-tekst span { font-size: var(--str-s); color: var(--tekst-2); }
.handling-tekst .citat { font-style: italic; color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.handling-antal { flex: none; min-width: 28px; height: 28px; padding: 0 .5rem; display: grid; place-items: center; border-radius: var(--hjoerne-fuld);
  background: var(--neutral-flade); font-size: var(--str-s); font-weight: var(--vaegt-fed); font-variant-numeric: tabular-nums; }
.handling-pil { flex: none; width: 20px; height: 20px; color: var(--tekst-2); }
.filtre { display: flex; flex-wrap: wrap; gap: var(--rum-2); padding-bottom: var(--rum-1); margin: var(--rum-5) 0 var(--rum-3); }
.chip { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none; color: var(--tekst);
  background: var(--flade); border: 1.5px solid var(--kant); padding: 0 var(--rum-4); border-radius: var(--hjoerne-fuld);
  font-size: var(--str-s); font-weight: var(--vaegt-medium); }
.chip span { color: var(--tekst-2); margin-left: .35rem; font-variant-numeric: tabular-nums; }
.chip.aktiv { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.chip.aktiv span { color: #d4d5da; }
.tilbudsliste, .henv-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rum-3); }
.tilbud-kort a, .henv-kort a { display: block; background: var(--flade); border: 1px solid var(--kant); border-radius: var(--hjoerne-l);
  padding: var(--rum-4) var(--rum-5); text-decoration: none; color: inherit; box-shadow: var(--skygge-1); }
.tilbud-kort a:hover, .henv-kort a:hover { border-color: #cfccc4; }
.tilbud-kort.foelg-op a, .henv-kort.for-gammel a { box-shadow: inset 4px 0 0 #d99a1c, var(--skygge-1); }
.henv-kort.akut a { box-shadow: inset 4px 0 0 var(--mangler), var(--skygge-1); }
.kort-top { display: flex; justify-content: space-between; align-items: center; gap: var(--rum-2); }
.nummer { font-size: var(--str-xs); color: var(--tekst-2); font-variant-numeric: tabular-nums; text-decoration: none; }
.kort-titel { font-weight: var(--vaegt-fed); font-size: var(--str-l); line-height: 1.3; margin-top: var(--rum-2); letter-spacing: -.01em; }
.kort-kunde { color: var(--tekst-2); font-size: var(--str-s); margin-top: .1rem; }
.kort-bund { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rum-2); margin-top: var(--rum-3); flex-wrap: wrap; }
.kort-total { font-weight: var(--vaegt-fed); font-size: var(--str-xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kort-note { font-size: var(--str-s); color: var(--tekst-2); }
.kort-udloebet { color: var(--tekst-2); font-size: var(--str-s); margin-top: .1rem; }  /* rød bruges kun i mærket */
.link-tekst { color: var(--accent); font-weight: var(--vaegt-medium); }
.tabte-grunde ul { list-style: none; padding: 0; margin: var(--rum-2) 0; }
.tabte-grunde li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 2rem; align-items: center; gap: var(--rum-3); padding: var(--rum-1) 0; }
.tabte-grunde .bar { height: .6rem; background: var(--neutral-flade); border-radius: var(--hjoerne-fuld); overflow: hidden; }
.tabte-grunde .bar span { display: block; height: 100%; background: var(--tekst-2); border-radius: var(--hjoerne-fuld); }
.tabte-grunde .antal { text-align: right; font-weight: var(--vaegt-fed); }
.lavet-paa { color: var(--tekst-2); font-size: var(--str-s); }
p.lavet-paa { margin-top: var(--rum-1); }

/* 5.2 Henvendelser */
.mangler-tekst { color: var(--mangler); font-weight: var(--vaegt-medium); }
.badge.hast-akut { background: var(--mangler); color: #fff; }
.badge.hast-snart { background: var(--advarsel-flade); color: var(--advarsel); }
.badge.hast-kan_vente { background: var(--neutral-flade); color: #45494f; }
.badge.henv-ny { background: var(--accent-flade); color: var(--accent); }
.badge.henv-besvaret { background: var(--neutral-flade); color: #45494f; }
.badge.henv-tilbud_lavet { background: var(--vundet-flade); color: var(--vundet); }
.badge.henv-afvist { background: var(--neutral-flade); color: var(--tekst-2); }
.badge.henv-ny.hast-akut { background: var(--mangler); color: #fff; }  /* ny og akut: ét mærke, "Akut" */
.mangler-maerke { display: inline-block; font-size: var(--str-xs); font-weight: var(--vaegt-fed); padding: .05rem .5rem; border-radius: var(--hjoerne-fuld);
  background: var(--mangler-flade); color: var(--mangler); vertical-align: 1px; margin-left: .2rem; }
.ikke-oplyst { display: inline-block; font-size: var(--str-xs); font-weight: var(--vaegt-medium); padding: .05rem .5rem; border-radius: var(--hjoerne-fuld);
  background: var(--neutral-flade); color: #45494f; vertical-align: 1px; margin-left: .2rem; }
.mangler-felt input, .mangler-felt select, .mangler-felt textarea { border-color: var(--mangler); background: #fffafa; }
.fra-teksten { display: block; font-style: italic; overflow-wrap: anywhere; }
.vurdering { display: block; }
.vurdering strong { color: var(--tekst); }
fieldset.ren { border: 0; padding: 0; margin: 0; min-width: 0; }
.svar-advarsler { margin: 0 0 var(--rum-2); padding: var(--rum-3) var(--rum-4) var(--rum-3) 2rem; background: var(--advarsel-flade); color: var(--advarsel);
  border-radius: var(--hjoerne-m); font-size: var(--str-s); }
.henv-tekst p { overflow-wrap: anywhere; }
.nyt-svar { margin-top: var(--rum-5); border-top: 1px solid var(--kant); padding-top: var(--rum-4); }
.kanal-valg { display: flex; flex-wrap: wrap; gap: var(--rum-2); margin-top: 0; }
.kanal-valg legend { width: 100%; margin-bottom: var(--rum-1); }
.kanal-valg .valg-linje { margin-top: 0; flex: 1 1 6rem; justify-content: center; }
.laes-igen { margin-top: var(--rum-3); }
/* Segmenteret valg (Sms | Mail | Opkald): én række, radioknappen dækker hele feltet (usynlig), det valgte er hvidt */
.kanal-valg:has(.segment) { display: block; }
.segment { display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px; background: var(--neutral-flade); border-radius: var(--hjoerne-m); }
.segment .valg-linje { position: relative; flex: 1 1 0; min-width: 0; justify-content: center; min-height: 44px; margin: 0; padding: 0 var(--rum-2);
  border: 0; border-radius: 10px; background: transparent; color: var(--tekst-2); }
.segment .valg-linje input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment .valg-linje:has(input:checked) { background: var(--flade); color: var(--tekst); box-shadow: var(--skygge-1); }
.segment .valg-linje:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 1px; }
.historik { margin-top: var(--rum-4); }
.historik summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.historik ul { margin: var(--rum-1) 0 0; padding-left: 1.1rem; }
p.fra-henvendelse { margin-top: var(--rum-1); }
.status-knapper { border-top: 1px solid var(--kant); margin-top: var(--rum-4); padding-top: var(--rum-4); }
/* indbakken: én linje ("Indbakken er tjekket … · Tjek nu") og en info-knap, der folder forklaringen ud */
.info-linje { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--rum-1); min-height: 44px;
  padding-right: 48px; margin: 0 0 var(--rum-4); color: var(--tekst-2); font-size: var(--str-s); }
.info-linje > p { margin: 0; }
.indbakke-linje { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--rum-1); min-height: 44px;
  padding-right: 48px; margin: 0 0 var(--rum-4); color: var(--tekst-2); font-size: var(--str-s); }
.indbakke-status { margin: 0; }
.indbakke-linje form { margin: 0; display: flex; align-items: center; }
.indbakke-linje form::before { content: "·"; margin-right: var(--rum-1); }
.indbakke-linje.fejl { padding: var(--rum-3) 48px var(--rum-3) var(--rum-4); background: var(--advarsel-flade); color: var(--advarsel);
  border-radius: var(--hjoerne-m); }
.indbakke-linje.fejl .indbakke-status span { display: block; }
.indbakke-linje.fejl form::before { content: none; }
.info-fold { order: 9; flex-basis: 100%; }
.info-fold > summary { position: absolute; top: 0; right: 0; width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center;
  list-style: none; color: var(--tekst-2); border-radius: 50%; }
.indbakke-linje.fejl .info-fold > summary { top: var(--rum-1); }
.info-fold > summary::-webkit-details-marker { display: none; }
.info-fold > summary .ikon { width: 22px; height: 22px; }
.info-fold[open] > summary { color: var(--accent); background: var(--accent-flade); }
.info-tekst { margin-top: var(--rum-2); padding: var(--rum-3) var(--rum-4); background: var(--flade); border: 1px solid var(--kant);
  border-radius: var(--hjoerne-m); color: var(--tekst-2); }
.info-tekst p { margin: 0 0 var(--rum-2); }
.info-tekst p:last-child { margin-bottom: 0; }
/* indbakken (henvendelser fra mail) */
.callout.indbakke { display: flex; flex-wrap: wrap; gap: var(--rum-3) var(--rum-4); align-items: center; justify-content: space-between; }
.callout.indbakke .indbakke-tekst { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.callout.indbakke form { flex: none; }
details.sprunget { margin-top: var(--rum-5); }
details.sprunget > summary { cursor: pointer; font-weight: var(--vaegt-medium); min-height: 44px; display: flex; align-items: center; gap: var(--rum-2); }
details.sprunget .antal, section.i-spam .antal { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: var(--hjoerne-fuld);
  background: var(--neutral-flade); color: #45494f; font-size: var(--str-xs); text-align: center; line-height: 1.4rem; }
section.i-spam { border-color: var(--advarsel-kant); }
section.i-spam h2 { display: flex; align-items: center; gap: var(--rum-2); }
section.i-spam .antal { background: var(--advarsel-flade); color: var(--advarsel); }
.sprunget-liste { list-style: none; margin: var(--rum-2) 0 0; padding: 0; display: grid; gap: var(--rum-2); }
.sprunget-liste li { display: flex; flex-wrap: wrap; gap: var(--rum-2) var(--rum-3); align-items: center; justify-content: space-between;
  padding: var(--rum-3) var(--rum-4); border: 1px solid var(--kant); border-radius: var(--hjoerne-m); background: var(--flade-2); }
.sprunget-tekst { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.sprunget-tekst > * { display: block; margin: .1rem 0; }

/* 5.3 Ny henvendelse og nyt tilbud: billeder */
.billed-forhaand { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--rum-2); margin: var(--rum-2) 0 var(--rum-4); }
.billed-forhaand:empty { display: none; }
.billed-forhaand img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--hjoerne-m); display: block; }
/* Med JS: filfeltet skjules bag en stor knap, og valgte billeder lægges oven i hinanden (app.js) */
.billed-knap { display: none; }
.js .billed-knap { display: inline-flex; width: 100%; margin-top: var(--rum-1); min-height: 64px; background: var(--accent-flade);
  color: var(--accent-moerk); border: 1.5px dashed #a9a4ea; font-weight: var(--vaegt-fed); }
.js .billed-knap:hover { background: #e2e0f8; }
.billed-knap .ikon { width: 22px; height: 22px; }
.js .billed-knap.fuld { background: var(--neutral-flade); border-color: var(--kant); color: #6b707a; cursor: not-allowed; }
.js #billed-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.billed-status { margin: calc(-1 * var(--rum-1)) 0 var(--rum-2); font-weight: var(--vaegt-medium); color: var(--accent-moerk); }
.billed-status .advar { display: block; font-weight: var(--vaegt-normal); color: var(--advarsel); }
.billede { position: relative; }
.billede .fjern { position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; background: var(--tekst); color: #fff; font: inherit; font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--skygge-1); }
/* Større trykflade end selve cirklen (44 px) */
.billede .fjern::after { content: ""; position: absolute; inset: -8px; }
.kunde-besked { margin: var(--rum-2) 0; padding: var(--rum-3) var(--rum-4); background: var(--flade-2); border-left: 3px solid var(--accent);
  border-radius: 0 var(--hjoerne-m) var(--hjoerne-m) 0; color: var(--tekst); }
.kunde-besked p { margin: 0; white-space: pre-line; }
.kunde-besked footer { font-size: var(--str-xs); color: var(--tekst-2); margin-top: var(--rum-1); }

/* 5.4 Tilbud: gennemse og ret */
.mester-noter { background: var(--advarsel-flade); border: 1px solid var(--advarsel-kant); border-radius: var(--hjoerne-l);
  padding: var(--rum-4) var(--rum-5); margin-bottom: var(--rum-4); }
.mester-noter h2 { color: var(--advarsel); }
.mester-noter h2 small { color: var(--advarsel); font-weight: var(--vaegt-normal); }
.mester-noter > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--rum-2); min-height: 44px; }
.mester-noter > summary::-webkit-details-marker { display: none; }
.mester-noter > summary::after { content: "▾"; color: var(--advarsel); margin-left: auto; transition: transform .15s; }
.mester-noter:not([open]) > summary::after { transform: rotate(-90deg); }
.mester-noter > summary h2 { margin: 0; }
.mester-noter[open] > summary { margin-bottom: var(--rum-2); }
.mester-noter h3 { font-size: var(--str-s); color: var(--advarsel); text-transform: uppercase; letter-spacing: .04em; }
.mester-noter ul { margin: var(--rum-1) 0 var(--rum-2); padding-left: 1.2rem; }
.pris-log em { color: var(--advarsel); font-style: normal; font-weight: var(--vaegt-medium); }
.spoergsmaal-liste li { margin-bottom: var(--rum-2); }
.spoergsmaal-liste form { display: inline-flex; margin: 0 0 0 var(--rum-2); }
.spoergsmaal-liste label { display: inline-flex; gap: var(--rum-2); align-items: center; font-weight: var(--vaegt-medium); min-height: 44px; }
.maerke-pris { display: inline-block; font-size: var(--str-xs); font-weight: var(--vaegt-fed); padding: .1rem .55rem; border-radius: var(--hjoerne-fuld);
  background: #fde3b4; color: #6b3a00; margin-right: var(--rum-1); }
.maerke-pris.afklaret { background: var(--vundet-flade); color: var(--vundet); }
.kort.frosset { background: var(--flade-2); }
.kort.frosset > summary { cursor: pointer; min-height: 44px; }
.kort.frosset[open] > summary { margin-bottom: var(--rum-3); }
.frosne-varer { margin: var(--rum-1) 0 0; padding-left: 1.1rem; font-size: var(--str-s); color: var(--tekst-2); }
form.genaabn { margin-top: var(--rum-4); border-top: 1px solid var(--kant); padding-top: var(--rum-3); }
form.genaabn .hjaelp { display: block; }
.mangler-kunde { border-color: var(--mangler-kant); background: #fffafa; }
.gitter-2, .gitter-3 { display: grid; gap: 0 var(--rum-4); }
.blokeret ul { margin: var(--rum-1) 0 0; padding-left: 1.1rem; }
.raekker { display: grid; gap: var(--rum-3); }
/* Mobil: én vare pr. kort, felterne stablet i fuld bredde (minmax(0, …) så lange varenavne ikke skubber kortet ud) */
.raekke { border: 1px solid var(--kant); border-radius: var(--hjoerne-m); padding: var(--rum-4); display: grid; gap: 0 var(--rum-3);
  background: var(--flade-2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "antagelse antagelse" "vare vare" "beskr beskr" "bemaerk bemaerk" "antal enhed" "beloeb beloeb" "pris pris" "note note" "fjern fjern"; }
.raekke > * { min-width: 0; }
.raekke select { text-overflow: ellipsis; }
/* Alle tekstfelter vokser med indholdet: app.js sætter højden. Uden JS (ingen .js) kan feltet scrolles. */
.js textarea { overflow-y: hidden; resize: none; }
.raekke .felt { margin-bottom: var(--rum-3); }
.raekke .vare { grid-area: vare; } .raekke .beskr { grid-area: beskr; } .raekke .antal { grid-area: antal; }
.raekke .enhed { grid-area: enhed; } .raekke .beloeb { grid-area: beloeb; } .raekke .note { grid-area: note; }
.raekke .bemaerk { grid-area: bemaerk; }
.raekke .antagelse { grid-area: antagelse; margin-bottom: var(--rum-3); padding: var(--rum-2) var(--rum-3); border-radius: var(--hjoerne-s);
  font-size: var(--str-s); background: var(--advarsel-flade); border: 1px solid var(--advarsel-kant); display: flex; flex-wrap: wrap;
  gap: var(--rum-1) var(--rum-3); align-items: center; }
.raekke .antagelse.bekraeftet { background: var(--vundet-flade); border-color: var(--vundet-kant); }
.raekke .antagelse label { display: flex; gap: var(--rum-2); align-items: center; min-height: 44px; font-weight: var(--vaegt-medium); }
.raekke.antaget { border-color: var(--advarsel-kant); }
.raekke textarea[readonly], .raekke input[readonly] { background: var(--neutral-flade); color: #45494f; border-color: transparent; }
.raekke .fjern { grid-area: fjern; display: flex; align-items: center; gap: var(--rum-2); min-height: 44px; font-size: var(--str-s); color: var(--tekst-2); }
.raekke .pris-blok { grid-area: pris; display: none; border: 1.5px dashed var(--mangler-kant); border-radius: var(--hjoerne-m);
  padding: var(--rum-3) var(--rum-3) var(--rum-1); margin: 0 0 var(--rum-3); background: var(--flade); }
.raekke.mangler .pris-blok, .raekke.mester .pris-blok { display: grid; gap: 0 var(--rum-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.raekke.mester .pris-blok { border-color: #c9c6f3; }
.pris-blok legend { font-size: var(--str-s); font-weight: var(--vaegt-medium); color: var(--mangler); padding: 0 var(--rum-1); }
.raekke.mester .pris-blok legend { color: var(--accent); }
.pris-blok .gem-i-prisliste { grid-column: 1 / -1; display: flex; gap: var(--rum-2); align-items: center; min-height: 44px; font-size: var(--str-s); }
.mester-maerke { display: inline-block; margin-top: var(--rum-1); font-size: var(--str-xs); font-weight: var(--vaegt-fed); color: var(--accent);
  background: var(--accent-flade); padding: .1rem .55rem; border-radius: var(--hjoerne-fuld); }
.mester-maerke[hidden] { display: none; }
.raekke.arbejde { grid-template-areas: "beskr beskr" "antal antal" "fjern fjern"; }
.raekke.mangler { border-color: var(--mangler-kant); background: #fffafa; }
.raekke.tom { border-style: dashed; background: transparent; }
.raekke.tom .note, .raekke.tom .beloeb { display: none; }
.raekke:has(.fjern input:checked) { opacity: .45; }
.raekke-badge { display: block; font-weight: var(--vaegt-fed); font-size: var(--str-l); padding-top: .1rem; font-variant-numeric: tabular-nums; }
.gem-linje { display: flex; align-items: center; gap: var(--rum-3); flex-wrap: wrap; }
.gem-status { color: var(--tekst-2); font-size: var(--str-s); }
.gem-status.ok { color: var(--vundet); }
.gem-status.fejl { color: var(--mangler); }
.total-kort h2 { color: var(--tekst-2); font-size: var(--str-s); font-weight: var(--vaegt-medium); text-transform: uppercase; letter-spacing: .04em; }
.mangler-kort { background: var(--mangler-flade); border-color: var(--mangler-kant); color: var(--mangler); }
.mangler-kort ul { padding-left: 1.1rem; margin: var(--rum-1) 0 var(--rum-2); }
.mangler-kort small { color: var(--mangler); }
.handling-kort form { margin-top: var(--rum-3); }
.handling-kort h2 { font-size: var(--str-xl); }
/* Minitotal: svæver over bunden på telefonen */
.mini-total { position: fixed; left: var(--rum-3); right: var(--rum-3); bottom: calc(var(--rum-3) + env(safe-area-inset-bottom));
  background: var(--tekst); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: var(--rum-3);
  padding: var(--rum-3) var(--rum-5); border-radius: var(--hjoerne-l); z-index: 20; font-variant-numeric: tabular-nums;
  box-shadow: var(--skygge-2); min-height: 52px; }
.mini-total strong { font-size: var(--str-l); }
.mini-total strong.fejl-tekst { color: #ffc4bd; }
.pdf-visning iframe { display: none; width: 100%; height: 80vh; border: 1px solid var(--kant); border-radius: var(--hjoerne-m); margin-top: var(--rum-3); }
.kopi-liste { list-style: none; padding: 0; margin: 0 0 var(--rum-2); }
.kopi-liste li { padding: var(--rum-1) 0; }
p.kopi-af { margin-top: var(--rum-1); }
.besvarede-spm summary { cursor: pointer; color: var(--tekst-2); min-height: 44px; display: flex; align-items: center; }
.accept-link { margin-top: var(--rum-4); border-top: 1px solid var(--kant); padding-top: var(--rum-3); }
.accept-link h3 { margin-top: 0; }
.accept-link input { font-size: 14px; font-family: var(--skrift-mono); }
.accepteret-af { margin: var(--rum-1) 0; }

/* 5.5 Job (udkastet laves) */
.arbejder-kort { text-align: center; padding: var(--rum-7) var(--rum-4); }
.arbejder-kort h1 { margin-bottom: var(--rum-1); }
.vent-tid { margin: 0 0 var(--rum-3); font-size: var(--str-s); color: var(--tekst-2); }
.trin { text-align: left; max-width: 340px; margin: var(--rum-4) auto; padding-left: 1.2rem; color: var(--tekst-2); }
.trin li { padding: var(--rum-1) 0; }
.trin li.aktiv { color: var(--accent); font-weight: var(--vaegt-medium); }
.trin li.faerdig { color: var(--vundet); }
.trin li.faerdig::marker { content: "✓  "; }

/* 5.6 Opfølgning */
.sektion { display: flex; align-items: center; gap: var(--rum-2); margin-top: var(--rum-6); }
.taeller { background: var(--accent-flade); color: var(--accent); border-radius: var(--hjoerne-fuld); font-size: var(--str-xs); padding: .05rem .55rem; font-weight: var(--vaegt-fed); }
.opf-kort.foelg-op { box-shadow: inset 4px 0 0 #d99a1c, var(--skygge-1); }
.opf-kunde { margin: 0; color: var(--tekst-2); font-size: var(--str-s); overflow-wrap: anywhere; }
.opf-handling { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rum-1) var(--rum-2); margin-top: var(--rum-3); }
.opf-handling form { margin: 0; }
.opf-handling .knap.primaer { flex: 1 1 100%; }
.opf-kort h3 { margin: var(--rum-1) 0 .1rem; font-size: var(--str-l); }
.mail-udkast { margin-top: var(--rum-3); }
.mail-udkast textarea { font-family: var(--skrift-mono); font-size: 14px; }

/* 5.7 Indstillinger, import og brugere */
fieldset.kort { min-width: 0; }
fieldset.kort[disabled] { opacity: .7; }
.gem-bjaelke { position: sticky; bottom: var(--rum-3); z-index: 5; display: flex; flex-wrap: wrap; gap: var(--rum-2) var(--rum-4); align-items: center;
  background: var(--flade); border: 1px solid var(--kant); border-radius: var(--hjoerne-l); padding: var(--rum-3) var(--rum-4); margin-bottom: var(--rum-4);
  box-shadow: var(--skygge-2); }
.gem-bjaelke .hjaelp { margin: 0; }
.gem-tekst { font-weight: var(--vaegt-medium); }
/* Med JS: kun når noget er ændret – en smal, mørk bjælke lige over bundmenuen (større skærme: nederst), og siden får
   plads nederst (også når et felt får fokus), så bjælken aldrig dækker et felt */
.js form[data-aendringer] .gem-bjaelke { display: none; }
.js form[data-aendringer].aendret .gem-bjaelke { display: flex; flex-wrap: nowrap; justify-content: space-between; position: fixed;
  left: var(--rum-3); right: var(--rum-3); bottom: var(--rum-4); z-index: 25; max-width: 560px; margin: 0 auto; min-height: 56px;
  padding: var(--rum-1) var(--rum-1) var(--rum-1) var(--rum-5); border: 0; border-radius: var(--hjoerne-l);
  background: var(--tekst); color: #fff; box-shadow: var(--skygge-2); animation: fejr-ind .2s ease-out both; }
.js .side:has(form.aendret[data-aendringer]) { padding-bottom: 10rem; }
html:has(form.aendret[data-aendringer]) { scroll-padding-bottom: 10rem; }
@media (prefers-reduced-motion: reduce) { .js form[data-aendringer].aendret .gem-bjaelke { animation: none; } }
.noegle-vaerdi { display: grid; grid-template-columns: max-content 1fr; gap: var(--rum-1) var(--rum-4); margin: 0; }
.noegle-vaerdi dt { color: var(--tekst-2); } .noegle-vaerdi dd { margin: 0; }
.indst-logo { max-height: 48px; margin-bottom: var(--rum-3); }
.kolonne-valg { display: grid; gap: 0 var(--rum-3); }
fieldset.maade { border: 0; padding: 0; margin: 0 0 var(--rum-3); }
fieldset.maade label { display: flex; gap: var(--rum-2); align-items: center; min-height: 44px; }
.import-tabel th.valgt, .import-tabel td.valgt { background: var(--accent-flade); }
.import-tabel .raekke-nr { color: var(--tekst-2); font-size: var(--str-xs); width: 1%; }
.felt-maerke { display: block; color: var(--accent); font-weight: var(--vaegt-fed); text-transform: none; letter-spacing: 0; }
.tabel.afviste td { font-size: var(--str-s); }
.avance-form { display: flex; flex-wrap: wrap; gap: var(--rum-1) var(--rum-3); align-items: flex-end; margin: 0 0 var(--rum-4);
  padding: var(--rum-3); border: 1.5px dashed var(--kant); border-radius: var(--hjoerne-m); }
.avance-form .felt { margin: 0; max-width: 12rem; }
.avance-form .hjaelp { flex-basis: 100%; margin: 0; }
.maade.pristype label, div.maade.pristype label { display: flex; gap: var(--rum-2); align-items: flex-start; min-height: 44px; }
.maade.pristype input[type=radio] { margin-top: .15rem; flex: none; }
.maade.pristype label > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
div.maade.pristype { margin: 0 0 var(--rum-3); }
.soeg-form { display: flex; flex-wrap: wrap; gap: var(--rum-1) var(--rum-3); align-items: flex-end; margin: 0 0 var(--rum-2); }
.soeg-form .felt { margin: 0; flex: 1 1 14rem; }
input.kort-tal { max-width: 6rem; text-align: right; }
.felt.vare-soeg { margin-bottom: var(--rum-1); }
td.salgspris { font-weight: var(--vaegt-medium); }
.fejlliste { margin: 0; padding-left: 1.1rem; }
.bruger-liste { list-style: none; padding: 0; margin: 0; }
.bruger-liste > li { padding: var(--rum-3) 0; border-top: 1px solid var(--kant); }
.bruger-liste > li:first-child { border-top: 0; }
.bruger-liste .inaktiv { opacity: .65; }
.bruger-liste select { min-height: 44px; }
.nyt-link input { width: 100%; }

/* 5.8 Vælg miljø og nyt firma */
.miljoe-liste { list-style: none; padding: 0; margin: 0 0 var(--rum-4); display: grid; gap: var(--rum-3); }
.miljoe-kort { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rum-1); padding: var(--rum-5); border-radius: var(--hjoerne-l);
  border: 1px solid var(--kant); background: var(--flade); box-shadow: var(--skygge-1); text-decoration: none; color: inherit; }
.miljoe-kort.firma { box-shadow: inset 5px 0 0 var(--firma), var(--skygge-1); }
.miljoe-kort.demo { box-shadow: inset 5px 0 0 #d99a1c, var(--skygge-1); }
.miljoe-kort.ny { border-style: dashed; border-width: 1.5px; color: var(--accent); box-shadow: none; background: transparent; }
.miljoe-kort.aktiv { outline: 3px solid var(--accent-ring); }

/* 5.9 Køreplan */
.koereplan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rum-3); }
.trin-kort { display: flex; flex-direction: column; gap: var(--rum-2); align-items: flex-start; padding: var(--rum-4); border: 1px solid var(--kant); border-radius: var(--hjoerne-m); }
.trin-kort.klar { background: var(--vundet-flade); border-color: var(--vundet-kant); }
.trin-kort.paabegyndt { background: #fffaeb; border-color: var(--advarsel-kant); }
.trin-kort .badge { flex: none; }
.trin-kort p { margin: .15rem 0 0; color: var(--tekst-2); font-size: var(--str-s); }
.kaede { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rum-2); counter-reset: trin; }
.kaede li { counter-increment: trin; font-size: var(--str-s); padding: .35rem .8rem; border-radius: var(--hjoerne-fuld); background: var(--neutral-flade); color: #45494f; }
.kaede li::before { content: counter(trin) ". "; color: var(--tekst-2); }
.kaede li.klar { background: var(--vundet); color: #fff; }
.kaede li.klar::before { color: #d4f0de; }
.kaede li.paabegyndt { background: var(--demo); color: var(--demo-tekst); }
.kaede li.paabegyndt::before { color: var(--demo-tekst); }
.koereplan .dele { list-style: none; margin: var(--rum-2) 0 0; padding: 0; display: grid; gap: var(--rum-1); font-size: var(--str-s); }
.koereplan .dele .badge { font-size: .75rem; margin-right: var(--rum-2); }

/* 5.10 Login */
.login-kort { max-width: 26rem; margin: var(--rum-7) auto; padding: var(--rum-7) var(--rum-6); }
body:has(.login-kort) .top { display: none; }  /* logoet står i kortet – ikke to gange */
.login-logo { display: block; width: 56px; height: 56px; margin: 0 0 var(--rum-5); }
.login-ordmaerke { display: block; width: 175px; height: 48px; margin: 0 0 var(--rum-5); }
.login-kort h1 { margin-bottom: var(--rum-5); }
.login-kort .knap.stor { margin-top: var(--rum-2); }

/* 5.11 Kundens side (ingen navigation, mobil først) */
body.kunde-side { background: var(--bg); }
.kunde-demo { font-size: var(--str-xs); text-align: center; padding: .4rem var(--rum-2); background: var(--demo); color: var(--demo-tekst); letter-spacing: .02em; }
.kunde-indre { max-width: 720px; margin: 0 auto; padding: var(--rum-5) var(--rum-4) calc(var(--rum-7) + env(safe-area-inset-bottom)); }
.kunde-firma { display: flex; gap: var(--rum-3); align-items: center; margin: var(--rum-1) 0 var(--rum-5); }
.kunde-firma img { max-height: 44px; max-width: 140px; }
.kunde-firma strong { display: block; color: var(--tekst); font-size: var(--str-l); }
.kunde-firma span { display: block; color: var(--tekst-2); font-size: var(--str-xs); }
.kunde-firma span.ingen-brud, .ingen-brud { display: inline; white-space: nowrap; }  /* tlf. og mail brydes aldrig midt i */
.kunde-kort { background: var(--flade); border: 1px solid var(--kant); border-radius: var(--hjoerne-l); padding: var(--rum-5); box-shadow: var(--skygge-1); margin-bottom: var(--rum-4); }
.kunde-kort h2 { margin-top: var(--rum-6); color: var(--tekst); }
.kunde-meta { color: var(--tekst-2); font-size: var(--str-s); margin: 0; }
.kunde-titel { margin: var(--rum-1) 0 var(--rum-2); }
.kunde-til { margin: 0 0 var(--rum-4); color: var(--tekst-2); }
.kunde-pris { display: flex; flex-direction: column; gap: .1rem; margin: 0 0 var(--rum-4); padding: var(--rum-4) var(--rum-5);
  background: var(--accent-flade); border-radius: var(--hjoerne-m); color: var(--accent-moerk); }
.kunde-pris span { font-size: var(--str-s); font-weight: var(--vaegt-medium); }
.kunde-pris strong { font-size: var(--str-tal); font-weight: var(--vaegt-fed); color: var(--tekst); letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.kunde-pris small { color: var(--accent-moerk); font-size: var(--str-s); }
.kunde-tekst { white-space: pre-line; }
.kunde-linjer { list-style: none; margin: 0; padding: 0; }
.kunde-linjer li { display: flex; justify-content: space-between; gap: var(--rum-4); padding: var(--rum-3) 0; border-bottom: 1px solid var(--kant); }
.kunde-linjer small { display: block; }
.linje-beloeb { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--vaegt-medium); }
.kunde-totaler { margin-top: var(--rum-5); }
.kunde-punkter { padding-left: 1.1rem; margin: 0; }
.kunde-punkter li { margin-bottom: var(--rum-1); }
.kunde-accept { border: 2px solid var(--vundet); }
.kunde-accept h2 { margin-top: 0; color: var(--vundet); font-size: var(--str-xl); }
.kunde-accept .felt { display: block; margin: var(--rum-3) 0; }
.kunde-kvittering { background: var(--vundet-flade); color: var(--vundet); border: 1px solid var(--vundet-kant); border-radius: var(--hjoerne-l);
  padding: var(--rum-5); margin-bottom: var(--rum-4); }
.kunde-kvittering h1 { margin: 0 0 var(--rum-2); font-size: var(--str-xl); }
.kunde-kvittering p { margin: var(--rum-1) 0; color: var(--tekst); }
.kunde-udloebet { border: 2px solid var(--mangler-kant); background: #fffafa; }
.kunde-udloebet h2 { margin-top: 0; color: var(--mangler); }
.kunde-spoerg > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--rum-2); min-height: 44px; }
.kunde-spoerg > summary::-webkit-details-marker { display: none; }
.kunde-spoerg > summary h2 { margin: 0; font-size: var(--str-m); }
.kunde-spoerg > summary::after { content: "▾"; color: var(--accent); margin-left: auto; transition: transform .15s; }
.kunde-spoerg:not([open]) > summary::after { transform: rotate(-90deg); }
.kunde-spoerg .felt { display: block; margin: var(--rum-3) 0; }
.kunde-spoerg .flash { margin-top: var(--rum-3); }
.mine-beskeder { list-style: none; padding: 0; margin: var(--rum-3) 0 0; }
.mine-beskeder li { padding: var(--rum-2) var(--rum-3); background: var(--flade-2); border-radius: var(--hjoerne-s); margin-bottom: var(--rum-2); }
.mine-beskeder small { display: block; color: var(--tekst-2); }
.kunde-nej { text-align: center; margin: var(--rum-1) 0 var(--rum-6); font-size: var(--str-s); }
/* Et lille link (accept er den store knap), men trykfladen er 44 px høj */
.kunde-nej a { position: relative; display: inline-block; padding: .1rem var(--rum-2); color: var(--tekst-2); }
.kunde-nej a::after { content: ""; position: absolute; inset: -11px -8px; }
.kunde-nej-form .felt { display: block; margin: var(--rum-3) 0; }
.spoergsmaal-tekst { color: var(--accent); }

/* ---------- Større skærme ---------- */
@media (min-width: 720px) {
  h1 { font-size: 2.125rem; }
  .side { padding-top: var(--rum-7); }
  .kort { padding: var(--rum-6); }
  .noegletal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tal-kort { padding: var(--rum-4) var(--rum-5); justify-content: flex-end; }
  .tal-kort .tal { font-size: var(--str-xxl); }
  .tilbudsliste, .henv-liste, .miljoe-liste { grid-template-columns: repeat(2, 1fr); }
  .tom { grid-column: 1 / -1; }
  .gitter-2 { grid-template-columns: 1fr 1fr; }
  .gitter-3 { grid-template-columns: 1fr 1.4fr 1fr; }
  .kolonne-valg { grid-template-columns: repeat(4, 1fr); }
  .raekke { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 90px 90px 140px;
    grid-template-areas: "antagelse antagelse antagelse antagelse antagelse" "vare beskr antal enhed beloeb" "vare bemaerk bemaerk bemaerk bemaerk" "pris pris pris pris pris" "note note note note fjern"; align-items: end; }
  .raekke.mangler .pris-blok, .raekke.mester .pris-blok { grid-template-columns: 180px 180px 1fr; align-items: end; }
  .pris-blok .gem-i-prisliste { grid-column: auto; margin-bottom: var(--rum-2); }
  .raekke.arbejde { grid-template-columns: 1fr 120px 90px; grid-template-areas: "beskr antal fjern"; }
  .raekke .beloeb { text-align: right; }
  .raekke .fjern { align-self: center; justify-content: flex-end; }
  .kunde-indre { padding-top: var(--rum-7); }
  .kunde-kort { padding: var(--rum-7) var(--rum-7); }
  .kunde-totaler { max-width: 360px; margin-left: auto; }
  .kunde-accept .knap.stor { width: auto; min-width: 280px; }
  .login-kort { margin-top: var(--rum-8); }
}
@media (min-width: 1000px) {
  .tilbud-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--rum-5); align-items: start; }
  .tilbud-side { position: sticky; top: 96px; }
  .mini-total { display: none; }
  .pdf-visning iframe { display: block; }
  .side { padding-bottom: var(--rum-7); }
}