:root{
  --ink:#1A2230; --mut:#5A7086; --mut2:#6B8098; --mut3:#7A8FA5;
  --blaa:#005AA0; --blaa-lys:#1476C0; --blaa-mork:#004A85;
  --gron:#00734D; --gul:#B0761D; --rod:#E31E2B; --rod-mork:#C4121F; --graa:#93A5B5;
  --glas:rgba(255,255,255,.62); --glaskant:rgba(255,255,255,.88);
  --kort-bg:rgba(255,255,255,.64); --kort-kant:rgba(255,255,255,.85);
  --felt:rgba(255,255,255,.74); --feltkant:rgba(255,255,255,.92);
  --advar-bg:rgba(255,238,206,.62); --advar-fg:#7A5410;
  --sky:0 3px 12px rgba(8,28,50,.07), inset 0 1px 0 rgba(255,255,255,.92);
  --sky-hoej:0 8px 24px rgba(8,28,50,.14), inset 0 1px 0 rgba(255,255,255,.9);
  --blur:blur(22px) saturate(180%);
  --arkh:58vh;
}
*{box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%; overflow:hidden}
body{
  color:var(--ink); font-family:Figtree,system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
  background:linear-gradient(168deg,#E4EDF5 0%,#CFE0EE 34%,#B4CFE6 66%,#9CBEDC 100%);
  background-attachment:fixed;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blaa); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}

/* ---------- kort ---------- */
#kort{position:fixed; inset:0 0 auto 0; height:64vh; overflow:hidden}

/* ---------- flydende glas ---------- */
.toprk{position:fixed; inset:calc(env(safe-area-inset-top) + 12px) 14px auto 14px; z-index:6; display:flex; gap:9px; align-items:center}
.soegepille{
  flex:1 1 auto; display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.52); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.72); border-radius:999px; padding:11px 16px;
  box-shadow:var(--sky-hoej);
}
.soegepille .maerke{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--blaa); font-weight:700}
.soegepille input{flex:1; min-width:0; border:0; background:none; outline:none; font-size:14.5px; font-weight:500}
.rolle{
  flex:0 0 auto; background:rgba(26,34,48,.66); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  color:#F3F7FB; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:12px 8px;
  font-size:12.5px; font-weight:600; max-width:38vw; box-shadow:0 8px 24px rgba(8,28,50,.2);
}
.netrk{position:fixed; inset:calc(env(safe-area-inset-top) + 66px) 14px auto 14px; z-index:6; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.netknap{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.6);
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  color:#26405C; border:1px solid rgba(255,255,255,.8); border-radius:999px; padding:9px 14px;
  font-size:12.5px; font-weight:600; box-shadow:0 6px 18px rgba(8,28,50,.12), inset 0 1px 0 rgba(255,255,255,.85);
}
.netknap i{width:9px; height:9px; border-radius:50%; background:var(--gron); box-shadow:0 0 0 3px rgba(0,115,77,.2)}
.netknap.off{background:rgba(255,238,206,.72); color:var(--advar-fg); border-color:rgba(255,255,255,.8)}
.netknap.off i{background:var(--gul); box-shadow:0 0 0 3px rgba(176,118,29,.22)}
.banner{
  background:var(--advar-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.78); color:var(--advar-fg); border-radius:16px; padding:11px 14px;
  font-size:12.5px; font-weight:500; max-width:300px; text-wrap:pretty;
  box-shadow:0 8px 22px rgba(8,28,50,.14), inset 0 1px 0 rgba(255,255,255,.75);
}
.flyd{position:fixed; right:14px; bottom:calc(var(--arkh) + 14px); z-index:6; display:flex; flex-direction:column; gap:9px; align-items:flex-end}
.korttal{
  background:rgba(255,255,255,.52); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.72); border-radius:14px; padding:9px 13px; font-size:12px; font-weight:600;
  color:#26405C; box-shadow:0 6px 18px rgba(8,28,50,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.fab{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,rgba(20,118,192,.96),rgba(0,90,160,.96));
  color:#F4F9FD; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:15px 22px;
  font-weight:600; font-size:15.5px; box-shadow:0 12px 30px rgba(0,90,160,.42), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- ark ---------- */
