/* ============================================================================
   boligwatch — webappens stylesheet
   ============================================================================
   GENERERET. Ret ikke i denne fil.

   Kilden er docs/mockups/mockup-system.css, og alt mellem @kun-mockup-
   sentinellerne er klippet væk: tilstandsvælgeren og før/efter-knappen hører
   til tegnestuen, ikke til produktet.

   Byg igen efter en ændring i mockup'en:
       python scripts/build_web_css.py
   ========================================================================= */

/* ============================================================================
   boligwatch — delt designsystem for mockups
   ============================================================================
   DESIGN.md fastlægger: DNA ("annonce"-layout, redaktionelt boligkatalog),
   paletten Mos & Lyng, Fraunces + Public Sans, ukendt-princippet, mobile-first
   og ingen røde fejlfarver i feedet. Det herunder er resten — det som
   design-skillen har mandat til: nuancer, spacing, skygger, radius, motion,
   empty states og desktop-skalering.

   ⚠️ MOCKUP. Ingen app, ingen backend. Tilstands-vælgeren øverst på siderne er
   et mockup-værktøj og forsvinder når skærmene bygges rigtigt.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root{
  /* --- FASTLAGT i DESIGN.md — må ikke ændres uden Magnus' ja ---
     Papir og kort er lysnet ad to omgange 2026-08-11 efter Magnus' beslutning:
     fladerne var for grønne. Anden runde tager skridtet helt ud — papiret er
     nu varm hvid og kortene rene hvide. Mosgrøn og lyng er urørte gennem
     begge runder: identiteten skal ligge dér hvor den er stærkest (knapper,
     badges, accenter), ikke som en hinde over hele skærmen. Paradokset er
     at den står STÆRKERE nu — et mosgrønt badge har mere at spille op imod
     på hvidt end på grønt. DESIGN.md er rettet tilsvarende. */
  --papir:#fbfbf7;        /* #eef0e9 -> #f6f7f1 -> nu */
  --kort:#ffffff;         /* #fbfcf8 -> #fdfefb -> nu */
  --blaek:#2c332b;
  --mos:#5a6e52;          /* primær / handling */
  --lyng:#9d6b8a;         /* KUN ukendt-markeringer */

  /* --- Udledt (design-skillens mandat) ---
     Lyng er fastlagt til #9d6b8a, men på sin egen lyse tint giver den kun
     ~3,5:1 — for lidt til småtekst. Så: den fastlagte tone bærer kanter,
     prikker og streger, og en dybere udgave bærer teksten. Begge er lyng;
     ukendt-markeringen ser ud som besluttet og kan stadig læses. */
  --lyng-dyb:#7a4f6b;     /* ~5,6:1 på --lyng-tint — til tekst */
  --lyng-tint:#f2e7ef;
  --lyng-kant:#e3cdda;

  --mos-dyb:#3d4c37;      /* overskrifter, tal der skal stå fast */
  /* Tinten er BEVIDST ikke lysnet med fladen. Badges og chips er identitet,
     og på et hvidere papir har de mere at spille op imod — lysner man dem
     med, forsvinder mosgrønt ud af skærmen sammen med baggrunden. */
  --mos-tint:#e5eadb;     /* badges og chips */
  --mos-vask:#f0f4e8;     /* let felt-baggrund med grønt anstrøg */
  --mos-kant:#c9d3bd;

  /* Papir og kort ligger nu 4-8 trin fra hinanden. Fladen kan ikke længere
     adskille dem, så kanten og skyggen bærer det alene — samme greb som et
     trykt katalog. Begge er derfor skruet op, ikke ned, i takt med lysningen. */
  --indfattet:#f2f4eb;    /* felter INDE i et kort (input, adresser, tomme lister) */

  /* Kortets zoner. Kun mos-familien og neutral. Lyng er optaget af
     ukendt-princippet, og en femte kulør ville gøre kortet til et diagram
     i stedet for et kort. */
  --zone-taet:#b5c6a6;    /* tæt på grænsen — mellemtone */
  --zone-ude:#e9ece2;     /* udenfor */
  --zone-ukendt:#eef0e8;  /* før beregning */
  --kommune-streg:#b3bda6;/* kommunegrænse — en tak kraftigere end cellernes */
  --vand:#f4f6f0;

  --blaek-blid:#6f7a6d;   /* sekundær tekst */
  --blaek-svag:#98a196;   /* labels, hjælpetekst */
  --linje:#dce1d2;        /* kortkanter og kontroller */
  --linje-blid:#eaeee2;   /* skillelinjer inde i et kort */

  /* Skygger er varme — kølig grå ville skubbe paletten mod dashboard.
     To lag: en kort, tæt skygge der giver kanten vægt, og en lang, blød der
     løfter kortet fri af papiret. Uden dem ville hvidt på hvidt flade ud. */
  --skygge-1:0 1px 2px rgba(44,51,43,.07), 0 3px 12px rgba(44,51,43,.055);
  --skygge-2:0 2px 5px rgba(44,51,43,.07), 0 10px 28px rgba(44,51,43,.08);
  --skygge-loeft:0 4px 8px rgba(44,51,43,.07), 0 16px 40px rgba(44,51,43,.11);

  /* 4px-grid. Feedet er en læseoplevelse, så luften er generøs. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  --r-lille:8px; --r-kontrol:11px; --r-kort:16px; --r-pille:999px;

  --spalte:560px;         /* læsebredde — feedet forbliver én spalte */
  --lynhurtig:.14s; --hurtig:.22s; --rolig:.4s;
  --kurve:cubic-bezier(.22,.68,.32,1);
}

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

html{-webkit-text-size-adjust:100%}

body{
  font-family:'Public Sans',system-ui,sans-serif;
  background:var(--papir);
  color:var(--blaek);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
}

