/* =========================================================
   Billeddokumentation – udseende

   Retningen er værktøj, ikke hjemmeside.

   Der er ikke længere kort der svæver på en grå flade. Grupperne
   går helt ud til kanten med hårfine streger imellem, sådan som
   indstillinger og andre arbejdsapps ser ud på en telefon. Det
   giver plads til indholdet i stedet for til luft omkring kasser,
   og man kan overskue flere felter uden at rulle.

   Hjørnerne er næsten rette (4 px). Runde hjørner og bløde grå
   kasser er det der får en formular til at ligne en skabelon.

   Topbjælken er mørkeblå og fyldt. Den giver appen et ansigt og
   adskiller den fra selve arbejdsfladen, som er hvid.

   Felterne har hverken ramme eller baggrund. En række er label +
   det man har skrevet, adskilt fra næste række af en streg. Det
   er tættere, hurtigere at skimme og ligner et skema man udfylder
   frem for en samling input-bokse.
   ========================================================= */
:root{
  --ink:#15191d;          /* brødtekst */
  --ink-2:#5b636b;        /* sekundær tekst */
  --ink-3:#8c949c;        /* labels og hjælpetekst */

  --linje:#e3e6e9;        /* streg mellem rækker */
  --linje-2:#ccd1d6;      /* kant på noget der kan trykkes */

  --flade:#ffffff;        /* grupperne */
  --bund:#eef0f2;         /* mellemrummet mellem grupper */
  --tryk:#f2f4f6;         /* nedtrykt flade */

  --brand:#14304d;        /* topbjælke og hovedhandling */
  --brand-2:#1d4470;      /* lysere blå: links og fokus */
  --brand-svag:#e8eef5;

  --groen:#186b46;
  --rav:#8a5a10;
  --roed:#993027;

  --r:4px;                /* næsten rette hjørner */
  --raek:52px;            /* højde på en felt-række */
  --pad:16px;             /* vandret luft inde i en gruppe */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bund);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}