#ark{
  position:fixed; inset:auto 0 0 0; height:var(--arkh); z-index:8;
  background:var(--glas); backdrop-filter:blur(34px) saturate(190%); -webkit-backdrop-filter:blur(34px) saturate(190%);
  border-top:1px solid var(--glaskant); border-radius:30px 30px 0 0;
  box-shadow:0 -14px 44px rgba(8,28,50,.24), inset 0 1px 0 rgba(255,255,255,.92);
  display:flex; flex-direction:column; overflow:hidden;
}
#greb{flex:0 0 auto; padding:9px 0 4px; display:flex; justify-content:center}
#greb span{width:46px; height:5px; border-radius:3px; background:rgba(38,64,92,.28)}
#faner{flex:0 0 auto; display:flex; gap:6px; padding:7px 14px 8px; overflow-x:auto; scrollbar-width:none}
#faner::-webkit-scrollbar{display:none}
.fane{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; border:1px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.6); color:#26405C; border-radius:999px; padding:9px 15px; font-size:13.5px; font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.fane.on{background:linear-gradient(180deg,rgba(20,118,192,.96),rgba(0,90,160,.96)); color:#F4F9FD;
  border-color:rgba(255,255,255,.38); box-shadow:0 8px 20px rgba(0,90,160,.28), inset 0 1px 0 rgba(255,255,255,.45)}
.fane b{font-size:12px; font-weight:700; color:var(--gul)}
.fane.on b{color:#EAF4FB}
#arkkrop{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 14px calc(env(safe-area-inset-bottom) + 26px)}

/* ---------- indhold ---------- */
h1{font-size:20px; font-weight:700; letter-spacing:-.3px; margin:0}
h2{font-size:15.5px; font-weight:700; margin:0 0 8px}
.hdr{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:2px}
.hdr .tal{font-size:12.5px; font-weight:600; color:var(--mut)}
.sub{margin:0 0 12px; font-size:13px; color:var(--mut); text-wrap:pretty}
.mrk{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut2); font-weight:700; margin:18px 0 7px}
.note{font-size:12.5px; color:var(--mut3); text-wrap:pretty; margin-top:8px}
.krav{font-size:12.5px; color:var(--rod-mork); font-weight:600; margin-top:8px}
.tilbage{color:var(--blaa); font-weight:600; font-size:13.5px; padding:0}