/* Atmosfære: en varm lysning foroven + et fint kornlag. Papir, ikke skærm.
   Begge er rene CSS/SVG — ingen billedfiler at holde styr på.
   Den grønne lysning er trukket ned to gange sammen med papiret. På en
   næsten hvid flade er selv et par procent nok til at bringe det grønne
   skær tilbage — det var præcis det Magnus reagerede på. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(90,110,82,.028), transparent 64%),
    radial-gradient(80% 40% at 100% 0%, rgba(157,107,138,.02), transparent 55%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.36;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

.ramme{position:relative;z-index:1;max-width:var(--spalte);margin:0 auto;
  padding-bottom:var(--s9)}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--mos);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------------ typografi */
.display,h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-variation-settings:'opsz' 40;
  letter-spacing:-.012em;
  line-height:1.18;
  color:var(--mos-dyb);
}
.tal{font-variant-numeric:tabular-nums}

/* Redaktionel etiket — små versaler over et afsnit. */
.etiket{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--blaek-svag);
}

/* ---------------------------------------------------------------- header */
.top{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s7) var(--s5) 0;
}
.top .navn{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:26px;
  font-variation-settings:'opsz' 96;color:var(--mos-dyb);letter-spacing:-.02em}
.top .navn .prik{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--mos);margin-left:3px;vertical-align:middle}
.top .link{font-size:13.5px;font-weight:600;color:var(--mos);
  padding:var(--s2) 0;border-bottom:1.5px solid transparent;transition:border-color var(--hurtig)}
.top .link:hover{border-color:var(--mos-kant)}

.manchet{
  padding:var(--s3) var(--s5) var(--s4);
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:17px;line-height:1.45;color:var(--blaek-blid);
  font-variation-settings:'opsz' 24;
}

/* Tilbage-pil på undersider */
.tilbage{display:inline-flex;align-items:center;gap:var(--s2);
  font-size:13.5px;font-weight:600;color:var(--mos);padding:var(--s2) 0}
.tilbage svg{width:15px;height:15px}

/* -------------------------------------------------------- filterresumé
   To runder: først nedtonet fra fyldt bjælke til ren tekstlinje (den
   konkurrerede med boligkortene), derefter — 2026-08-12, Magnus — sat op
   som chips igen. Teksten sagde ikke hvad den var; en række chips gør.

   Balancen ligger i chippens flade, ikke i dens form: let mos-vask og en
   hårstreg, ingen skygge, 11,5px. Den låner formsproget fra postnummer-
   chipsene på indstillinger, så man genkender dem når man klikker derind,
   men i en tonet-ned udgave. Kortene er stadig heltene.

   Ikonet er en blyant, ikke en pil. En pil lover "videre i et flow";
   klikket her fører til en redigeringsskærm, og det er noget andet.

   Etiket, chips og blyant ligger i ÉT ombrydningsflow — ikke i hver sin
   beholder. Med indlejrede beholdere ombrød chipsene som en samlet blok, og
   på smalle skærme blev blyanten efterladt alene på sin egen linje som et
   løsrevet ikon. Nu falder den bare i hælene på den sidste chip. */
.resume{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 7px;
  margin:0 var(--s5) var(--s5);
}
.resume .mrk{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  color:var(--blaek-svag);flex:none;margin-right:1px;
}
.resume span:not(.mrk){
  padding:3px 9px;border-radius:var(--r-pille);
  background:var(--mos-vask);border:1px solid var(--linje);
  font-size:11.5px;font-weight:500;color:var(--mos-dyb);
  white-space:nowrap;
  transition:background var(--hurtig),border-color var(--hurtig);
}
.resume .rediger{width:14px;height:14px;flex:none;color:var(--blaek-svag);
  margin-left:1px;transition:color var(--hurtig)}
@media (hover:hover){
  .resume:hover span:not(.mrk){background:var(--mos-tint);border-color:var(--mos-kant)}
  .resume:hover .rediger{color:var(--mos)}
}

