/* KK Klar — layout efter mockups: navy sidemenu, hvide kort, statuspiller. */
:root {
  --navy: #0d2a4d;
  --navy-2: #163a66;
  --navy-moerk: #091e38;
  --accent: #ff5f1e;             /* overskrives pr. kunde */
  --roed: #e53935;  --roed-lys: #fde3e2;
  --gul: #f2a516;   --gul-lys: #fff1d1;
  --blaa: #4f7fb8;  --blaa-lys: #e3edfb;
  --groen: #1a9b4f; --groen-lys: #d9f2e3;
  --graa: #9aa5b1;  --graa-lys: #eef1f5;
  --tekst: #10243d;
  --svag: #5b6b7d;
  --kant: #dfe4eb;
  --flade: #fff;
  --baggrund: #f3f5f8;
  --radius: 12px;
  --skygge: 0 1px 2px rgba(16, 36, 61, .06), 0 2px 10px rgba(16, 36, 61, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 15px;
  color: var(--tekst); background: var(--baggrund); -webkit-font-smoothing: antialiased;
}
a { color: var(--navy-2); }
h1 { font-size: 1.55rem; margin: .1rem 0 .25rem; line-height: 1.2; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
h2.inline { display: inline; }
button, input, select, textarea { font: inherit; color: inherit; }
.ikon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.svag { color: var(--svag); }
.smaa { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.mt { margin-top: .8rem; } .mb { margin-bottom: .8rem; }
.roed-tekst { color: var(--roed); } .gul-tekst { color: #b67900; } .blaa-tekst { color: var(--blaa); } .groen-tekst { color: var(--groen); }
[hidden] { display: none !important; }

/* ---------- ramme ---------- */
.ramme { display: flex; min-height: 100dvh; }
.sidemenu {
  width: 236px; flex: none; background: var(--navy); color: #fff; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh; padding: 18px 12px;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 4px 8px 22px; }
.brand-mark { width: 30px; height: 30px; }
.brand-mark.stor { width: 46px; height: 46px; }
.brand-navn { font-size: 1.35rem; letter-spacing: .01em; font-weight: 400; }
.brand-navn b { font-weight: 700; }
.brand-navn.moerk { color: var(--navy); font-size: 1.6rem; }
.sidemenu nav { display: flex; flex-direction: column; gap: 2px; }
.sidemenu nav a, .sidemenu .mig, .sidemenu .link-knap {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #c9d5e5;
  text-decoration: none; font-size: .95rem; background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.sidemenu nav a:hover, .sidemenu .mig:hover, .sidemenu .link-knap:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidemenu nav a.aktiv, .sidemenu .mig.aktiv { background: var(--navy-2); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.sidemenu-bund { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.mig span { display: flex; flex-direction: column; line-height: 1.2; }
.mig small { color: #8fa3bd; font-size: .75rem; }
.drevet { font-size: .7rem; color: #8fa3bd; padding: 14px 12px 0; display: flex; align-items: center; gap: 8px; }
.drevet img { height: 11px; }
.hoved { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 56px; background: var(--flade); border-bottom: 1px solid var(--kant); display: flex; align-items: center;
  gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 20;
}
.topbar-kunde { flex: 1; display: flex; align-items: center; min-width: 0; }
.kunde-logo { max-height: 34px; max-width: 180px; object-fit: contain; }
.kunde-navn { font-weight: 700; font-size: 1.05rem; color: var(--navy); border-left: 4px solid var(--accent); padding-left: 10px; }
.topbar-hoejre { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--svag); font-size: .9rem; }
.topbar-rolle, .topbar-bruger { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.menu-knap { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--navy); }
.menu-knap .ikon { width: 24px; height: 24px; }
.ramme-lev .topbar { background: var(--navy); color: #fff; border: 0; }
.ramme-lev .topbar-hoejre, .ramme-lev .topbar-bruger { color: #dbe5f1; }
.ramme-lev .topbar-kunde { justify-content: center; }
.ramme-lev .kunde-logo { background: #fff; border-radius: 6px; padding: 3px 6px; }
.ramme-lev .kunde-navn { color: #fff; }
.brand-top { padding: 0; }
.brand-top .brand-navn { font-size: 1.15rem; }
.brand-top .brand-mark { width: 26px; height: 26px; }
.support-bjaelke { background: #fff6cc; border-bottom: 1px solid #f0d97a; padding: 8px 20px; font-size: .9rem; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.indhold { padding: 22px 26px 60px; max-width: 1280px; width: 100%; }
.ramme-lev .indhold { max-width: 760px; margin: 0 auto; padding: 18px 14px 60px; }
.slør { display: none; }

/* ---------- elementer ---------- */
.sidehoved { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.broedkrumme { font-size: .85rem; color: var(--svag); }
.broedkrumme a { color: var(--svag); text-decoration: none; }
.broedkrumme a:hover { text-decoration: underline; }
.tilbage { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; color: var(--svag); text-decoration: none; }
.meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.kort { background: var(--flade); border-radius: var(--radius); box-shadow: var(--skygge); padding: 18px 20px; margin-bottom: 16px; }
.kort.smal, .smal { max-width: 640px; }
.kort-hoved { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kort-hoved h2 { margin: 0; }
.tabel-kort { padding: 16px 0 6px; }
.tabel-kort > h2, .tabel-kort > p, .tabel-kort > .kort-hoved, .tabel-kort > details, .tabel-kort > .knap { margin-left: 20px; margin-right: 20px; }
.tabel-kort > details { margin-bottom: 14px; }
.gitter-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gitter-2 > .kort { margin-bottom: 0; }
.gitter-2 { margin-bottom: 16px; }
.gitter-punkt { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tom-tilstand { text-align: center; padding: 40px 20px; }

.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--kant); background: var(--flade); color: var(--tekst); text-decoration: none; cursor: pointer;
  font-weight: 600; font-size: .92rem; line-height: 1.2; white-space: nowrap;
}
.knap:hover { border-color: #b9c3cf; }
.knap-primaer { background: var(--navy); border-color: var(--navy); color: #fff; }
.knap-primaer:hover { background: var(--navy-2); }
.knap-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.knap-accent:hover { filter: brightness(.94); border-color: var(--accent); }
.knap-groen { background: var(--groen); border-color: var(--groen); color: #fff; }
.knap-gul { background: var(--gul); border-color: var(--gul); color: #fff; }
.knap-blaa { background: var(--blaa-lys); border-color: transparent; color: var(--navy); margin-top: 12px; }
.knap-fare { background: var(--roed); border-color: var(--roed); color: #fff; }
.knap-fare-omrids { color: var(--roed); border-color: #f2b8b6; }
.knap-lille { padding: 5px 10px; font-size: .82rem; }
.knap-bred { width: 100%; padding: 13px 16px; font-size: 1rem; }
.knap[disabled] { opacity: .6; cursor: default; }
.knap-raekke { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.knap-raekke form { margin: 0; }
.link-knap { background: none; border: 0; padding: 4px 0; color: var(--navy-2); cursor: pointer; text-decoration: underline; font-size: .9rem; }
.link-knap.lys { color: #dbe5f1; }
.ikon-knap { background: none; border: 1px solid transparent; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; color: var(--svag); font-size: 1rem; }
.ikon-knap:hover { border-color: var(--kant); color: var(--tekst); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

.pille { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.pille-roed { background: var(--roed-lys); color: #b3261e; }
.pille-gul { background: var(--gul-lys); color: #8a5a00; }
.pille-blaa { background: var(--blaa-lys); color: #2c5590; }
.pille-groen { background: var(--groen-lys); color: #11753a; }
.pille-graa { background: var(--graa-lys); color: var(--svag); }
.prio-hoej { background: var(--roed); color: #fff; }
.prio-mellem { background: var(--gul); color: #fff; }
.prio-lav { background: var(--groen-lys); color: #11753a; }
.projekt-aktiv { background: var(--groen-lys); color: #11753a; }
.projekt-afsluttet { background: var(--graa-lys); color: var(--svag); }
.projekt-arkiveret { background: var(--graa-lys); color: var(--graa); }
.prik { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--graa); }
.prik.roed { background: var(--roed); } .prik.gul { background: var(--gul); } .prik.blaa { background: var(--blaa); } .prik.groen { background: var(--groen); }
.farveprik { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }

.flash { background: var(--groen-lys); color: #0f5e2f; border-radius: 10px; padding: 11px 40px 11px 14px; margin-bottom: 16px; position: relative; word-break: break-word; }
.flash-fejl { background: var(--roed-lys); color: #8d1f1a; }
.flash button { position: absolute; right: 8px; top: 6px; background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: inherit; }
.info-kort { background: var(--graa-lys); }
.info-kort.blaa { background: var(--blaa-lys); color: #2c5590; }
.info-kort.groen { background: var(--groen-lys); color: #11753a; }
.afvisning { background: var(--roed-lys); border-left: 4px solid var(--roed); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.afvisning p { margin: 4px 0 0; white-space: pre-line; }

/* faner */
.faner { display: flex; gap: 2px; border-bottom: 1px solid var(--kant); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.faner a { padding: 10px 14px; text-decoration: none; color: var(--svag); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
.faner a.aktiv { color: var(--navy); border-bottom-color: var(--accent); font-weight: 600; }
.faner a:hover { color: var(--navy); }
.faner .fane-hoejre { margin-left: auto; }
.faner-smaa a { padding: 7px 12px; font-size: .9rem; }
.faner .filter-knap { margin-left: auto; }
.faner .filter-knap.aktiv { border-bottom-color: var(--navy); }

/* tabeller */
.tabel { width: 100%; border-collapse: collapse; }
.tabel th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--svag); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--kant); }
.tabel td { padding: 11px 12px; border-bottom: 1px solid var(--graa-lys); vertical-align: middle; }
.tabel th:first-child, .tabel td:first-child { padding-left: 20px; }
.tabel th:last-child, .tabel td:last-child { padding-right: 20px; }
.kort:not(.tabel-kort) .tabel td:first-child, .kort:not(.tabel-kort) .tabel th:first-child { padding-left: 0; }
.kort:not(.tabel-kort) .tabel td:last-child, .kort:not(.tabel-kort) .tabel th:last-child { padding-right: 0; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .tal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel a { text-decoration: none; color: var(--tekst); }
.tabel a:hover { text-decoration: underline; }
.tabel.kompakt td { padding-top: 8px; padding-bottom: 8px; }
.tabel-klik tbody tr { cursor: pointer; }
.tabel-klik tbody tr:hover { background: #f8fafc; }
tr.inaktiv td { opacity: .55; }
.handlinger { text-align: right; white-space: nowrap; }
.handlinger form { display: inline; }

/* statusbjælke og fremdrift */
.statusbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--graa-lys); gap: 2px; }
.seg-roed { background: var(--roed); } .seg-gul { background: var(--gul); } .seg-blaa { background: var(--blaa); } .seg-groen { background: var(--groen); } .seg-tom { background: var(--graa-lys); }
.fremdrift { flex: 1; height: 8px; background: var(--graa-lys); border-radius: 6px; overflow: hidden; min-width: 60px; }
.fremdrift span { display: block; height: 100%; background: var(--groen); border-radius: 6px; }
.fremdrift-raekke { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.fremdrift-raekke > span:last-child, .fremdrift-raekke > b { min-width: 3em; text-align: right; }
.fremdrift-stor { display: flex; flex-direction: column; gap: 8px; }
.fremdrift-stor .fremdrift { height: 12px; }
.forklaring { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--svag); margin-top: 10px; }
.forklaring .prik { margin-right: -8px; width: 8px; height: 8px; }

/* fliser */
.fliser { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.flise { background: var(--flade); border-radius: var(--radius); box-shadow: var(--skygge); padding: 14px; display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--tekst); border: 2px solid transparent; }
.flise:hover { border-color: var(--kant); }
.flise small { display: block; color: var(--svag); font-size: .78rem; }
.flise b { font-size: 1.6rem; line-height: 1.1; margin-right: 6px; }
.flise em { font-style: normal; font-size: .78rem; color: var(--svag); }
.flise-ikon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; background: var(--graa); font-size: .95rem; }
.flise-ikon.roed { background: var(--roed); } .flise-ikon.gul { background: var(--gul); } .flise-ikon.blaa { background: var(--blaa); } .flise-ikon.groen { background: var(--groen); } .flise-ikon.graa { background: #c4ccd6; }
.flise-alarm { border-color: var(--roed-lys); }

/* aktivitet */
.aktivitet { list-style: none; margin: 0 0 8px; padding: 0; }
.aktivitet li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--graa-lys); }
.aktivitet li:last-child { border-bottom: 0; }
.aktivitet .prik { margin-top: 5px; }
.aktivitet li > div { flex: 1; min-width: 0; }
.aktivitet a { color: var(--tekst); text-decoration: none; }
.aktivitet time { white-space: nowrap; }
.liste { margin: 0; padding-left: 18px; }
.liste li { padding: 4px 0; }
.tidslinje { list-style: none; padding: 0; margin: 0; font-size: .88rem; }
.tidslinje li { padding: 6px 0 6px 14px; border-left: 2px solid var(--kant); }
.tidslinje time { display: block; }

/* formularer */
.formular { display: flex; flex-direction: column; gap: 14px; }
.formular label, .inline-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .88rem; }
.formular label small { font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=search], input:not([type]), select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--kant); border-radius: 8px; background: #fff; font-size: 16px; font-weight: 400;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type=color] { width: 100%; height: 42px; padding: 2px; border: 1px solid var(--kant); border-radius: 8px; background: #fff; }
.felt-raekke { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.afkryds { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500 !important; cursor: pointer; }
.afkryds input { width: 18px; height: 18px; }
.boks { border: 1px solid var(--kant); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.boks legend { font-weight: 600; font-size: .88rem; padding: 0 4px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form input, .inline-form select { width: auto; min-width: 200px; }
.omdoeb input { border-color: transparent; background: transparent; padding: 6px 8px; margin-left: -8px; font-weight: 600; }
.omdoeb input:hover { border-color: var(--kant); }
.klistret { position: sticky; bottom: 0; background: #fff; padding: 10px 0; margin-bottom: -10px; }
.klistret .knap { flex: 1; }

/* filtre og punktliste */
.filtre { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; }
.filtre input[type=search] { flex: 2 1 220px; width: auto; }
.filtre select { flex: 1 1 150px; width: auto; }
.massehandling { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 4px 12px; }
.massehandling select { width: auto; min-width: 220px; }
.punktliste, .opgaveliste { display: flex; flex-direction: column; gap: 8px; }
.punkt-raekke { display: flex; align-items: center; gap: 10px; }
.punkt-raekke > input { width: 20px; height: 20px; flex: none; }
.punkt-link, .opgave {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; background: var(--flade); border-radius: var(--radius);
  box-shadow: var(--skygge); padding: 10px 14px 10px 10px; text-decoration: none; color: var(--tekst); border: 2px solid transparent;
}
.punkt-link:hover, .opgave:hover { border-color: var(--kant); }
.miniature { width: 64px; height: 52px; border-radius: 8px; background: var(--graa-lys); flex: none; overflow: hidden; display: grid; place-items: center; color: var(--graa); }
.miniature.stor { width: 84px; height: 66px; }
.miniature img { width: 100%; height: 100%; object-fit: cover; }
.punkt-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.punkt-tekst b { overflow: hidden; text-overflow: ellipsis; }
.punkt-status { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.opgave > .ikon { color: var(--graa); }
h2.gruppe { margin: 14px 0 2px; font-size: .95rem; }

/* punkt */
.fakta { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: .92rem; }
.fakta dt { color: var(--svag); }
.fakta dd { margin: 0; }
.beskrivelse { white-space: pre-line; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--graa-lys); }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.foto { display: block; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--graa-lys); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.handling-kort.fremhaevet { border: 2px solid var(--blaa); }
.noter { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.note { background: var(--graa-lys); border-radius: 10px; padding: 8px 12px; }
.note > div:last-child { white-space: pre-line; }
.note-afvisning { background: var(--roed-lys); }
.note-klar { background: var(--blaa-lys); }
.note-godkendelse { background: var(--groen-lys); }
.note-genaabning { background: var(--gul-lys); }
.note-form { display: flex; gap: 8px; align-items: flex-end; }
.note-form textarea { flex: 1; }
.inline-upload { margin-top: 4px; }

/* foto-vælger */
.foto-vaelger { display: flex; gap: 8px; flex-wrap: wrap; }
.foto-forhaand { display: contents; }
.foto-forhaand figure { position: relative; margin: 0; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: var(--graa-lys); }
.foto-forhaand img { width: 100%; height: 100%; object-fit: cover; }
.foto-forhaand button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(9,30,56,.75); color: #fff; cursor: pointer; line-height: 1; }
.foto-tilfoej {
  width: 104px; height: 104px; border: 2px dashed #c4ccd6; border-radius: 10px; display: flex !important; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px !important; color: var(--svag); cursor: pointer; text-align: center; font-size: .75rem !important; font-weight: 500 !important; padding: 6px;
}
.foto-tilfoej:hover { border-color: var(--accent); color: var(--accent); }
.foto-tilfoej .ikon { width: 26px; height: 26px; }
.foto-tilfoej input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-status { font-size: .88rem; color: var(--svag); }

/* menu i tabeller */
details.menu { position: relative; display: inline-block; text-align: left; }
.menu-indhold { position: absolute; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--kant); border-radius: 10px; box-shadow: 0 8px 24px rgba(16,36,61,.14); padding: 12px; z-index: 10; width: 240px; display: flex; flex-direction: column; gap: 6px; }

/* login */
.login-side { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
.login-ramme { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login-kort { background: #fff; border-radius: 16px; padding: 30px 28px; width: 100%; max-width: 400px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.login-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 26px; }
.login-links { text-align: center; font-size: .88rem; margin: 18px 0 0; }
.login-fod { margin-top: 26px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: .75rem; color: var(--svag); }
.login-fod img { height: 13px; }

.kvittering { text-align: center; margin: 30px auto; }
.stor-flueben { width: 76px; height: 76px; border-radius: 50%; background: var(--groen); color: #fff; display: grid; place-items: center; margin: 10px auto 16px; }
.stor-flueben .ikon { width: 40px; height: 40px; stroke-width: 3; }
.logo-forhaand { display: flex; align-items: center; gap: 14px; }
.logo-forhaand img { max-height: 50px; max-width: 200px; background: var(--graa-lys); padding: 6px; border-radius: 6px; }
.vis-mobil { display: none; }

/* ---------- mobil ---------- */
@media (max-width: 1100px) {
  .fliser { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .sidemenu { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .menu-aaben .sidemenu { transform: none; }
  .menu-aaben .slør { display: block; position: fixed; inset: 0; background: rgba(9,30,56,.45); z-index: 40; }
  .menu-knap { display: block; }
  .indhold { padding: 16px 14px 60px; }
  .topbar { padding: 0 12px; }
  .gitter-2, .gitter-punkt { grid-template-columns: 1fr; }
  .gitter-2 > .kort { margin-bottom: 0; }
  .skjul-mobil { display: none; }
  .vis-mobil { display: block; }
  .topbar-rolle { display: none; }
  .tabel th:first-child, .tabel td:first-child { padding-left: 14px; }
  .tabel th:last-child, .tabel td:last-child { padding-right: 14px; }
  .tabel-kort > h2, .tabel-kort > p, .tabel-kort > .kort-hoved, .tabel-kort > details, .tabel-kort > .knap { margin-left: 14px; margin-right: 14px; }
  .faner .fane-hoejre { margin-left: 0; }
  .ramme-lev .topbar-bruger span { display: none; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.3rem; }
  .fliser { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .flise { padding: 10px; gap: 8px; }
  .flise-ikon { width: 30px; height: 30px; }
  .felt-raekke { grid-template-columns: 1fr; }
  .kort { padding: 14px; }
  .tabel-kort { padding: 12px 0 4px; }
  .punkt-link, .opgave { gap: 10px; padding: 8px 10px 8px 8px; }
  .miniature { width: 52px; height: 46px; }
  .miniature.stor { width: 64px; height: 56px; }
  .punkt-status { flex-direction: column; align-items: flex-end; }
  .inline-form input, .inline-form select { min-width: 0; flex: 1; }
  .massehandling select { min-width: 0; flex: 1; }
  .sidehoved .knap-accent { width: 100%; }
  .ramme-lev .topbar-kunde { display: none; }
}

/* ---------- markér på foto ---------- */
.annoter-aaben { overflow: hidden; }
.annoter {
  position: fixed; inset: 0; z-index: 100; background: linear-gradient(180deg, #163a66, #0d2a4d);
  color: #fff; display: flex; flex-direction: column; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
}
.annoter-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; max-width: 900px; width: 100%; margin: 0 auto; }
.annoter-top small { color: #9fb3cc; font-weight: 600; }
.annoter-top h2 { margin: 2px 0 0; font-size: 1.45rem; line-height: 1.15; }
.annoter svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.annoter-luk { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.annoter-flade { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.annoter-flade canvas { max-width: 100%; max-height: 100%; border-radius: 14px; touch-action: none; background: #000; box-shadow: 0 8px 30px rgba(0,0,0,.35); cursor: crosshair; }
.annoter-farver { align-self: center; display: flex; gap: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.annoter-farver button { width: 30px; height: 30px; border-radius: 50%; background: var(--f); border: 2px solid rgba(255,255,255,.25); cursor: pointer; outline-offset: 3px; }
.annoter-farver button.aktiv { outline: 3px solid #f2c14e; }
.annoter-vaerktoej { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 640px; width: 100%; margin: 0 auto; }
.annoter-vaerktoej button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: .85rem;
}
.annoter-vaerktoej button.aktiv { color: #f2c14e; border-color: #f2c14e; background: rgba(242,193,78,.14); }
.annoter-vaerktoej button:disabled { opacity: .4; cursor: default; }
.annoter-ok {
  max-width: 640px; width: 100%; margin: 0 auto; padding: 15px; border-radius: 999px; cursor: pointer; font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(242,193,78,.18); color: #f2c14e; border: 1.5px solid #f2c14e;
}
.annoter-ok:disabled { opacity: .6; }
.foto-forhaand img { cursor: pointer; }
.foto-boks { position: relative; }
.foto-marker {
  position: absolute; right: 6px; bottom: 6px; border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer;
  background: rgba(9,30,56,.82); color: #f2c14e; font-weight: 700; font-size: .78rem;
}
.foto-boks .markeret, .foto-forhaand .markeret { position: absolute; left: 4px; top: 4px; background: rgba(9,30,56,.8); color: #f2c14e; font-size: .68rem; font-weight: 700; padding: 2px 6px; border-radius: 6px; }

/* ---------- sprogvælger ---------- */
.sprogvaelger { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 14px; font-size: .8rem; }
.sprogvaelger a { color: var(--svag); text-decoration: none; padding: 2px 4px; border-radius: 4px; }
.sprogvaelger a.aktiv { color: var(--navy); font-weight: 700; background: var(--graa-lys); }

/* ---------- maskinoversat brugertekst ---------- */
details.original { margin: 2px 0 6px; font-size: .78rem; color: var(--svag); }
details.original summary { cursor: pointer; display: inline; text-decoration: underline dotted; }
details.original > div { margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--kant); white-space: pre-line; color: var(--tekst); font-size: .88rem; }
.rolle-form select { width: auto; min-width: 150px; padding: 6px 10px; font-size: .9rem; }
.kodefelt { font-size: 1.6rem !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.login-links form, form.login-links { display: block; }
details.kartotek { margin: 0 20px 16px; }
.kartotek-liste { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--kant); border-radius: 10px; max-width: 560px; }
.kartotek-liste .knap { align-self: flex-start; margin-top: 4px; }

/* ---------- plantegninger ---------- */
.plan-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.plan-kort { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--tekst); padding: 12px; margin: 0; }
.plan-miniature { display: block; aspect-ratio: 4 / 3; background: var(--graa-lys); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.plan-miniature img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.plan-vaerktoej { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.plan-vaerktoej .forklaring { margin: 0; }
.plan-flade { padding: 8px; overflow: auto; max-height: 78vh; -webkit-overflow-scrolling: touch; }
.plan-ramme { position: relative; width: 100%; margin: 0 auto; background: #fff; cursor: crosshair; user-select: none; }
.plan-ramme[data-mode=""] { cursor: default; }
.plan-ramme img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.naal {
  position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 700 12px/1 system-ui, sans-serif; text-decoration: none;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(9,30,56,.45); z-index: 2; background: var(--graa);
}
.naal-roed { background: var(--roed); } .naal-gul { background: var(--gul); } .naal-blaa { background: var(--blaa); } .naal-groen { background: var(--groen); }
.naal-valgt { outline: 3px solid var(--navy); outline-offset: 2px; }
.naal-ny { background: var(--navy); font-size: 16px; animation: puls 1.2s ease-in-out infinite; z-index: 3; }
@keyframes puls { 50% { box-shadow: 0 0 0 8px rgba(13,42,77,.18); } }
.plan-handling { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(to top, var(--baggrund) 70%, transparent); z-index: 5; }
.plan-lille { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--kant); }
.plan-lille img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- søg-og-vælg underleverandør ---------- */
.firmasoeg { position: relative; margin: 0 20px 16px; max-width: 620px; }
.formular .firmasoeg { margin: 0; max-width: none; }
.soeg-label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; }
.firmasoeg input[type=search] { padding: 12px 14px; font-size: 16px; }
.forslagsliste {
  position: absolute; left: 0; right: 0; z-index: 30; list-style: none; margin: 4px 0 0; padding: 6px;
  background: #fff; border: 1px solid var(--kant); border-radius: 12px; box-shadow: 0 12px 32px rgba(16,36,61,.16);
  max-height: 360px; overflow: auto;
}
.forslag-hoved { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--svag); padding: 6px 10px 4px; }
.forslag { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px;
  cursor: pointer; text-align: left; text-decoration: none; color: var(--tekst); }
.forslag:hover, .forslag.aktiv { background: var(--graa-lys); }
.forslag-ikon { width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.forslag-ny .forslag-ikon { background: var(--accent); }
.forslag-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.forslag-tekst small { color: var(--svag); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forslag-handling { font-size: .8rem; font-weight: 700; color: var(--accent); white-space: nowrap; }