.kort{background:var(--kort-bg); border:1px solid var(--kort-kant); border-radius:18px; padding:13px 14px; margin-bottom:9px; box-shadow:var(--sky)}
button.kort{display:block; width:100%}
.rk-top{display:flex; justify-content:space-between; gap:10px; align-items:center}
.rk-navn{display:flex; align-items:center; gap:10px; min-width:0}
.rk-navn b{font-weight:600; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prik{width:10px; height:10px; border-radius:50%; flex:0 0 auto}
.brok{font-size:14px; font-weight:600; color:#2E4A66; white-space:nowrap}
.rk-bund{display:flex; align-items:center; gap:10px; margin-top:10px}
.spor{flex:1; height:5px; background:rgba(38,64,92,.12); border-radius:3px; overflow:hidden}
.spor i{display:block; height:100%; border-radius:3px}
.rk-ekstra{font-size:12px; color:var(--mut); white-space:nowrap}
.rk-meta{font-size:12.5px; color:var(--mut); margin-top:4px}

.maerkat{border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; color:#fff; display:inline-block}
.liste{background:var(--kort-bg); border:1px solid var(--kort-kant); border-radius:18px; overflow:hidden; box-shadow:var(--sky)}
.liste .kv{display:flex; justify-content:space-between; gap:14px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.7)}
.liste .kv:last-child{border-bottom:0}
.kv .k{font-size:13.5px; color:var(--mut)}
.kv .v{font-size:13.5px; font-weight:500; text-align:right; text-wrap:pretty}
.kv .v small{display:block; font-weight:400; color:var(--mut3); font-size:11.5px}

.tom{background:rgba(255,255,255,.42); border:1px dashed rgba(38,64,92,.25); border-radius:20px; padding:26px; text-align:center; font-size:13.5px; color:var(--mut); text-wrap:pretty}
.advar{background:var(--advar-bg); border:1px solid rgba(255,255,255,.78); color:var(--advar-fg); border-radius:16px; padding:12px 14px; font-size:13px; text-wrap:pretty; box-shadow:inset 0 1px 0 rgba(255,255,255,.85); margin-top:10px}
.advar b{display:block; margin-bottom:2px}

.knap{display:block; width:100%; text-align:center; padding:14px; border-radius:16px; font-weight:600; font-size:15px; margin-top:11px}
.knap.primaer{background:linear-gradient(180deg,rgba(20,118,192,.96),rgba(0,90,160,.96)); color:#F4F9FD;
  border:1px solid rgba(255,255,255,.38); box-shadow:0 10px 24px rgba(0,90,160,.34), inset 0 1px 0 rgba(255,255,255,.5)}
.knap.flad{background:var(--felt); border:1px solid var(--feltkant); box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.knap.rod{background:linear-gradient(180deg,rgba(227,30,43,.95),rgba(184,20,32,.95)); color:#fff; border:1px solid rgba(255,255,255,.34); box-shadow:0 8px 20px rgba(184,20,32,.28)}
.knap.rod-let{background:rgba(255,255,255,.72); color:var(--rod-mork); border:1px solid rgba(227,30,43,.32)}
.knap.moerk{background:rgba(26,34,48,.92); color:#F3F7FB; border:1px solid rgba(255,255,255,.18)}
.knap.lille{display:inline-block; width:auto; padding:10px 15px; font-size:13.5px; margin-right:8px}
.knap:disabled{opacity:.45}
.par{display:flex; gap:9px; margin-top:12px}
.par .knap{flex:1; margin-top:0}

.felt{margin-top:11px}
.felt input[type=text],.felt input[type=number],.felt input[type=date],.felt input[type=email],.felt input[type=password],.felt textarea,.felt select,.soeg{
  width:100%; padding:13px 14px; border:1px solid var(--feltkant); border-radius:16px; background:var(--felt);
  font-size:14.5px; font-weight:500; outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
}
.felt textarea{min-height:66px; resize:vertical}
.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{border:1px solid var(--feltkant); background:rgba(255,255,255,.68); border-radius:999px; padding:10px 15px;
  font-size:13.5px; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.chip span{color:var(--mut3); font-size:12px; font-weight:500}
.chip.on{background:linear-gradient(180deg,rgba(20,118,192,.96),rgba(0,90,160,.96)); color:#F4F9FD; border-color:rgba(255,255,255,.38)}
.chip.stiplet{border:1px dashed rgba(0,90,160,.55); background:rgba(190,217,238,.45); color:var(--blaa-mork)}
.chip.problem.on{background:linear-gradient(180deg,rgba(200,136,34,.96),rgba(176,118,29,.96))}
.valgt{display:flex; justify-content:space-between; align-items:center; gap:10px; border:1.5px solid rgba(0,90,160,.5);
  background:rgba(190,217,238,.5); border-radius:16px; padding:13px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.82)}
.valgt b{font-weight:600; font-size:14.5px}
.valgt button{color:var(--blaa); font-weight:600; font-size:13px}
.forslag{display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid rgba(0,115,77,.35);
  background:rgba(203,232,220,.5); border-radius:16px; padding:13px 14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.82)}
.forslag b{font-weight:600; font-size:14.5px; display:block}
.forslag small{color:var(--mut); font-size:12px}
.forslag button{color:var(--blaa); font-weight:600; font-size:13px; white-space:nowrap}

.gpsboks{display:flex; align-items:center; gap:10px; margin-top:11px; padding:13px 14px; border:1px solid var(--feltkant);
  background:var(--felt); border-radius:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.88)}
.gpsboks.ok{border-color:rgba(0,115,77,.4); background:rgba(203,232,220,.42)}
.gpsboks.daarlig{border-color:rgba(176,118,29,.4); background:rgba(255,238,206,.5)}
.gpsboks .acc{font-size:21px; font-weight:700; letter-spacing:-.3px}
.gpsboks .ko{font-size:12px; color:var(--mut); margin-top:2px}

.fotork{display:flex; gap:9px; align-items:stretch; flex-wrap:wrap}
.foto{position:relative; flex:0 0 auto; width:86px; height:86px; border-radius:18px; border:1px solid rgba(255,255,255,.88);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.62) 0 7px,rgba(206,224,238,.62) 7px 14px);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px;
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; color:var(--mut2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
.foto.hist{opacity:.55}
.foto .x{position:absolute; top:-7px; right:-7px; width:26px; height:26px; border-radius:50%; background:rgba(26,34,48,.9);
  color:#F3F7FB; border:2px solid rgba(255,255,255,.92); font-size:13px; line-height:1; text-align:center}
.fotoknap{flex:0 0 auto; width:86px; height:86px; border-radius:18px; border:1px dashed rgba(0,90,160,.55);
  background:rgba(190,217,238,.45); color:var(--blaa-mork); font-size:12.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:6px}
.fotobred{width:100%; height:96px; flex:1 1 100%}

.tael{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:4px}
.tael button, .tael div{background:var(--kort-bg); border:1px solid var(--kort-kant); border-radius:18px; padding:13px 14px; box-shadow:var(--sky)}
.tael b{display:block; font-size:26px; font-weight:700; letter-spacing:-.5px; line-height:1.1}
.tael span{font-size:12.5px; color:var(--mut); text-wrap:pretty}
.tael .gul b{color:var(--gul)} .tael .rod b{color:var(--rod-mork)} .tael .blaa b{color:var(--blaa)}

.tidslinje{margin-top:4px}
.tidslinje div{display:flex; gap:10px; padding:7px 0}
.tidslinje .pk{flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#B7C4C6; margin-top:6px}
.tidslinje b{display:block; font-size:13.5px; font-weight:500}
.tidslinje small{display:block; font-size:12px; color:var(--mut3)}
.tidslinje em{display:block; font-size:12.5px; color:var(--mut); font-style:normal; text-wrap:pretty}

a.lnk{color:var(--blaa); font-weight:600; font-size:14px; text-decoration:none; display:inline-block; margin:12px 14px 0 0}
.linkrk{display:block; width:100%; color:var(--blaa); font-weight:600; font-size:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.7)}
.linkrk:last-child{border-bottom:0}
.besked{border-top:1px solid rgba(255,255,255,.7); padding:10px 0; font-size:14px}
.besked small{display:block; color:var(--mut3); font-size:12px; margin-top:3px}
.besked .fil{display:inline-block; border:1px solid var(--feltkant); background:rgba(255,255,255,.6);
  border-radius:8px; padding:2px 8px; font-size:12px; color:var(--mut); margin-top:5px}
.skriv{display:flex; gap:8px; margin-top:11px}
.skriv input{flex:1; padding:12px 14px; border:1px solid var(--feltkant); border-radius:14px; background:var(--felt); outline:none}
.skriv button{background:linear-gradient(180deg,rgba(20,118,192,.96),rgba(0,90,160,.96)); color:#F4F9FD;
  border-radius:14px; padding:0 18px; font-weight:600; border:1px solid rgba(255,255,255,.38)}
.naeste{border:1px solid rgba(0,90,160,.35); background:rgba(190,217,238,.45); border-radius:20px; padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85); margin-bottom:11px}
.naeste.taet{border-color:rgba(0,115,77,.45); background:rgba(203,232,220,.55)}
.naeste .afst{font-size:22px; font-weight:700; letter-spacing:-.4px}
.csv{width:100%; min-height:150px; font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;
  border:1px solid var(--feltkant); border-radius:16px; padding:12px; background:var(--felt); margin-top:11px}


#toast{position:fixed; left:50%; transform:translateX(-50%); top:calc(env(safe-area-inset-top) + 70px); z-index:30;
  background:rgba(26,34,48,.86); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:#F3F7FB;
  border:1px solid rgba(255,255,255,.18); padding:12px 20px; border-radius:999px; font-size:14px; font-weight:600;
  max-width:88vw; text-align:center; display:none; box-shadow:0 12px 30px rgba(8,28,50,.34)}

/* ---------- rigtigt kort (Leaflet) ---------- */
#kort .leaflet-container{width:100%; height:100%; background:#DCE6EE; font-family:inherit}
#kort .leaflet-control-attribution{font-size:10px; background:rgba(255,255,255,.6)}
#kort .leaflet-control-zoom{display:none}
.vejm{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.86); border:2.5px solid var(--blaa); color:#26405C; font:700 12px/1 Figtree,sans-serif;
  box-shadow:0 4px 12px rgba(8,28,50,.18)}
.vejm.igang{border-color:var(--gul)} .vejm.naeste{box-shadow:0 0 0 5px rgba(0,90,160,.22), 0 4px 12px rgba(8,28,50,.18)}
.posm{width:18px; height:18px; border-radius:50%; background:#1476C0; border:3px solid #fff; box-shadow:0 0 0 6px rgba(20,118,192,.25)}
.nym{width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--blaa); box-shadow:0 0 0 3px rgba(0,90,160,.3)}

/* ---------- login ---------- */
.login{padding:6px 0 10px}
.login h1{font-size:22px; margin-bottom:4px}
.login .felt input{font-size:17px}

/* ---------- fotos (rigtige) ---------- */
.foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:17px}
.foto.har{background:#D7E3EC; overflow:visible}
.foto .tag{position:absolute; left:6px; bottom:5px; background:rgba(26,34,48,.72); color:#F3F7FB; border-radius:999px; padding:2px 8px;
  font-size:10px; letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.fotostor{width:100%; height:220px; border-radius:18px; object-fit:cover; display:block; margin-top:12px; border:1px solid rgba(255,255,255,.88)}
.fotoknap input{display:none}
.rk-mini{width:44px; height:44px; border-radius:12px; object-fit:cover; flex:0 0 auto; background:#D7E3EC}

/* ---------- kø og fejl ---------- */
.fejlboks{background:rgba(255,224,224,.62); border:1px solid rgba(227,30,43,.35); color:#8A1620; border-radius:16px; padding:11px 14px; font-size:13px; margin-top:8px}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid rgba(38,64,92,.25); border-top-color:var(--blaa); border-radius:50%; animation:drej .8s linear infinite; vertical-align:-2px; margin-right:6px}
@keyframes drej{to{transform:rotate(360deg)}}
.notif{border-left:3px solid var(--blaa); padding:8px 12px; margin-bottom:8px; background:var(--kort-bg); border-radius:0 14px 14px 0; font-size:13.5px}
.notif.problem,.notif.eskaleret,.notif.konflikt{border-left-color:var(--rod)}
.notif.godkendelse,.notif.sletning{border-left-color:var(--gul)}
.notif small{display:block; color:var(--mut3); font-size:11.5px}
.gpsboks .acc.daarlig{color:var(--gul)}
.kompas{font-size:12px; color:var(--mut3)}
@media (min-width: 700px){ #ark{left:50%; transform:translateX(-50%); width:620px; border-radius:30px 30px 0 0} .flyd{right:calc(50% - 300px)} .toprk{left:calc(50% - 300px); right:calc(50% - 300px)} .netrk{left:calc(50% - 300px)} }