/* ------------------------------------------------------------- boligkort */
.kort{
  background:var(--kort);border:1px solid var(--linje);
  border-radius:var(--r-kort);margin:0 var(--s4) var(--s5);overflow:hidden;
  box-shadow:var(--skygge-1);
  animation:tone .55s var(--kurve) both;
}
@keyframes tone{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* nth-of-type, ikke nth-child: manchetten og filterlinjen står før kortene
   i samme beholder, så nth-child forsinkede de forkerte elementer. */
.kort:nth-of-type(1){animation-delay:.02s}
.kort:nth-of-type(2){animation-delay:.09s}
.kort:nth-of-type(3){animation-delay:.16s}
.kort:nth-of-type(4){animation-delay:.23s}

@media (hover:hover){
  .kort{transition:transform var(--hurtig) var(--kurve),box-shadow var(--hurtig)}
  .kort:hover{transform:translateY(-2px);box-shadow:var(--skygge-2)}
}

/* Billedfeltet. I mockup'en er "fotoet" et botanisk farvelag — i den rigtige
   app står kildens billede her, og .plade.tom er tilstanden når der ikke er
   noget (Boligdeal har sjældent billeder). */
.plade{height:132px;position:relative;overflow:hidden}
.plade::after{content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.08'/%3E%3C/svg%3E")}
.plade.a{background:linear-gradient(118deg,#8aa07c,#5a6e52 52%,#3d4c37)}
.plade.b{background:linear-gradient(118deg,#93977c,#6f7a5e 52%,#4b533d)}
.plade.c{background:linear-gradient(118deg,#7f9a86,#556d5e 52%,#374a40)}
/* Rigtige fotos fra kilderne. Billedet hentes af browserens egen forbindelse
   direkte fra kilden — vi gemmer kun adressen, aldrig filen. Farvefladen bliver
   liggende nedenunder, så et billede der er forsvundet efterlader et kort der
   stadig ser rigtigt ud frem for et hul. */
.plade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;z-index:1}
.plade.foto .maerke,.plade.foto .pris{z-index:2}

/* Minikortet: bruges når kilden ikke har et foto. Tegnet af vores egne
   DAWA-grænser, ikke af fliser fra en flisetjeneste — så får ingen fremmed
   server at vide hvilke adresser der bliver kigget på, og farverne er vores
   egne i stedet for standard-OSM's.
   Dæmpet med vilje: det er en stedsangivelse, ikke et kort man skal læse. */
.plade.minikort{background:var(--vand)}
/* Prisen står hvid med skygge oven på et foto eller en mørk flade. På det
   lyse minikort ville den forsvinde, så dér får den samme behandling som
   NY-mærket: mørk skrift på en lys pille. */
.plade.minikort .pris{color:var(--mos-dyb);text-shadow:none;
  background:var(--kort);padding:3px 11px;border-radius:var(--r-pille);
  box-shadow:var(--skygge-1);font-size:19px}
.plade.minikort .pris.ukendt{font-size:12.5px}
.plade .minikort{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-land{fill:var(--zone-ude);stroke:none}
.mk-naboer{fill:none;stroke:#fff;stroke-width:1.1;vector-effect:non-scaling-stroke}
.mk-omraade{fill:var(--mos-tint);stroke:var(--mos-kant);stroke-width:1.4;
  vector-effect:non-scaling-stroke}
/* Markøren står kun når koordinatet ER adressen. Hvid krave, så den kan ses
   både på land og på vand. */
.mk-markoer{fill:var(--mos);stroke:#fff;stroke-width:2.2;
  vector-effect:non-scaling-stroke}

.plade.tom{background:repeating-linear-gradient(135deg,var(--mos-vask),
  var(--mos-vask) 9px,#e8edde 9px,#e8edde 18px);
  display:flex;align-items:center;justify-content:center}
.plade.tom span{font-size:12px;color:var(--blaek-svag);font-weight:500;
  background:var(--kort);padding:4px 11px;border-radius:var(--r-pille);
  border:1px solid var(--linje)}

.maerke{
  position:absolute;top:11px;left:11px;z-index:2;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  background:var(--kort);color:var(--mos-dyb);
  padding:4px 10px;border-radius:var(--r-pille);box-shadow:var(--skygge-1);
}
.pris{
  position:absolute;bottom:11px;right:12px;z-index:2;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:23px;
  font-variation-settings:'opsz' 60;color:#fff;
  text-shadow:0 1px 12px rgba(30,38,28,.5);
}
/* Ukendt pris er ikke fravær af en pris — det er en oplysning i sig selv. */
.pris.ukendt{
  font-family:'Public Sans',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--lyng-dyb);background:var(--lyng-tint);
  border:1px solid var(--lyng-kant);
  padding:5px 11px;border-radius:var(--r-pille);text-shadow:none;
}

.indhold{padding:var(--s4) var(--s5) var(--s5)}
.adresse{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:21px;
  font-variation-settings:'opsz' 40;line-height:1.2;color:var(--mos-dyb);
  letter-spacing:-.01em}
.sted{font-size:13px;color:var(--blaek-blid);margin-top:3px}
.sted .kilde{color:var(--blaek-svag)}

.fakta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--linje-blid);font-size:13px;color:var(--blaek-blid);
}
.fakta b{font-weight:600;color:var(--blaek)}
.fakta .ja{color:var(--mos);font-weight:600}

/* Ukendt felt: lyng, prikket understregning. Læses som en note i marginen,
   ikke som en fejl. Ingen røde farver i feedet — det er fastlagt. */
.ukendt{
  color:var(--lyng-dyb);font-weight:600;
  border-bottom:1.5px dotted var(--lyng);padding-bottom:1px;
}
.ukendt::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--lyng);margin-right:5px;vertical-align:.12em}

.koeretid{margin-top:var(--s3);font-size:13px;color:var(--blaek-blid);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}
.koeretid .ikon{width:15px;height:15px;color:var(--mos);flex:none}
.koeretid .sted-tid{white-space:nowrap}
.koeretid .min{font-weight:600;color:var(--mos-dyb);font-variant-numeric:tabular-nums}
.koeretid .min.ca{color:var(--blaek-blid)}
.koeretid .min.ukendt-tid{color:var(--lyng-dyb);border-bottom:1.5px dotted var(--lyng)}
/* En køretid OVER referencens minuttal er hverken en fejl eller en mangel —
   den er en oplysning man selv skal veje, og under Område-modellen kan den
   aldrig frasortere boligen. Derfor lyng, ligesom alt andet brugeren selv
   skal tage stilling til. Forskellen fra ukendt ligger i stregen: PRIKKET
   betyder "vi ved det ikke", HEL betyder "vi ved det, og det er over din
   grænse". Samme farve, to forskellige udsagn. */
.koeretid .min.over{color:var(--lyng-dyb);border-bottom:1.5px solid var(--lyng)}

/* Notestrimlen — forklaringen på hvad vi ikke ved, og hvorfor den er med. */
.note{
  margin-top:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s4);
  background:var(--lyng-tint);border-left:2.5px solid var(--lyng);
  border-radius:0 var(--r-lille) var(--r-lille) 0;
  font-size:12.5px;line-height:1.5;color:var(--lyng-dyb);
}
.note ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.note li{padding-left:13px;position:relative}
.note li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--lyng)}
.note .hvorfor{display:block;margin-top:7px;font-style:italic;opacity:.85}

.handling{margin-top:var(--s4)}
.knap{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;padding:12px;border-radius:var(--r-kontrol);
  font-size:14.5px;font-weight:600;
  background:var(--mos);color:#fff;
  transition:background var(--hurtig),transform var(--lynhurtig);
}
.knap:hover{background:var(--mos-dyb)}
.knap:active{transform:scale(.99)}
.knap svg{width:15px;height:15px}
.knap.sekundaer{background:transparent;color:var(--blaek);
  border:1.5px solid var(--linje)}
.knap.sekundaer:hover{background:var(--mos-vask);border-color:var(--mos-kant)}

/* --------------------------------------------------------- empty state */
.tomt{
  margin:var(--s4) var(--s4) var(--s5);padding:var(--s8) var(--s5);
  background:var(--kort);border:1px dashed var(--mos-kant);
  border-radius:var(--r-kort);text-align:center;
}
.tomt .kvist{width:44px;height:44px;margin:0 auto var(--s4);color:var(--mos);opacity:.6}
.tomt h2{font-size:19px;margin-bottom:var(--s2)}
.tomt p{font-size:14px;color:var(--blaek-blid);max-width:34ch;margin:0 auto}
.tomt .naar{margin-top:var(--s4);font-size:12.5px;color:var(--blaek-svag)}

/* -------------------------------------------------------- statuslinje
   Flyttet til toppen 2026-08-11 (Magnus). Den sidder nu som en DATELINE
   lige under navnet — samme plads som en avis sætter sted og dato. Det er
   den rigtige plads for den: "maskinen kører, og hvornår kørte den sidst"
   er noget man vil vide FØR man læser, ikke noget man leder efter i bunden.

   Sammenfoldet er den ren tekst uden felt, så den ikke stjæler vægt fra
   overskriften. Først når man folder ud, bliver kilde-sundheden til et
   rigtigt panel — dér er den et opslagsværk og må gerne fylde. */
.status{margin:6px var(--s5) var(--s4)}
.status summary{
  display:inline-flex;align-items:center;gap:7px;
  padding:3px 0;font-size:11.5px;color:var(--blaek-svag);
  cursor:pointer;list-style:none;
  border-bottom:1px solid transparent;
  transition:color var(--hurtig),border-color var(--hurtig);
}
.status summary:hover{color:var(--blaek-blid);border-bottom-color:var(--linje)}
.status summary b{font-weight:600;color:var(--blaek-blid)}
.status summary::-webkit-details-marker{display:none}
.status .puls{width:6px;height:6px;border-radius:50%;background:var(--mos);flex:none;
  box-shadow:0 0 0 0 rgba(90,110,82,.5);animation:puls 2.6s infinite}
@keyframes puls{
  0%{box-shadow:0 0 0 0 rgba(90,110,82,.4)}
  70%{box-shadow:0 0 0 6px rgba(90,110,82,0)}
  100%{box-shadow:0 0 0 0 rgba(90,110,82,0)}
}
.status .fold{width:13px;height:13px;color:var(--blaek-svag);flex:none;
  transition:transform var(--hurtig)}
.status[open] .fold{transform:rotate(180deg)}
.status[open] summary{color:var(--blaek-blid)}
.status .krop{
  margin-top:var(--s3);padding:var(--s3) var(--s4) var(--s4);
  background:var(--kort);border:1px solid var(--linje);
  border-radius:var(--r-kontrol);box-shadow:var(--skygge-1);
  animation:fold var(--rolig) var(--kurve);
}
@keyframes fold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.kilde-raekke{display:flex;align-items:center;gap:var(--s3);
  padding:9px 0;border-bottom:1px solid var(--linje-blid);font-size:13px}
.kilde-raekke:last-child{border-bottom:none}
.kilde-raekke .navn{font-weight:600;flex:1;min-width:0}
.kilde-raekke .tal{color:var(--blaek-blid);font-size:12.5px}
.tilstand{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pille);white-space:nowrap}
.tilstand.aktiv{background:var(--mos-tint);color:var(--mos-dyb)}
/* Blokeret/login er ikke fejl — det er kilder vi bevidst ikke bruger.
   Derfor neutral grå, aldrig rød. Rødt i feedet er udelukket i DESIGN.md. */
.tilstand.fra{background:#edefe7;color:var(--blaek-blid)}
.status .naeste{margin-top:var(--s3);font-size:12px;color:var(--blaek-svag)}

/* ------------------------------------------------------- indstillinger */
.sektion{
  background:var(--kort);border:1px solid var(--linje);border-radius:var(--r-kort);
  margin:0 var(--s4) var(--s5);padding:var(--s5);box-shadow:var(--skygge-1);
}
.sektion-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s2)}
.sektion h2{font-size:18px}
.sektion .forklaring{font-size:13px;color:var(--blaek-blid);margin-top:var(--s1);
  margin-bottom:var(--s4)}