.ic{
  width:19px;height:19px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Telefonramme (kun på store skærme) ---------- */
.device{min-height:100%;display:flex;flex-direction:column}
.device-frame{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.device-notch{display:none}
.device-screen{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--bund);position:relative}
.device-note{display:none}

@media (min-width:900px){
  body{background:#d9dde1;display:flex;align-items:center;justify-content:center;padding:26px 0}
  .device{min-height:auto;align-items:center;gap:14px}
  .device-frame{
    width:398px;height:846px;max-height:calc(100vh - 92px);
    background:#0c0f13;border-radius:44px;padding:10px;flex:0 0 auto;
    box-shadow:0 20px 44px rgba(12,18,24,.26);
  }
  .device-notch{
    display:block;position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:120px;height:24px;background:#0c0f13;border-radius:0 0 14px 14px;z-index:60;
  }
  .device-screen{border-radius:35px;overflow:hidden}
  .device-note{display:block;margin:0;color:#7c848c;font-size:11.5px}
}

/* ---------- Topbjælke ---------- */
.appbar{
  background:var(--brand);color:#fff;flex:0 0 auto;z-index:20;
  padding:calc(13px + env(safe-area-inset-top, 0px)) var(--pad) 13px;
}
.appbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.appbar-titel{min-width:0}
.appbar h1{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.appbar p{
  margin:2px 0 0;font-size:12.5px;color:rgba(255,255,255,.62);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ikonknap{
  background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;
  width:36px;height:36px;margin-right:-9px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.ikonknap:active{background:rgba(255,255,255,.14);color:#fff}
.ikonknap.lys{color:rgba(255,255,255,.85)}
.ikonknap.lys:active{background:rgba(255,255,255,.14);color:#fff}

/* ---------- Grupper ---------- */
/* Går helt ud til kanten. Mellemrummet mellem to grupper er den grå
   bund der kigger igennem – ikke en margen omkring en kasse. */
#view{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 0 14px;
}
.kort,.sektion{
  background:var(--flade);
  border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);
  padding:0 var(--pad) 16px;margin:0 0 12px;
}

/* Gruppens navn. Små versaler adskiller det fra felternes labels,
   som er almindelig skrift. Stregen under lukker hovedet af. */
.kort-titel{
  font-size:11.5px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;
  color:var(--ink-2);
  margin:0 calc(var(--pad) * -1) 4px;padding:14px var(--pad) 12px;
  border-bottom:1px solid var(--linje);
}
.note{margin:10px 0 2px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.note.advarsel{color:var(--rav)}
.valgfri{color:var(--ink-3);font-weight:400}

/* ---------- Felter ---------- */
/* En række, ikke en boks: label ovenover i småt, værdien under, og en
   streg ned til næste række. Stregen går ud til gruppens kant. */
.felt{
  position:relative;padding:9px 0 10px;
  border-bottom:1px solid var(--linje);
}
.felt::after{
  content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);
  bottom:-1px;height:1px;background:var(--linje);
}
.felt:last-child,.felt:last-child::after{border-bottom:0;background:none}
.felt label{
  display:block;font-size:12px;font-weight:500;
  color:var(--ink-3);margin-bottom:1px;
}
.felt input,.felt select,.felt textarea{
  width:100%;padding:0;height:28px;border:0;border-radius:0;
  background:none;outline:none;font-size:16px;letter-spacing:-.005em;
}
.felt textarea{height:auto;min-height:66px;padding:4px 0 0;resize:vertical;line-height:1.5;font-size:15.5px}
.felt select{
  appearance:none;-webkit-appearance:none;padding-right:26px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c949c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:17px;
}
/* Fokus markeres ved at rækkens egen streg bliver blå og tykkere. Der er
   ingen boks at lægge en ring om, og en baggrund der tændes ville flytte
   rækken en anelse. Stregen ligger allerede der og koster ingen plads. */
.felt:focus-within label{color:var(--brand-2)}
.felt:focus-within::after{height:2px;background:var(--brand-2)}
.felt input::placeholder,.felt textarea::placeholder{color:#a9b0b7}

/* To korte felter side om side deler rækken, med en lodret streg imellem */
.felt-par{display:grid;grid-template-columns:1fr 1fr}
.felt-par .felt:first-child{padding-right:var(--pad);border-right:1px solid var(--linje)}
.felt-par .felt:last-child{padding-left:var(--pad);border-bottom:1px solid var(--linje)}
.felt-par .felt:last-child::after{background:var(--linje)}
.felt-par .felt:first-child::after{right:0}
.felt-par .felt:last-child::after{left:0}

.felt.tilfoej{display:flex;gap:10px;align-items:center}
.felt.tilfoej input{flex:1;min-width:0;height:38px}
.felt.tilfoej .knap{flex:0 0 auto;min-height:38px;padding:0 14px}
.linkknap{
  background:none;border:0;color:var(--brand-2);font-size:12.5px;font-weight:500;
  padding:5px 0 0;cursor:pointer;text-align:left;
}
.linkknap:active{color:var(--brand)}

/* ---------- Kontakt (til/fra) ---------- */
.kontakt-raekke{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;position:relative;
  border-bottom:1px solid var(--linje);
}
.kontakt-raekke::after{
  content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);
  bottom:-1px;height:1px;background:var(--linje);
}
.kontakt-raekke:last-child,.kontakt-raekke:last-child::after{border-bottom:0;background:none}
.kontakt-tekst{font-size:15px}
.kontakt{position:relative;display:inline-block;width:44px;height:26px;flex:0 0 auto}
.kontakt input{opacity:0;width:0;height:0}
.spor{position:absolute;inset:0;background:#c9ced3;border-radius:99px;transition:background .15s;cursor:pointer}
.spor::before{
  content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.kontakt input:checked + .spor{background:var(--brand-2)}
.kontakt input:checked + .spor::before{transform:translateX(18px)}
.kontakt-felt{padding-top:9px}

/* ---------- Knapper ---------- */
/* Rette hjørner, fyldt blå til hovedhandlingen, hvid med kant til resten.
   Knapper står aldrig som en flad grå kasse – så ligner de et felt. */
.knap{
  appearance:none;border:1px solid var(--linje-2);background:#fff;color:var(--ink);
  min-height:44px;padding:0 15px;border-radius:var(--r);font-size:14.5px;font-weight:600;
  letter-spacing:-.005em;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;
  transition:background .1s,border-color .1s;
}
.knap .ic{width:17px;height:17px;color:var(--ink-2)}
.knap:active{background:var(--tryk);border-color:#b8bec4}
.knap-primaer{background:var(--brand);border-color:var(--brand);color:#fff}
.knap-primaer .ic{color:rgba(255,255,255,.7)}
.knap-primaer:active{background:#0d2238;border-color:#0d2238}
.knap-stor{width:100%;min-height:50px;font-size:15.5px}
.knap.fare{color:var(--roed)}
.knap:disabled{opacity:.4;cursor:not-allowed}
.knap-raekke{display:flex;gap:10px;padding-top:14px}
.knap-raekke .knap{flex:1;padding:0 8px}
.knap-kolonne{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.knap-kolonne .knap{justify-content:flex-start}

/* ---------- Facade ---------- */
/* Intet billede = ingenting. Kun de to knapper står tilbage. */
.facade{position:relative;margin-top:14px}
.facade img{width:100%;height:200px;object-fit:cover;border-radius:var(--r);display:block;background:var(--tryk)}
.slet-knap{
  position:absolute;top:8px;right:8px;background:rgba(10,14,18,.6);color:#fff;border:0;
  width:30px;height:30px;border-radius:var(--r);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.slet-knap .ic{width:14px;height:14px;stroke-width:2.2}

/* ---------- Tal-række ---------- */
.tal-raekke{display:flex;padding-top:14px}
.tal{flex:1;padding:0 12px;border-left:1px solid var(--linje)}
.tal:first-child{padding-left:0;border-left:0}
.tal b{display:block;font-size:23px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.tal span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}

/* ---------- Billedsektioner ---------- */
.sektion{padding-top:0}
.sektion-hoved{
  display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;
  padding:13px 0;
}
.sektion-hoved .navn{font-size:15.5px;font-weight:600;letter-spacing:-.012em}
.sektion-hoved .under{font-size:12px;color:var(--ink-3);margin-top:1px}
.sektion-hoved .antal{
  margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-2);
  background:var(--tryk);border-radius:99px;padding:2px 9px;min-width:26px;text-align:center;
}
.sektion-hoved .vip{color:var(--ink-3);transition:transform .16s;display:flex}
.sektion-hoved .vip .ic{width:18px;height:18px}
.sektion.lukket .vip{transform:rotate(-90deg)}
.sektion.lukket .sektion-krop{display:none}
.sektion.lukket{padding-bottom:0}
.sektion-krop{padding-top:2px;border-top:1px solid var(--linje);margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad)}
.sektion-knapper{display:flex;gap:10px;padding:14px 0}
.sektion-knapper .knap{flex:1;padding:0 6px;font-size:14px}

/* Miniaturerne står tæt som en filmstrimmel. Ingen ramme – motivet er
   kanten. minmax(0,1fr) i stedet for 1fr: et gitterfelt har ellers en
   mindstebredde svarende til sit indhold, og et bredt foto ville sprænge
   spalten og give vandret overløb på telefonen. */
.gitter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
.miniature{min-width:0}
.miniature .ramme{position:relative;aspect-ratio:4/3;background:var(--tryk);border-radius:var(--r);overflow:hidden}
.miniature img{width:100%;height:100%;object-fit:cover;display:block}
.miniature .nr{
  position:absolute;left:0;top:0;color:#fff;font-size:11px;font-weight:700;
  padding:5px 8px;text-shadow:0 1px 4px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.6);
}
.miniature .slet{
  position:absolute;right:5px;top:5px;background:rgba(10,14,18,.55);color:#fff;border:0;
  width:24px;height:24px;border-radius:var(--r);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.miniature .slet .ic{width:12px;height:12px;stroke-width:2.4}
.miniature .navnelinje{display:flex;align-items:center;margin-top:3px}
.miniature .navnelinje input{
  flex:1;min-width:0;border:0;background:none;font-size:12.5px;color:var(--ink-2);
  padding:4px 2px;outline:none;text-align:center;border-radius:3px;
}
.miniature .navnelinje input:focus{background:var(--brand-svag);color:var(--ink)}
.miniature .flyt{
  background:none;border:0;width:22px;height:28px;cursor:pointer;color:#bcc2c8;
  display:flex;align-items:center;justify-content:center;
}
.miniature .flyt .ic{width:14px;height:14px}
.miniature .flyt:active{color:var(--ink)}
.tom-note{color:var(--ink-3);font-size:12.5px;padding:2px 0 10px}

/* ---------- Modtagere ---------- */
.modtagere{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 4px}
.modtager{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linje-2);
  background:#fff;border-radius:var(--r);padding:7px 8px 7px 11px;font-size:13px;
  cursor:pointer;max-width:100%;color:var(--ink-2);font-weight:500;
}
.modtager .adr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modtager.til{background:var(--brand);border-color:var(--brand);color:#fff}
.modtager .x{
  background:none;border:0;color:inherit;opacity:.55;cursor:pointer;padding:0;
  display:flex;align-items:center;flex:0 0 auto;
}
.modtager .x .ic{width:12px;height:12px;stroke-width:2.4}
.modtager .x:active{opacity:1}

/* ---------- Tjekliste ---------- */
.tjek-punkt{
  display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;
  border-bottom:1px solid var(--linje);color:var(--ink-3);
}
.tjek-punkt:first-child{margin-top:14px;border-top:1px solid var(--linje)}
.tjek-punkt:last-child{border-bottom:0}
.tjek-punkt .ic{width:16px;height:16px}
.tjek-punkt.ok{color:var(--ink-2)}
.tjek-punkt.ok .ic{color:var(--groen)}
.tjek-punkt.mangler .ic{color:#c3c8ce}

/* ---------- Resultat ---------- */
.resultat{margin-top:14px;padding:13px 14px;border-radius:var(--r);font-size:13.5px;line-height:1.55}
.resultat-ok{background:#eef6f1;color:#124d35;border-left:3px solid var(--groen)}
.resultat-fejl{background:#fbf1f0;color:#7a2820;border-left:3px solid var(--roed)}
.resultat a{color:inherit;font-weight:700;display:inline-block;margin-top:4px;word-break:break-all}

/* ---------- Flere muligheder ---------- */
.mere{margin:14px calc(var(--pad) * -1) 0;border-top:1px solid var(--linje);padding:0 var(--pad)}
.mere summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--brand-2);
  list-style:none;padding:13px 0;display:flex;align-items:center;gap:8px;
}
.mere summary::-webkit-details-marker{display:none}
.mere summary::before{
  content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .16s;
}
.mere[open] summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
.mere-krop{padding:0 0 4px;border-top:1px solid var(--linje)}

/* ---------- Handlingslinje ---------- */
.handlingslinje{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;background:#fff;
  border-top:1px solid var(--linje-2);padding:9px var(--pad) calc(11px + var(--safe-b));z-index:20;
}
.hl-info{flex:1;min-width:0;line-height:1.3}
.hl-info b{display:block;font-size:14px;font-weight:600}
.hl-info span{display:block;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handlingslinje .knap{flex:0 0 auto;padding:0 20px}
.bundplads{height:2px}

/* Fremhævning når man hopper til et afsnit */
@keyframes fremhaev{0%,100%{background:var(--flade)}25%,65%{background:var(--brand-svag)}}
.fremhaev{animation:fremhaev 1.4s ease}

/* ---------- Billedvisning ---------- */
.visning{position:fixed;inset:0;background:#0a0c0e;z-index:100;display:flex;flex-direction:column}
.visning-top{display:flex;align-items:center;gap:12px;padding:14px;color:#fff;font-size:13.5px}
.visning-top span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.8)}
.visning-billede{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:6px}
.visning-billede img{max-width:100%;max-height:100%;object-fit:contain}
.visning-bund{display:flex;gap:8px;padding:14px;padding-bottom:calc(14px + var(--safe-b))}
.visning-bund .knap{flex:1;padding:0 4px;font-size:12.5px;gap:5px}
.knap.moerk{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.knap.moerk .ic{color:rgba(255,255,255,.7)}
.knap.moerk:active{background:rgba(255,255,255,.18)}
.knap.moerk.fare{color:#f2a79e}

/* ---------- Ark (menu / bekræftelse) ---------- */
.ark{position:fixed;inset:0;background:rgba(10,16,22,.45);z-index:110;display:flex;align-items:flex-end}
.ark-krop{
  background:#fff;width:100%;border-radius:12px 12px 0 0;
  padding:0 0 calc(10px + var(--safe-b));animation:op .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes op{from{transform:translateY(24px)}to{transform:none}}
.ark-titel{
  font-size:11.5px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-2);
  padding:16px var(--pad) 12px;border-bottom:1px solid var(--linje);
}
.ark-sum{padding:14px var(--pad);font-size:13.5px;color:var(--ink-2);line-height:1.75}
.ark-sum b{color:var(--ink);font-weight:600}
.ark-sum .mangler{color:var(--rav);display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.ark-punkt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;
  padding:15px var(--pad);font-size:15px;cursor:pointer;color:var(--ink);
  border-bottom:1px solid var(--linje);
}
.ark-punkt .ic{color:var(--ink-3)}
.ark-punkt:active{background:var(--tryk)}
.ark-knapper{display:flex;gap:10px;padding:12px var(--pad) 4px}
.ark-knapper .knap{flex:1}

@media (min-width:900px){
  .visning,.ark,.overlay{position:absolute;border-radius:35px}
}

/* ---------- Overlay ---------- */
.overlay{position:fixed;inset:0;background:rgba(12,18,24,.55);z-index:120;display:flex;align-items:center;justify-content:center;padding:26px}
.overlay-boks{background:#fff;border-radius:var(--r);padding:20px;width:100%;max-width:290px}
.overlay-tekst{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.overlay-under{font-size:12px;color:var(--ink-3);margin-top:9px;min-height:16px}
.bjaelke{height:3px;background:var(--tryk);border-radius:99px;overflow:hidden;margin-top:13px}
.bjaelke-fyld{height:100%;width:0;background:var(--brand-2);transition:width .18s;border-radius:99px}

/* ---------- Besked ---------- */
.besked{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%);
  background:#15191d;color:#fff;padding:11px 16px;border-radius:var(--r);font-size:13px;
  z-index:130;max-width:84%;text-align:center;
}
@media (min-width:900px){.besked{position:absolute}}

/* ---------------------------------------------------------
   Tilpasninger til telefonrammen. Skal stå sidst i filen:
   reglerne har samme specificitet som dem de overskriver,
   så det er rækkefølgen der afgør hvilken der vinder.
   --------------------------------------------------------- */
@media (min-width:900px){
  .appbar{padding-top:36px}            /* fri af rammens indhak */
  .handlingslinje{padding-bottom:24px} /* fri af rammens runde hjørner */
}