/* Nøglevisning: hvilket felt i serverens config sektionen skriver til.
   Uden den ville skærmen være en formular uden adresse — man kan ikke se
   hvor tingene lander, og det er netop det man skal kunne. */
.noegle{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  color:var(--mos);background:var(--mos-vask);border:1px solid var(--mos-kant);
  padding:2px 7px;border-radius:5px;white-space:nowrap;flex:none;
}

/* Felter inde i et kort fyldes med --indfattet, ikke --papir: efter lysningen
   ligger papiret så tæt på kortet at et inputfelt ville forsvinde i det. */
.felt{display:flex;align-items:center;gap:var(--s3);
  border:1.5px solid var(--linje);border-radius:var(--r-kontrol);
  padding:11px var(--s4);background:var(--indfattet);
  transition:border-color var(--hurtig),background var(--hurtig)}
.felt:focus-within{border-color:var(--mos);background:var(--kort)}
.felt input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-size:16px;font-weight:600;color:var(--blaek);font-variant-numeric:tabular-nums}
.felt .enhed{font-size:13px;color:var(--blaek-svag);flex:none}
.felt.smal input{font-size:15px}

.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.chip{display:inline-flex;align-items:center;gap:7px;
  background:var(--mos-tint);border:1px solid var(--mos-kant);
  color:var(--mos-dyb);font-size:13.5px;font-weight:600;
  padding:6px 8px 6px 12px;border-radius:var(--r-pille);
  font-variant-numeric:tabular-nums;
  animation:tone .3s var(--kurve) both}
.chip .fjern{display:flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;background:rgba(61,76,55,.1);
  color:var(--mos-dyb);font-size:12px;line-height:1;transition:background var(--hurtig)}
.chip .fjern:hover{background:rgba(61,76,55,.22)}
.chip.tilfoej{background:transparent;border-style:dashed;color:var(--mos);
  padding:6px 13px;cursor:pointer}
.chip.tilfoej:hover{background:var(--mos-vask)}

.tom-liste{padding:var(--s4);border:1px dashed var(--linje);border-radius:var(--r-lille);
  background:var(--indfattet);font-size:13px;color:var(--blaek-blid);text-align:center}

.adresse-kort{border:1px solid var(--linje);border-radius:var(--r-kontrol);
  padding:var(--s4);margin-bottom:var(--s3);background:var(--indfattet)}
.adresse-kort .rk{display:flex;align-items:center;gap:var(--s3)}
.adresse-kort .rk + .rk{margin-top:var(--s3)}
.adresse-kort .navn{font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:16px;color:var(--mos-dyb);flex:1}
.adresse-kort .vej{font-size:13px;color:var(--blaek-blid);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minutter{display:flex;align-items:center;gap:6px;flex:none;
  background:var(--kort);border:1.5px solid var(--linje);border-radius:var(--r-lille);
  padding:5px 9px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.minutter .enh{font-size:11.5px;color:var(--blaek-svag);font-weight:500}
.slet{color:var(--blaek-svag);font-size:12.5px;font-weight:600;flex:none}
.slet:hover{color:var(--lyng-dyb)}

.skifte{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-top:1px solid var(--linje-blid)}
.skifte .tekst{font-size:13.5px;font-weight:600}
.skifte .under{font-size:12.5px;color:var(--blaek-blid);font-weight:400;margin-top:2px}
.kontakt{width:44px;height:25px;border-radius:var(--r-pille);background:#dadecf;
  position:relative;flex:none;transition:background var(--hurtig)}
.kontakt::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:#fff;box-shadow:var(--skygge-1);
  transition:transform var(--hurtig) var(--kurve)}
.kontakt.til{background:var(--mos)}
.kontakt.til::after{transform:translateX(19px)}
.kontakt.laast{opacity:.45}

/* Gem-bjælken. Sidder fast i bunden, så man altid kan se at der er ugemte
   ændringer — og hvor de er på vej hen. */
.gem-bjaelke{
  position:sticky;bottom:0;z-index:5;margin-top:var(--s6);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-top:1px solid var(--linje);padding:var(--s4) var(--s5)
    calc(var(--s4) + env(safe-area-inset-bottom,0px));
}
/* Ikke flex: <b>-elementerne ville blive selvstændige flex-elementer og rive
   sætningen midtover. Ikonet står inline i stedet. */
.gem-bjaelke .hvorhen{font-size:12px;color:var(--blaek-svag);margin-bottom:var(--s3);
  line-height:1.5}
.gem-bjaelke .hvorhen svg{vertical-align:-2px;margin-right:6px}
.gem-bjaelke .hvorhen b{font-weight:600;color:var(--blaek-blid)}
.gem-bjaelke .raekke{display:flex;align-items:center;gap:var(--s3)}
.gem-bjaelke .aendringer{flex:1;font-size:13px;font-weight:600;color:var(--mos-dyb)}
.gem-bjaelke .knap{width:auto;padding:11px var(--s6);flex:none}

/* ---------------------------------------------------------------- login */
.login-ramme{max-width:400px;margin:0 auto;padding:0 var(--s5);
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:1}
.login-kort{background:var(--kort);border:1px solid var(--linje);
  border-radius:var(--r-kort);padding:var(--s7) var(--s6) var(--s6);
  box-shadow:var(--skygge-2);animation:tone .5s var(--kurve) both}
.login-kort .segl{width:46px;height:46px;border-radius:13px;background:var(--mos-tint);
  border:1px solid var(--mos-kant);display:flex;align-items:center;
  justify-content:center;margin-bottom:var(--s5);color:var(--mos-dyb)}
.login-kort .segl svg{width:23px;height:23px}
.login-kort h1{font-size:25px;font-variation-settings:'opsz' 60}
.login-kort .under{font-size:14px;color:var(--blaek-blid);margin-top:var(--s2);
  line-height:1.55}
.login-kort form{margin-top:var(--s6)}
.login-kort label{display:block;margin-bottom:var(--s2)}
.login-kort .knap{margin-top:var(--s4)}
.login-fod{text-align:center;font-size:12px;color:var(--blaek-svag);
  margin-top:var(--s5);line-height:1.6}

.kvittering{text-align:center}
.kvittering .segl{margin:0 auto var(--s5)}
.kvittering .modtager{display:inline-block;margin-top:var(--s3);
  font-weight:600;font-size:14.5px;color:var(--mos-dyb);
  background:var(--mos-vask);border:1px solid var(--mos-kant);
  padding:7px 14px;border-radius:var(--r-pille)}
.kvittering .igen{margin-top:var(--s6);font-size:13px;color:var(--blaek-blid)}
.kvittering .igen a{color:var(--mos);font-weight:600;border-bottom:1.5px solid var(--mos-kant)}

/* ----------------------------------------------------------- index-side */
.oversigt{padding:0 var(--s4)}
.ov-kort{display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--kort);border:1px solid var(--linje);border-radius:var(--r-kort);
  padding:var(--s5);margin-bottom:var(--s3);box-shadow:var(--skygge-1);
  transition:transform var(--hurtig) var(--kurve),box-shadow var(--hurtig),
    border-color var(--hurtig)}
.ov-kort:hover{transform:translateY(-2px);box-shadow:var(--skygge-2);
  border-color:var(--mos-kant)}
.ov-kort .nr{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:15px;
  color:var(--mos);background:var(--mos-vask);border:1px solid var(--mos-kant);
  width:31px;height:31px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;flex:none}
.ov-kort h2{font-size:17px;margin-bottom:3px}
.ov-kort p{font-size:13.5px;color:var(--blaek-blid);line-height:1.5}
.ov-kort .fil{font-family:ui-monospace,Menlo,monospace;font-size:11px;
  color:var(--blaek-svag);margin-top:var(--s2);display:block}

.advarsel{margin:0 var(--s4) var(--s6);padding:var(--s4);
  background:var(--lyng-tint);border:1px solid var(--lyng-kant);
  border-radius:var(--r-kontrol);font-size:13px;color:var(--lyng-dyb);line-height:1.55}
.advarsel b{font-weight:600}

/* ============================================================== OMRÅDE ====
   Område-modellen: masken udvælger, køretiden oplyser. Skærmens opgave er at
   holde de to ting adskilt, for de ligner hinanden — begge er minuttal.
   ========================================================================= */

/* Oplysningsstrimmel i mos. Modstykket til .note, som er i lyng.
   Lyng betyder "noget du selv skal vurdere"; mos betyder "sådan virker det".
   De må ikke bytte plads — så holder ukendt-princippet op med at betyde noget. */
.oplysning{
  display:flex;gap:var(--s3);margin-bottom:var(--s4);
  padding:var(--s3) var(--s4);
  background:var(--mos-vask);border-left:2.5px solid var(--mos);
  border-radius:0 var(--r-lille) var(--r-lille) 0;
  font-size:12.5px;line-height:1.5;color:var(--mos-dyb);
}
.oplysning svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--mos)}
.oplysning b{font-weight:600}

/* ------------------------------------------------------------ beregn-trin */
.beregn{margin-bottom:var(--s5)}
.beregn-knap svg{width:16px;height:16px}
.beregn .mikro{margin-top:var(--s2);font-size:11.5px;color:var(--blaek-svag);
  text-align:center;line-height:1.5}
.beregn .kvittering-linje{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--linje-blid);
  font-size:12px;color:var(--blaek-blid);text-align:center}
.beregn .kvittering-linje b{font-weight:600;color:var(--mos-dyb);
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- signaturforklaring */
.signatur{list-style:none;display:flex;flex-wrap:wrap;gap:6px var(--s4);
  margin-bottom:var(--s3);font-size:11.5px;color:var(--blaek-blid)}
.signatur li{display:flex;align-items:center;gap:6px}
.signatur .pr{width:13px;height:13px;border-radius:4px;flex:none;
  border:1px solid rgba(44,51,43,.12)}
.signatur .pr.zone-inde{background:var(--mos)}
.signatur .pr.zone-taet{background:var(--zone-taet)}
.signatur .pr.zone-ude{background:var(--zone-ude)}
.signatur .pr.m-til{background:var(--zone-ude);box-shadow:inset 0 0 0 2px var(--mos-dyb)}
.signatur .pr.m-fra{background:var(--mos);box-shadow:inset 0 0 0 2px var(--blaek);
  opacity:.55}

/* ------------------------------------------------------------------ kortet */
.kort-ramme{position:relative;border:1px solid var(--linje);
  border-radius:var(--r-kontrol);overflow:hidden;background:var(--vand)}
/* aspect-ratio, ikke height:auto alene. Uden den udleder kassens højde sig af
   viewBoxens forhold — og da zoom ÆNDRER viewBoxen, ville kassen ændre form
   under hvert zoomtrin, og udregningen af "hvor mange brugerenheder er en
   pixel" ville jage sin egen hale. Med et fast forhold står kassen stille. */
.danmarkskort{display:block;width:100%;height:auto;aspect-ratio:434/420;
  touch-action:none;cursor:grab;
  /* Uden dette markerer et træk hen over kortet postnumrene som tekst, og man
     panorerer med en blå markering slæbende efter sig. */
  -webkit-user-select:none;user-select:none}
.danmarkskort.trukket{cursor:grabbing}
.danmarkskort .vand{fill:var(--vand)}
/* Ikke scopet til .danmarkskort: miniaturen på indstillinger genbruger de
   samme baner, og uden fill:none tegnede øens kant sig som en sort silhuet
   oven på hele kortet. En SVG-bane uden fill er sort — ikke usynlig. */
.oe-grund{fill:var(--zone-ude)}
.oe-kant{fill:none;stroke:var(--mos-kant);stroke-width:1.4;
  vector-effect:non-scaling-stroke}

/* Cellerne. Hvid hårstreg imellem, så nabofarver ikke løber sammen. */
.celle{stroke:#fff;stroke-width:.9;cursor:pointer;vector-effect:non-scaling-stroke;
  transition:fill var(--hurtig),opacity var(--hurtig)}
.celle.zone-inde{fill:var(--mos)}
.celle.zone-taet{fill:var(--zone-taet)}
.celle.zone-ude{fill:var(--zone-ude)}
@media (hover:hover){ .celle:hover{opacity:.78} }

/* Et manuelt valg er en UNDTAGELSE, ikke en fjerde farve. Beregningsfarven
   bliver liggende, og markeringen lægger sig ovenpå som en ring. Så kan man
   se begge dele: hvad beregningen mente, og hvad Magnus bestemte.
   Ingen ny kulør — lyng er optaget af ukendt-princippet, og en femte farve
   ville gøre kortet til et diagram. */
.celle.m-til{stroke:var(--mos-dyb);stroke-width:2.6;stroke-linejoin:round}
.omr-genvej .mini-kort .celle{vector-effect:none}
.celle.m-fra{stroke:var(--blaek);stroke-width:2.6;stroke-dasharray:5 3.5;
  stroke-linejoin:round;opacity:.5}

/* Kommunelaget (mockup-udgaven; appen bruger .kommunegraenser ovenfor).
   To greb holder de to lag adskilt uden at kortet støjer:
   grænsen er en anelse kraftigere end postnummer-hårstregen og i en varmere,
   mere dæmpet tone; navnet står i et helt andet typografisk register —
   versaler med spatiering, ingen tabeltal, ingen baggrund. Man kan ikke tage
   fejl af et "KØBENHAVN" og et "2610".
   Hvid kontur, ikke felt: navnet skal kunne læses hen over en mørk mos-celle
   uden at der lægges en kasse ind over kortet. */
.kommunegraenser{fill:none;stroke:var(--kommune-streg);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  pointer-events:none}
/* Kommunenavne er orientering, ikke handling — de må aldrig opsluge et klik
   der var ment for cellen nedenunder. */
.kommunenavne{pointer-events:none}
.kommunenavne text{font-family:'Public Sans',sans-serif;font-weight:600;
  text-anchor:middle;dominant-baseline:middle;
  stroke:#fff;paint-order:stroke fill;stroke-linejoin:round}

/* Bylaget — det tredje register, mellem de to andre. Kommunen er versaler med
   spatiering og halvfed; postnummeret er halvfede tabeltal; byen er almindelig
   vægt med stort begyndelsesbogstav og ingen spatiering. Tre påskrifter oven i
   hinanden kan altså kendes fra hinanden på formen alene, uden at man skal
   huske et farvekodeskema. Byen er en smule mørkere end kommunen, fordi den
   ligger tættere på det man handler efter. */
.bynavne{pointer-events:none}
.bynavne text{font-family:'Public Sans',sans-serif;font-weight:400;
  text-anchor:middle;dominant-baseline:middle;
  stroke:#fff;paint-order:stroke fill;stroke-linejoin:round}

.danmarkskort .lap{font-family:'Public Sans',sans-serif;font-size:9.5px;
  font-weight:600;text-anchor:middle;pointer-events:none;
  font-variant-numeric:tabular-nums}
.danmarkskort .lap.zone-inde{fill:#fff}
.danmarkskort .lap.zone-taet{fill:var(--mos-dyb)}
.danmarkskort .lap.zone-ude{fill:var(--blaek-blid)}

.danmarkskort .maerke text{font-family:'Public Sans',sans-serif;font-size:10px;
  font-weight:600;text-anchor:middle;font-variant-numeric:tabular-nums}
.danmarkskort .maerke rect{fill:#fff;stroke-width:1.5}
.danmarkskort .maerke.m-til rect{stroke:var(--mos-dyb)}
.danmarkskort .maerke.m-til text{fill:var(--mos-dyb)}
.danmarkskort .maerke.m-fra rect{stroke:var(--blaek)}
.danmarkskort .maerke.m-fra text{fill:var(--blaek)}
.danmarkskort .maerke{pointer-events:none}

/* Referencepunkterne. De hører ikke til masken — derfor et andet formsprog:
   en prik med hvid krave, ikke en flade. */
.danmarkskort .ref circle{fill:var(--blaek);stroke:#fff;stroke-width:2;
  vector-effect:non-scaling-stroke}
.danmarkskort .ref text{font-family:'Public Sans',sans-serif;font-size:11px;
  font-weight:600;fill:var(--blaek);stroke:#fff;stroke-width:3;
  paint-order:stroke fill}

/* Tildækning før beregning */
.kort-daekke{position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);padding:var(--s6);text-align:center;
  background:rgba(255,255,255,.82);backdrop-filter:blur(1.5px)}
.kort-daekke svg{width:30px;height:30px;color:var(--mos);opacity:.65}
.kort-daekke b{font-family:'Fraunces',Georgia,serif;font-size:16px;
  color:var(--mos-dyb)}
.kort-daekke span{font-size:12.5px;color:var(--blaek-blid);max-width:32ch;
  line-height:1.5}
.kort-daekke i{font-style:normal;font-weight:600;color:var(--mos-dyb)}

/* Zoomknapperne. Musehjul og knib er de hurtige veje, men de findes ikke for
   alle: en mus uden hjul, en tastaturbruger, en skærmlæser. Knapperne er den
   fulde vej, ikke en henvisning til den. Derfor ligger de synligt på kortet
   frem for i en menu. */
.zoomknapper{position:absolute;top:var(--s3);right:var(--s3);z-index:2;
  display:flex;flex-direction:column;gap:5px}
.zoomknapper button{width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;background:var(--kort);color:var(--mos-dyb);
  border:1px solid var(--linje);border-radius:var(--r-lille);
  box-shadow:var(--skygge-1);transition:background var(--hurtig),color var(--hurtig)}
.zoomknapper button:hover{background:var(--mos-vask);color:var(--mos)}
.zoomknapper button svg{width:15px;height:15px}
.zoomknapper .fit{margin-top:3px}
.zoomknapper .fit[disabled]{opacity:.4;cursor:default;background:var(--kort);
  color:var(--blaek-svag)}

/* Fremdrift under beregningen. Den tager omkring et minut, og en knap der
   bare er slukket i et minut ligner en app der har hængt sig. */
.beregn-status{margin-top:var(--s3);font-size:12px;text-align:center;
  color:var(--blaek-blid);min-height:1em}
.beregn-status.koerer{color:var(--mos)}
.beregn-status.fejl{color:var(--lyng-dyb)}
.beregn-knap[disabled]{opacity:.55;cursor:default}
.gem-knap[disabled]{opacity:.45;cursor:default}

.kort-hjaelp{margin-top:var(--s3);font-size:11.5px;color:var(--blaek-svag);
  line-height:1.5}
/* Fodnote, ikke advarsel: at kortet er en tegning skal stå der, men det er
   ikke et problem der skal løses — derfor samme dæmpede register som hjælpe-
   teksten, adskilt af en hårstreg. */
.datakilde{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--linje-blid);
  font-size:11px;color:var(--blaek-svag);line-height:1.55}
.datakilde b{font-weight:600;color:var(--blaek-blid)}

/* --------------------------------------------------------- valgte postnumre */
.valgte{margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--linje-blid)}
.valgte-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s3)}
.valgte-top .tal{font-size:12.5px;color:var(--blaek-blid)}
.valgte-top .tal b{font-weight:600;color:var(--mos-dyb);
  font-variant-numeric:tabular-nums}
.omr-chips,.omr-fravalgt{margin-bottom:0}
.chip.manuel{box-shadow:inset 0 0 0 1.5px var(--mos-dyb)}
.chip.stroeget{background:transparent;border-style:dashed;color:var(--blaek-blid);
  text-decoration:line-through;text-decoration-color:var(--blaek-svag)}
.chip.stroeget .fjern{background:rgba(44,51,43,.07);text-decoration:none}
.fravalgt{margin-top:var(--s4)}
.fravalgt .etiket{display:block;margin-bottom:var(--s2)}
.huske{display:flex;align-items:flex-start;gap:7px;margin-top:var(--s4);
  font-size:11.5px;color:var(--blaek-svag);line-height:1.5}
.huske svg{width:13px;height:13px;flex:none;margin-top:1px}

/* Tildækningen dækkede i mockup'en et TOMT kort. I appen er kortet fyldt med
   rigtige grænser længe før nogen har beregnet en maske, og så er en hvid
   flade hen over det både en løgn og en spærring — teksten inviterer til at
   zoome, mens laget selv opsluger trækket. Derfor dækkes der kun mens der
   hentes og hvis det gik galt; er kortet klar, ligger forklaringen under det. */
.omraade .henter-tekst,.omraade .fejl-tekst,
.omraade .kort-daekke{display:none}
.omraade.henter .kort-daekke,
.omraade.kort-fejl .kort-daekke{display:flex}
.omraade.henter .henter-tekst{display:block}
.omraade.henter .klar-tekst{display:none}
.omraade.kort-fejl .fejl-tekst{display:block;color:var(--lyng-dyb)}
.omraade.kort-fejl .klar-tekst,.omraade.kort-fejl .henter-tekst{display:none}

/* Rigtige kommunegrænser: ét lag konturer oven på postnummerfladerne, uden
   fyld, så fladerne nedenunder stadig kan ses og trykkes. */
.kommunegraenser{fill:none;stroke:var(--kommune-streg);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  pointer-events:none}

/* Før beregning er der ingen maske at vise — kun forklaringen og knappen. */
.omraade.uberegnet .signatur,
.omraade.uberegnet .kort-hjaelp,
.omraade.uberegnet .valgte,
.omraade.uberegnet .kvittering-linje{display:none}
.omraade.uberegnet .celle{fill:var(--zone-ukendt);cursor:default}

/* Genvej fra indstillinger til områdekortet. Miniaturen er ikke pynt: den
   viser maskens FORM, og formen er det man genkender et område på — hurtigere
   end "11 postnumre" kan læses. */
.omr-genvej{display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3);border:1px solid var(--linje);border-radius:var(--r-kontrol);
  background:var(--indfattet);
  transition:border-color var(--hurtig),background var(--hurtig)}
.omr-genvej:hover{border-color:var(--mos-kant);background:var(--mos-vask)}
.omr-genvej .mini-kort{width:84px;height:81px;flex:none;
  background:var(--vand);border-radius:var(--r-lille);border:1px solid var(--linje-blid)}
.omr-genvej .mini-kort .celle{stroke:#fff;stroke-width:1.2}
.omr-genvej .mini-kort .m-til{stroke:var(--mos-dyb);stroke-width:3}
.omr-genvej .mini-kort .m-fra{stroke:var(--blaek);stroke-width:3;opacity:.5}
.omr-genvej .tekst{flex:1;min-width:0}
.omr-genvej .hoved{font-size:14px;font-weight:500;color:var(--blaek)}
.omr-genvej .hoved b{font-family:'Fraunces',Georgia,serif;font-size:19px;
  font-weight:600;color:var(--mos-dyb);margin-right:2px}
.omr-genvej .under{font-size:12px;color:var(--blaek-blid);margin-top:1px}
.omr-genvej .handling{font-size:12px;font-weight:600;color:var(--mos);
  margin-top:var(--s2)}
.omr-genvej .rediger{width:15px;height:15px;flex:none;color:var(--blaek-svag)}
.omr-genvej:hover .rediger{color:var(--mos)}

/* ---------------------------------------------------- desktop-skalering
   Feedet bliver IKKE flerspaltet. Det er et katalog man læser ovenfra og ned;
   to spalter ville gøre det til et dashboard, og det er præcis hvad DNA'et
   siger nej til. Skærmen får i stedet mere luft og en anelse større type. */
@media (min-width:760px){
  .ramme{padding-top:var(--s3)}
  .top{padding:var(--s8) var(--s6) var(--s3)}
  .top .navn{font-size:30px}
  .manchet{padding:0 var(--s6) var(--s6);font-size:18px}
  .resume,.status{margin-left:var(--s6);margin-right:var(--s6)}
  .kort,.sektion,.tomt{margin-left:var(--s5);margin-right:var(--s5)}
  .plade{height:158px}
  .oversigt{padding:0 var(--s6)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important}
}