/* =============================================================================
   Nybolig — designsystem for Ejendomsdataindsigt
   =============================================================================

   Bygget efter Nyboligs officielle designguide (Design-guide_farver.pdf,
   designnybolig.nykredit.dk). Alle farveværdier er brandets egne, ikke udledte.

   TRE MÅLTE BESLUTNINGER, der forklarer hvorfor systemet ser ud som det gør:

   1. Nybolig Grøn på hvid giver kontrast 2,3:1. Den kan IKKE bære tekst.
      Grøn bruges derfor kun som flade, markør og grafikfarve — aldrig som
      skriftfarve på lys bund. Guiden tillader farvet tekst i grøn; vores
      brugsscene (sollys, sælger på 70) gør det uforsvarligt.

   2. Nybolig Blå på hvid giver 4,46:1 — 0,04 under AA for brødtekst.
      Links står derfor altid med understregning, så farven ikke er eneste
      signal.

   3. Paletten indeholder ingen rød. En advarsel — olietankens sløjfningsfrist,
      der kan stoppe en handel — vises derfor som fuldt felt i palettens
      kraftigste værdikontrast frem for i en farve, brandet ikke ejer. Fladen
      vender om i mørk tilstand; se --kontrast-flade nedenfor.

   Farvefordelingen i guiden (Mørkegrå 20 %, Hvid 20 %, Blå 15 %, Grøn 15 %,
   Sand 10 %, resten 5 %) er ikke dekoration: den er grunden til at skinnen er
   mørkegrå og bunden er sand, i stedet for endnu et gråt dashboard.
   ========================================================================== */

/* --- Nyboligs egen skrift ------------------------------------------------ */

@font-face {
  font-family: 'Nybolig';
  src: url('fonts/Nybolig-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nybolig';
  src: url('fonts/Nybolig-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nybolig';
  src: url('fonts/Nybolig-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nybolig';
  src: url('fonts/Nybolig-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Brugsskriften -------------------------------------------------------
   Nyboligs skrift bærer identiteten — overskrifter, skinne, de store tal. Den
   er geometrisk og tegnet til at blive SET: fra det mindste ord til den store
   facade, som designguiden selv formulerer det. Den er ikke tegnet til at
   blive læst i 14 px, og et filterpanel med halvtreds etiketter,
   hjælpetekster og kodenavne er præcis dét.

   Nyboligs designguide (designnybolig.nykredit.dk) foreskriver ARIAL, hvor
   Nybolig-skriften ikke kan bruges. Den nævner ingen anden sekundær skrift,
   og en tredjepartsskrift ville være vores valg og ikke brandets.

   Derfor to skrifter med hver sin opgave: BRANDET til identiteten,
   ARIAL til det tætte — paneler, formularer, tabelceller, hjælpetekst.
   Ingen hentning, ingen tredjepart, og skriften findes på hver eneste maskine.

   ⚠️ Prisen er kendt og accepteret: Arial skelner dårligt mellem 1, l og I.
   På en flade fuld af BFE-numre betyder det, at cifre skal stå i tabeller med
   `tal`-klassen og aldrig midt i en sætning, hvor de kan forveksles. */
:root {
  --brand-skrift: 'Nybolig', Arial, Helvetica, sans-serif;
  --brugs-skrift: Arial, Helvetica, 'Segoe UI', sans-serif;
}

/* --- Brandets farver ----------------------------------------------------- */

:root {
  /* Primære — logoets to halvdele */
  --ny-blaa:        #1170F5;
  --ny-groen:       #37C36E;

  /* Sekundære — de bærende flader */
  --ny-moerkegraa:  #28232D;
  --ny-sand:        #F0F0E6;
  --ny-hvid:        #FFFFFF;

  /* Tertiære — kun til data, aldrig baggrund */
  --ny-moerkegraa-55: #50465A;
  --ny-sand-40:       #F5F5EE;
  --ny-lyseblaa:      #B9DCFF;
  --ny-lysegroen:     #A5EBBE;

  /* Afledte roller */
  --grund:    var(--ny-sand);
  --flade:    var(--ny-hvid);
  --blaek:    var(--ny-moerkegraa);
  --daempet:  var(--ny-moerkegraa-55);
  --streg:    #DEDED2;      /* sand, en tand mørkere — hårstreg på hvid */
  --skinne:   var(--ny-moerkegraa);
  --link:     var(--ny-blaa);

  /* Kontrastfladen — advarsler, afvist-status, loginbåndet.
     I lys tilstand er mørkegrå palettens kraftigste udsagn. I mørk tilstand
     ville den være usynlig mod flader, der SELV er mørkegrå, så den vender om.
     Uden det forsvandt både loginbåndet, olietanksadvarslen og afvist-mærkatet
     i mørk tilstand — målt, ikke gættet. */
  --kontrast-flade: var(--ny-moerkegraa);
  --kontrast-tekst: var(--ny-sand);

  --radius:   6px;
  /* Målt på en 2560 px skærm brugte 72rem kun 45 % af bredden — 704 px
     spildt i hver side, mens bygningstabellens ni kolonner sad i klemme.
     104rem giver 65 % dér og fuld bredde fra 1664 px og ned. */
  --maal:     104rem;
}

/* Mørk tilstand er brandlovlig: guiden dækker eksplicit grafer og farvet tekst
   på mørkegrå bund, og på digitale flader står blå og grøn i 100 %. Blå på
   mørkegrå giver dog kun 3,4:1, så links skifter til Lyseblå (10,8:1). */
@media (prefers-color-scheme: dark) {
  :root {
    --grund:   #1C1820;
    --flade:   var(--ny-moerkegraa);
    --blaek:   var(--ny-sand);
    --daempet: #A9A2B0;
    --streg:   #3A3341;
    --skinne:  #17141B;
    --link:    var(--ny-lyseblaa);
    --kontrast-flade: var(--ny-sand);
    --kontrast-tekst: var(--ny-moerkegraa);
  }
}
:root[data-tema="lys"] {
  --grund: var(--ny-sand); --flade: var(--ny-hvid); --blaek: var(--ny-moerkegraa);
  --daempet: var(--ny-moerkegraa-55); --streg: #DEDED2;
  --skinne: var(--ny-moerkegraa); --link: var(--ny-blaa);
  --kontrast-flade: var(--ny-moerkegraa); --kontrast-tekst: var(--ny-sand);
}
:root[data-tema="moerk"] {
  --grund: #1C1820; --flade: var(--ny-moerkegraa); --blaek: var(--ny-sand);
  --daempet: #A9A2B0; --streg: #3A3341; --skinne: #17141B;
  --link: var(--ny-lyseblaa);
  --kontrast-flade: var(--ny-sand); --kontrast-tekst: var(--ny-moerkegraa);
}

/* --- Grundlag ------------------------------------------------------------ */

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--blaek);
  font-family: var(--brand-skrift);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--ny-blaa);
  outline-offset: 2px;
}

/* --- Logomærket: brandets atom ------------------------------------------
   Det afrundede felt delt i blå og grøn. Det optræder tre steder — i skinnen,
   som sektionsmarkør og på loginkortet — og er systemets eneste ornament. */

.maerke {
  display: inline-block;
  border-radius: 3px;
  background: linear-gradient(to right, var(--ny-blaa) 0 50%, var(--ny-groen) 50% 100%);
  flex: none;
}
.maerke--skinne { width: 26px; height: 26px; border-radius: 3px; }
.maerke--sektion { width: 34px; height: 4px; border-radius: 1px; }
.maerke--stor { width: 52px; height: 52px; border-radius: 6px; }

/* --- Skinnen: den mørkegrå top ------------------------------------------- */

.skinne {
  background: var(--skinne);
  position: sticky; top: 0; z-index: 20;
}
.skinne__ind {
  max-width: var(--maal);
  margin: 0 auto;
  padding: .75rem 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.skinne__navn {
  display: flex; align-items: center; gap: .6rem;
  color: var(--ny-hvid); text-decoration: none;
  font-weight: 500; font-size: 1.125rem; letter-spacing: -.01em;
  white-space: nowrap;
}
.skinne__navn:hover { text-decoration: none; }
.skinne__navn b { font-weight: 500; }

.soeg { flex: 1 1 18rem; display: flex; gap: .5rem; min-width: 0; }
.soeg input {
  flex: 1; min-width: 0;
  padding: .65rem .85rem;
  font: inherit; font-size: 1rem;
  color: var(--ny-hvid);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
}
.soeg input::placeholder { color: rgba(255,255,255,.55); }
.soeg input:focus { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }

.bruger {
  display: flex; align-items: center; gap: .7rem;
  color: rgba(255,255,255,.72); font-size: .875rem; white-space: nowrap;
}
.bruger form { margin: 0; }

/* Temaskifter.
 *
 * Knappen viser det tema, man skifter TIL — måne i lys visning, sol i mørk.
 * Det omvendte (vis nuværende tilstand) er også en gængs løsning, men her
 * er knappen en handling, ikke en indikator: baggrunden bag den fortæller
 * allerede tydeligt, hvilken tilstand man er i.
 *
 * Ikonerne er tegnede SVG'er med samme 1,75 stregtykkelse som
 * advarselstrekanten. Emoji og glyffer er udelukket i DESIGN.md.
 */
.tema { padding: .4rem .5rem; line-height: 0; }
.tema svg { display: none; }
:root[data-tema="lys"]   .tema__maane { display: block; }
:root[data-tema="moerk"] .tema__sol   { display: block; }

/* På telefonen brød skinnen i tre rækker — navn, søgefelt, bruger — og åd
   175 px, før det første tal kom til syne. Mægleren har fem minutter i bilen,
   så navnet og Log ud deler række med mærket, og søgefeltet får sin egen.
   Brugerens eget navn ryger ud: han ved godt, hvem han er. */
@media (max-width: 34rem) {
  .skinne__ind { gap: .6rem .75rem; }
  .bruger { margin-left: auto; }
  .bruger span { display: none; }
  .soeg { order: 3; flex-basis: 100%; }
}

/* --- Knapper ------------------------------------------------------------- */

.knap {
  padding: .65rem 1.1rem;
  font: inherit; font-weight: 500; font-size: 1rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--ny-blaa); color: var(--ny-hvid);
  cursor: pointer; white-space: nowrap;
}
.knap:hover { background: #0B5FD8; }
.knap--klar {
  background: transparent; color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.28); font-size: .875rem; padding: .4rem .8rem;
}
.knap--klar:hover { background: rgba(255,255,255,.1); color: var(--ny-hvid); }
.knap--fuld { width: 100%; }

/* --- Sidens krop --------------------------------------------------------- */

.krop { max-width: var(--maal); margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }

/* ⚠️ AFLØST af temaskifteren, og ikke i brug i markup.
 *
 * Den blev lavet, før knappen fandtes. Sætter man den på et element, vinder
 * den over brugerens valg, fordi den skriver de samme variabler direkte på
 * elementet — knappen skriver dem på :root. Resultatet er en side, hvor
 * skifteren ikke længere gør noget, uden at nogen har rørt skifteren.
 *
 * Behold den kun, hvis en flade med vilje skal være lys uanset valget.
 *
 * Lys variant: hvid bund i stedet for sand.
 *
 * Den skifter TOKENS, ikke bare background og color. To grunde:
 *
 *   Dataflader er hvide i forvejen (--flade). På en hvid bund forsvandt de og
 *   stod kun tilbage med deres 1px-streg — samme fælde som mørkegrå-på-mørkegrå
 *   i mørk tilstand. --flade rykker derfor til Sand 40 %, så toneadskillelsen
 *   bevares uden at indføre en skygge.
 *
 *   Alt under .krop læser sine farver fra variabler, så et enkelt sæt her
 *   følger med ned i tabeller, mærkater, hjælpetekst og advarsler.
 *
 * Teksten er brandets blæk, Mørkegrå #28232D, ikke #000 — Nyboligs palet
 * indeholder ikke ægte sort, og en opfundet farve ville bryde Ingen-rød-reglens
 * princip om ikke at tilføje farver, brandet ikke ejer.
 *
 * Varianten tvinger lys uanset systemtema. Det er meningen med "lys version";
 * skal den kun gælde i lys tilstand, skop den under :root[data-tema="lys"].
 */
.krop--lys {
  --grund:          var(--ny-hvid);
  --flade:          var(--ny-sand-40);
  --blaek:          var(--ny-moerkegraa);
  --daempet:        var(--ny-moerkegraa-55);
  --streg:          #DEDED2;
  --link:           var(--ny-blaa);
  --kontrast-flade: var(--ny-moerkegraa);
  --kontrast-tekst: var(--ny-sand);

  background: var(--grund);
  color: var(--blaek);
}

.tilbage {
  display: inline-block; margin: 0 0 1.25rem;
  font-size: .875rem; color: var(--daempet);
  text-decoration: none;
}
.tilbage:hover { color: var(--blaek); text-decoration: underline; }

h1 { font-size: 1.875rem; font-weight: 500; letter-spacing: -.02em; margin: 0 0 .25rem;
     text-wrap: balance; }
h2 { text-wrap: balance; }

/* Sektionsoverskrift — mærket ovenover, ikke en etiket foran.
   Der er mere luft over en overskrift end under. */
.sektion { margin: 2.75rem 0 0; }
.sektion:first-of-type { margin-top: 0; }
.sektion > h2 {
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em;
  margin: .7rem 0 .85rem;
}
.sektion__antal { color: var(--daempet); font-weight: 400; }

/* --- Nøgletallene: fladens vigtigste blok -------------------------------
   Mægleren i bilen skal kunne læse dem på armslængde. Boligarealet er ikke
   sidestillet med de to andre — det er det, en vurdering hviler tungest på,
   så det fylder hele bredden på telefonen. */

.noegletal {
  display: grid; gap: 1px;
  grid-template-columns: 1fr 1fr;
  background: var(--streg);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 1.5rem;
}
.noegletal > div { background: var(--flade); padding: 1.1rem 1.25rem 1.25rem; }
.noegletal > div:first-child { grid-column: 1 / -1; }
.noegletal dt {
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--daempet); margin: 0 0 .35rem;
}
.noegletal dd {
  margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  font-size: clamp(2.25rem, 11vw, 3.25rem);
}
.noegletal > div:not(:first-child) dd { font-size: clamp(1.75rem, 8vw, 2.5rem); }
.noegletal .enhed {
  font-size: .45em; font-weight: 500; letter-spacing: 0; color: var(--daempet);
  margin-left: .15em;
}
.noegletal .tom { color: var(--daempet); font-weight: 500; }

/* Underetiket på et sammensat tal: hvad det er lavet af.
   ⚠️ Den står på ETIKETTEN, ikke ved værdien. "Grundareal · 2 matrikler"
   forklarer hvad tallet ER; "16.980 m² · 2 matrikler" læses som om der er to
   tal. Uden versaler og spærring, så den ikke konkurrerer med etiketten selv. */
.dt__note {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  color: var(--daempet);
}
.dt__note::before { content: " · "; }

/* --- Identifikatorerne under adressen ----------------------------------- */

.chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 1.25rem;
}

/* På bred skærm står alle tre i én række, men størrelsesforskellen bliver.
   Et brud, hvor boligarealet holder op med at være det største tal, ville
   flytte hierarkiet ved en tilfældig bredde — clamp'ene gør arbejdet selv. */
@media (min-width: 46rem) {
  .noegletal { grid-template-columns: repeat(3, 1fr); }
  .noegletal > div:first-child { grid-column: auto; }
}

/* Vurderingens to beløb. Samme visuelle vægt som nøgletallene — en
   ejendomsværdi er ikke en detalje i et opslagsværk.

   Stablet på smal skærm, ikke to og to: "1.083.000 kr" ved den tredje
   clamp-værdi fylder over 200 px, og to af dem side om side på 390 px ville
   knække midt i beløbet. Grundværdien er den underordnede af de to, så den
   står nedenunder frem for at presse begge sammen. */
.noegletal--par > div,
.noegletal--par > div:first-child { grid-column: 1 / -1; }
.noegletal--par > div dd { font-size: clamp(1.75rem, 8vw, 2.5rem); }

@media (min-width: 46rem) {
  .noegletal--par { grid-template-columns: 1fr 1fr; }
  .noegletal--par > div,
  .noegletal--par > div:first-child { grid-column: auto; }
}

/* --- Foldbart: historik og udregninger ----------------------------------- */

/* Tyve års vurderinger hører ikke øverst på siden. De skal kunne findes, ikke
   scrolles forbi — derfor lukket som udgangspunkt.

   .udfold er den SAMME visuelle form til et andet formål: boligskattens
   regnestykke. To navne og ét regelsæt, fordi det er én form — et andet
   udseende ville få mægleren til at tro, de to opfører sig forskelligt. */
.historik,
.udfold { margin-top: 1rem; }
.historik summary,
.udfold summary {
  cursor: pointer;
  padding: .7rem 1rem;
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  background: var(--flade);
  font-weight: 500;
  list-style-position: inside;
}
.historik summary:hover,
.udfold summary:hover { border-color: var(--daempet); }
.historik[open] summary,
.udfold[open] summary { margin-bottom: 1rem; }

/* --- Datafelter: rækker, ikke kort i kort -------------------------------- */

.felt {
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  overflow: hidden;
}
.felt + .felt { margin-top: 1rem; }

.par { margin: 0; }
.par > div {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 1rem;
  padding: .7rem 1.25rem;
  border-bottom: 1px solid var(--streg);
}
.par > div:last-child { border-bottom: 0; }
.par dt { color: var(--daempet); font-size: .875rem; }
.par dd { margin: 0; }

/* ⚠️ Bredere spalte gør IKKE datarækker bedre af sig selv.
   Ved 72rem var værdikolonnen allerede 814 px bred til at vise "894 m²", og
   etiketten stod en halv skærm fra sin værdi. At strække den yderligere ville
   have gjort skaden større, ikke mindre.
   Fra 64rem står to fakta pr. række i stedet. Bredden bliver brugt, øje-vejen
   fra etiket til værdi bliver kortere, og siden bliver kortere at scrolle —
   det tæller på den skærm, der står på et skrivebord. */
@media (min-width: 64rem) {
  .par { display: grid; grid-template-columns: 1fr 1fr; }
  /* Etiketten snævres ind, når rækken halveres. Med den brede etiket fra
     enkeltspalten blev den 240 px mod værdiens 194 — den sekundære oplysning
     fyldte mest. Etiketterne er korte; 12rem rummer "Opdelt i ejerlejligheder". */
  .par > div {
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    border-bottom: 1px solid var(--streg);
  }
  /* Lodret skel mellem de to spalter, i samme hårstreg som resten. */
  .par > div:nth-child(odd) { border-right: 1px solid var(--streg); }
  /* Sidste række må ikke have bundstreg — uanset om den er hel eller halv. */
  .par > div:last-child,
  .par > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

@media (max-width: 34rem) {
  .par > div { grid-template-columns: 1fr; gap: .1rem; padding: .65rem 1rem; }
  .par dt { font-size: .875rem; }
}

/* --- Tabeller ------------------------------------------------------------ */

.rul { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.rul table { min-width: 34rem; }

/* Bygningstabellen har ni kolonner. Med 1,25 rem i hver side gik 360 px til
   ren polstring, og "101 m²" knækkede over to linjer midt i et areal.
   Tabelceller får derfor deres egen, strammere rytme end datarækkerne. */
th, td {
  text-align: left; padding: .7rem .85rem;
  border-bottom: 1px solid var(--streg);
}
th:first-child, td:first-child { padding-left: 1.25rem; }
th:last-child,  td:last-child  { padding-right: 1.25rem; }
tr:last-child td { border-bottom: 0; }

/* Et tal og dets enhed er ét udsagn og må aldrig brydes. */
td.tal, th.tal { white-space: nowrap; }
th {
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--daempet);
  background: var(--ny-sand-40);
}
@media (prefers-color-scheme: dark) { th { background: rgba(255,255,255,.04); } }
:root[data-tema="moerk"] th { background: rgba(255,255,255,.04); }
:root[data-tema="lys"] th { background: var(--ny-sand-40); }

tbody tr:hover td { background: color-mix(in srgb, var(--ny-blaa) 5%, transparent); }
.tal { text-align: right; }

/* Gruppeoverskrift i salgshistorikken — én adresse ad gangen.

   ⚠️ En moderejendom har ét BFE og mange boliger: BFE 5341256 har 64 sager på
   35 adresser. Uden en overskrift ville en sælger se fem naboers handler
   blandet ind i sin egen. Rækken vises KUN, når ejendommen har flere adresser
   med sager — på en villa ville den være støj.

   Den arver `th`-reglens sandbund, så mørk tilstand følger med af sig selv.
   Kun versalerne og den dæmpede farve slås fra: en adresse er ikke en
   kolonneetiket, den er et navn. */
.sag-gruppe th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--blaek);
  font-family: var(--brand-skrift);
}
.sag-gruppe + tr td, .sag-gruppe th { border-top: 1px solid var(--streg); }

/* --- Resultatlisten ------------------------------------------------------ */

/* ⚠️ Adressen får AL overskydende bredde — ikke en procentdel af den.
   `width: 100%` på én kolonne i en tabel med automatisk fordeling betyder
   "tag alt, de andre ikke har brug for", og de andre bærer tal med kendt
   længde. Faste procenter ville skulle regnes om, hver gang en kolonne kom
   til, og et beløb, der ikke passede, ville flyde ud over sin nabo. */
.liste th:first-child, .liste td:first-child { width: 100%; }

/* Syv kolonner kan ikke deles på en telefonskærm uden at et beløb knækker.
   Listen ruller vandret i stedet — .rul er der allerede. */
.rul .liste { min-width: 48rem; }

/* Ingen af tallene må ombryde — og heller ikke postnummeret, som ellers er
   det eneste, der kunne give efter og dermed skifte bredde fra side til side. */
.liste td, .liste th { white-space: nowrap; }
.liste td:first-child { white-space: normal; }

/* Anvendelsen forkortes hellere end at stjæle plads fra adressen. Grænsen
   sidder på et span og ikke på cellen: i en tabel med automatisk fordeling
   vokser en celle med sit indhold, uanset hvad der står på den — kun et
   element INDE i cellen kan holde bredden nede. Cellen bærer title, så den
   fulde tekst kan læses uden at åbne ejendommen. */
.liste .klip {
  display: block; max-width: 15rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liste__adr { font-weight: 500; }

/* ⚠️ Adressen er ikke et link mellem to sætninger — den er rækkens navn, og
   halvtreds understregede blå adresser under hinanden læses som et gitter af
   streger frem for en liste. Linket beholder sin rolle (tabulator, ny fane,
   skærmlæser) og mister kun sin farve; hele rækken lyser op ved hover, så
   det stadig fremgår, at der kan klikkes. */
.liste a { color: inherit; text-decoration: none; }
.liste tr:hover .liste__adr { text-decoration: underline; text-underline-offset: 2px; }

/* Rækken er klikbar i sin helhed — se udtraek.php. Uden markøren er det en
   skjult funktion. */
.liste tbody tr[data-href] { cursor: pointer; }
.liste tbody tr:hover td { background: color-mix(in srgb, var(--ny-blaa) 7%, transparent); }

/* Tastaturbrugeren rammer linket, ikke rækken. Så markeres HELE rækken — men
   linkets egen ring bliver stående, så markeringen ikke forsvinder i en
   browser uden :has(). To markeringer er bedre end ingen. */
.liste tr:has(a:focus-visible) td {
  background: color-mix(in srgb, var(--ny-blaa) 12%, transparent);
  box-shadow: inset 0 2px 0 var(--ny-blaa), inset 0 -2px 0 var(--ny-blaa);
}

/* --- Matrikelkortet ------------------------------------------------------ */

/* Kortet er en DATAFLADE som alle andre: hvid bund, hårstreg, 6px hjørner.
   Ingen skygge — systemet har ingen. Se Elevation & Depth i DESIGN.md. */
/* ⚠️ Bundet bredde. Fladen er 104rem bred, og et kvadratisk kort i fuld
   bredde bliver 1.100 px højt — det skubber ejendommens tal ud af skærmen og
   gør et opslagsværk til en plakat. Matriklens omrids er læsbart ved 30rem,
   og så kan billedet og tallene ses i samme blik. */
.kort {
  margin: 0 0 1.25rem;
  max-width: 30rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  overflow: hidden;
}

/* --- Toppen: de tre tal og billedet ------------------------------------- */

/* ⚠️ Det er ÉT udsagn, ikke to. Hvor stort, hvor gammelt — og hvordan ser det
   ud. Tallene stod før i en vandret række over hele bredden med billedet langt
   nede på siden; man kunne ikke se husets form og dets størrelse i samme blik.

   Fra 64rem står tallene under hinanden i en smal spalte med kortet til højre.
   Samme brudpunkt som datarækkernes to spalter, så hele siden skifter layout
   på én gang frem for i to tempi.

   Under 64rem er der ikke plads til begge dele ved siden af hinanden: tallene
   beholder deres vandrette gitter, og kortet lægger sig under. */
@media (min-width: 64rem) {
  /* ⚠️ Venstre spalte er 50 %, fordi vurderingens to beløb nedenunder deler
     bredden på midten. Ejendomsværdiens højre kant og nøgletallenes falder
     dermed på samme lodrette linje, og siden får ét gitter i stedet for to.
     En spalte på 22rem så vilkårlig ud, netop fordi den ikke flugtede med
     noget.

     Kortet tager resten. Det bliver aldrig 760 px højt som med fuld bredde —
     halvdelen af fladen er halvdelen af højden, når billedet er kvadratisk. */
  .top--kort {
    display: grid;
    grid-template-columns: 50% minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
  }

  /* ⚠️ Tallene stables KUN når der er et kort ved siden af. Uden kort har de
     hele bredden, og tre store tal under hinanden ville blive en søjle med
     luft omkring — signaturelementet er en RÆKKE, når der er plads til det. */
  .top--kort .noegletal {
    grid-template-columns: 1fr;
    margin: 0;
  }
  /* Boligarealet spænder ikke længere over noget; alle tre er lige brede. */
  .top--kort .noegletal > div:first-child { grid-column: auto; }

  /* Ruderne fylder deres egen spalte ud; max-width hører til den stablede
     visning, hvor der ikke er nogen spalte at fylde. */
  .top--kort .kort { max-width: none; margin: 0; }
}

/* --- Kortparret: matriklen og luftfotoet -------------------------------- */

/* ⚠️ VED SIDEN AF hinanden, ikke over.

   Stablet ville højre spalte blive omkring 1.600 px høj mod de tre tals ~300 —
   præcis den plakat, advarslen over .kort siger nej til. Side om side er
   parret ~440 px højt, altså LAVERE end den ene kvadratiske rude, det
   afløser. To ruder gjorde toppen kortere, ikke længere.

   Sidegevinst, og den er målt: ruden bliver ~390 px bred, og serveren leverer
   600. Før blev de 600 strakt til 800 på en maksimeret flade — nu nedskaleres
   de i stedet, og skellets hårstreger bliver skarpe frem for bløde.

   ⚠️ TO SPALTER VED ENHVER BREDDE — parret har intet brudpunkt.

   Første udgave stablede dem under 64rem, og målt 2026-08-07 i tre bredder
   var det galt på to måder på én gang:

   | 375 px | to fuldbredde-kvadrater = ~900 px billede før første datafelt |
   | 768 px | ruden bundet til 30rem, så 270 px stod tomt ved siden af den |

   På telefonen skulle mægleren rulle forbi halvanden skærm billede for at nå
   et tal; på tabletten så siden i stykker, fordi max-width holdt ruden smal i
   en spalte, der var bredere. Begge dele forsvinder med to spalter: 175 px pr.
   rude på en telefon, 370 px på en tablet — og parret fylder ~200 px i stedet
   for 900.

   175 px er et GLIMT, ikke et arbejdskort. Det er også hele pointen: skal
   mægleren måle noget på en telefon, åbner han det interaktive kort, som
   nedenfor får hele bredden. */
.kortpar { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.kortpar .kort { margin: 0; max-width: none; }
/* Noten hører til begge ruder og spænder derfor over dem. */
.kortpar__note { margin: 0; grid-column: 1 / -1; }

/* ⚠️ Det ÅBNEDE kort tager hele bredden på telefon og tablet. En Leaflet-flade
   på 175 px kan man ikke panorere i — der er ikke plads til både et hus og en
   finger. Fotoet lægger sig under, og det er den rigtige rangorden i det
   øjeblik: mægleren har lige bedt om kortet.

   På desktop bliver det stående i sin spalte. Dér er ruden 390 px, og et skift
   ville flytte fotoet under kortet ved et klik — et layouthop uden gevinst. */
@media (max-width: 63.999rem) {
  .kortpar .kort--aabent { grid-column: 1 / -1; }
}

/* ⚠️ Leaflets knapper venter, til kortet er vokset — men KUN på telefon.
   Målt: zoom, lagvælger og målestok dækker tilsammen omkring en tredjedel af
   en rude på 152 px, og så ser man knapper frem for ejendom. Fingeren kan
   zoome uden dem, og i det sekund ruden bliver 320 px, er der plads.

   ⚠️ Grænsen er 34rem og ikke 64rem som ovenfor, og det er med vilje: de to
   regler svarer på hver sit. At VOKSE handler om, hvor lidt man kan panorere i
   — det gælder helt op til desktop. At skjule knapper handler om PROPORTION,
   og ved 34rem er ruden allerede 245 px, hvor knapperne fylder en tiendedel.
   Ét brudpunkt til begge ville gøre den ene af dem forkert. 34rem er i forvejen
   stilarkets telefongrænse.

   Kildeangivelsen bliver stående. Den er ikke pynt, og den er i dag det eneste
   sted, kortets ophav overhovedet står. */
@media (max-width: 34rem) {
  .kortpar .kort:not(.kort--aabent) .leaflet-control-zoom,
  .kortpar .kort:not(.kort--aabent) .leaflet-control-scale,
  .kortpar .kort:not(.kort--aabent) .kort__fuld,
  .kortpar .kort:not(.kort--aabent) .kort__skifter,
  /* ⚠️ Arealmærkaterne med. De er ikke pynt, men på 152 px lå "7d · 1.064 m²"
     og "7a · 391 m²" oven i hinanden OG oven i kildeangivelsen. Det blå felt
     siger allerede dét, ruden skal sige på en telefon — her er ejendommen — og
     arealet står i forvejen som Grundareal lige ovenover. */
  .kortpar .kort:not(.kort--aabent) .kort__maerkat { display: none; }
}

/* ⚠️ Kvadratisk, fordi udsnittet er det. Serveren beder om 700×700 og
   skalerer efter grundarealet; presses billedet ind i et andet forhold,
   passer målestokken ikke længere til det, der står ved siden af. */
/* ⚠️ `>` og ikke et efterkommer-mellemrum. Leaflets fliser er OGSÅ `img` inde
   i `figure.kort`, og en baggrundsfarve på en flise er en UIGENNEMSIGTIG flade
   på 512×512. De to gennemsigtige overlejringer malede derfor sandfarve hen
   over baggrundskortet under sig, og det interaktive kort har stået uden
   baggrund, siden det blev indført 2026-08-07.

   Fejlen sagde ikke fra: fliserne var hentet, indlæst, korrekt placeret og
   fuldt synlige i DOM'en. Den kunne kun ses ved at hæve bundlagets z-index og
   se billedet dukke op. Det statiske billede er direkte barn af figuren;
   fliserne ligger flere niveauer nede. */
.kort > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  /* Sandfladen er det, ruden viser, MENS billedet hentes — ikke kortets bund.
     Bunden er `forvaltning2/Basis_kort`, som vi fandt 2026-08-07, og som
     denne regel altså skjulte i to dage. */
  background: var(--ny-sand-40);
}
@media (prefers-color-scheme: dark) { .kort > img { background: #2A2630; } }
:root[data-tema="moerk"] .kort > img { background: #2A2630; }
:root[data-tema="lys"]   .kort > img { background: var(--ny-sand-40); }

.kort figcaption { padding: .7rem 1.25rem; border-top: 1px solid var(--streg); }

/* ⚠️ Lærredet arver billedets kvadratiske forhold. Uden en højde har en
   Leaflet-beholder 0 px, og kortet ville være usynligt uden en fejlbesked. */
.kort__lærred { width: 100%; aspect-ratio: 1; background: var(--ny-sand-40); }

/* ⚠️ På fuld skærm må det kvadratiske forhold IKKE følge med.

   En skærm er bredere end den er høj. `aspect-ratio: 1` gør derfor lærredet
   2.560 px højt på en 2.560 px bred skærm — næsten dobbelt så højt som
   vinduet. Leaflet måler den beholder, tegner fliser til midten af den, og
   resten står som Leaflets grå standardflade. Målt 2026-08-09: ruden viste et
   kortudsnit på 1.024×614 nede i midten af en 2.560×1.384 skærm.

   Fejlen ligner et kort, der ikke kan finde ud af at fylde skærmen. Den er i
   virkeligheden et kort, der fylder for meget. `invalidateSize()` i kort.js
   gør sit arbejde korrekt — den måler bare en beholder med en forkert højde. */
.kort:fullscreen { display: flex; flex-direction: column; }
.kort:fullscreen .kort__lærred {
  width: 100%; height: 100%; aspect-ratio: auto; flex: 1; min-height: 0;
}

/* Leaflets egne flader skal følge systemet, ikke sin egen standard.
   ⚠️ Skriftstørrelsen er etiket-trinnet (0,8125rem), ikke Leaflets 11px.
   Rampen har seks trin — se Seks-trins-reglen i DESIGN.md. Et bibliotek, vi
   henter ind, skal rette sig efter systemet, ikke omvendt. */
.kort__lærred .leaflet-control-attribution,
.kort__lærred .leaflet-control-scale-line {
  background: color-mix(in srgb, var(--flade) 88%, transparent);
  color: var(--daempet);
  font-family: var(--brugs-skrift); font-size: .8125rem;
}
.kort__lærred .leaflet-bar a {
  background: var(--flade); color: var(--blaek); border-bottom-color: var(--streg);
}
.kort__lærred .leaflet-bar a:hover { background: var(--ny-sand-40); }

/* --- Bundskifteren: et miniaturebillede af det, man skifter TIL ---------- */

/* ⚠️ Et BILLEDE og ikke et ikon. Den platform, vi erstatter, viser en lille
   rude med det, man får — man behøver ikke vide, hvad et lagikon betyder.
   De to miniaturer er de samme URL'er, siden allerede har hentet, så de koster
   ingen bytes. */
.kort__skifter {
  display: block; position: relative;
  width: 4.5rem; height: 4.5rem; padding: 0;
  border: 2px solid var(--flade); border-radius: var(--radius);
  background: var(--ny-sand-40); overflow: hidden;
  cursor: pointer;
}
.kort__skifter img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kort__skifter span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .15rem .35rem;
  /* ⚠️ Skrim-reglen — se DESIGN.md. Etiketten står på et FOTO, og en
     palettefarve ville skifte betydning med temaet: `--blaek` er mørk i lys
     tilstand og lys i mørk, så teksten blev ulæselig hver anden gang. Dette er
     palettens eneste undtagelse, og den gælder kun oven på fotografier. */
  background: rgba(0,0,0,.6); color: #fff;
  font-family: var(--brugs-skrift); font-size: .8125rem; font-weight: 600;
  text-align: left;
}

/* Fuld skærm. Samme størrelse og flade som Leaflets egne knapper, så de to
   ikke ser ud som to systemer. */
.kort__lærred .kort__fuld {
  display: block; width: 30px; height: 30px;
  line-height: 30px; text-align: center; font-size: 1rem;
  text-decoration: none;
}

/* --- Nabo-boblen: hvad ligger under det punkt? -------------------------- */

/* Klik på et jordstykke svarer med matrikelnummer, areal og — hvis vi har
   ejendommen — et link.

   ⚠️ INGEN SKYGGE. Leaflets popup har `box-shadow: 0 3px 14px rgba(0,0,0,.4)`
   som standard, og Fladhedsreglen i DESIGN.md siger, at systemet ingen skygger
   har: dybde er tone og streg. Uden denne blok ville et hentet bibliotek
   indføre den ene ting, designsystemet udtrykkeligt har fravalgt — og den ville
   se ud som et valg, nogen havde truffet.

   Alt bæres af variabler, så boblen følger mørk visning af sig selv. */
.kort__lærred .leaflet-popup-content-wrapper,
.kort__lærred .leaflet-popup-tip {
  background: var(--flade);
  color: var(--blaek);
  border: 1px solid var(--streg);
  box-shadow: none;
}
.kort__lærred .leaflet-popup-content-wrapper { border-radius: var(--radius); }
.kort__lærred .leaflet-popup-content {
  margin: .6rem .8rem;
  font-family: var(--brugs-skrift);
  font-size: .875rem;      /* small-trinnet — se Seks-trins-reglen */
  line-height: 1.45;
}
/* Understregningsreglen: Nybolig Blå på hvid måler 4,46:1, altså 0,04 under
   AA for brødtekst. Farven må derfor aldrig stå alene som signal. */
.kort__lærred .leaflet-popup-content a {
  color: var(--ny-blaa); text-decoration: underline;
}
.kort__lærred .leaflet-popup-close-button { color: var(--daempet); }
.kort__lærred .leaflet-popup-close-button:hover { color: var(--blaek); }

/* --- Arealmærkaten på jordstykket --------------------------------------- */

/* ⚠️ Ingen ramme, ingen hale. Leaflets egen tooltip er en boble med spids, og
   femten bobler på et kort er femten forstyrrelser. Her skal tallet se ud som
   om det er TRYKT på jordstykket, som på et matrikelkort. */
.kort__lærred .kort__maerkat,
.kort__lærred .kort__maerkat::before {
  background: none; border: 0; box-shadow: none; padding: 0;
}
.kort__lærred .kort__maerkat {
  color: var(--blaek);
  font-family: var(--brugs-skrift); font-size: .8125rem; font-weight: 600;
  white-space: nowrap;
  /* Tallet står på luftfoto såvel som kort. Et smalt lyst omrids holder det
     læsbart på begge uden en kasse omkring. */
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* --- BFE-nummeret: ejendommens identitet -------------------------------- */

.bfe {
  font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em;
}

/* --- Mærkater ------------------------------------------------------------ */

/* Målt kontrast på hver variant, fordi de bærer status og ikke må gætte:
   lyseblå 8,0:1 · lysegrøn 7,5:1 · neutral 8,1:1 · afvist 13,4:1. */
.mrk {
  display: inline-block; padding: .15rem .6rem;
  border-radius: 999px; font-size: .8125rem; font-weight: 500;
  background: var(--ny-lyseblaa); color: #0A3A6B;
  white-space: nowrap;
}
.mrk--groen   { background: var(--ny-lysegroen); color: #0B4A29; }
.mrk--neutral { background: var(--ny-sand-40); color: var(--ny-moerkegraa-55); }
.mrk--afvist  { background: var(--kontrast-flade); color: var(--kontrast-tekst); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  background: var(--ny-sand-40);
  color: var(--blaek);
  padding: .1rem .35rem; border-radius: 3px;
}
@media (prefers-color-scheme: dark) { code { background: rgba(255,255,255,.07); } }
:root[data-tema="moerk"] code { background: rgba(255,255,255,.07); }
:root[data-tema="lys"] code { background: var(--ny-sand-40); }

/* --- Advarsel: mørkegråt fuldt felt -------------------------------------
   Paletten har ingen rød. Det her er dens kraftigste værdikontrast, og en
   olietank med overskredet sløjfningsfrist kan stoppe en handel. */

.advarsel {
  background: var(--kontrast-flade);
  color: var(--kontrast-tekst);
  border-radius: var(--radius);
  padding: .9rem 1.25rem;
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: 1rem;
}
.advarsel svg { flex: none; margin-top: .1rem; }
.advarsel b { font-weight: 500; }
.advarsel--lille {
  display: inline-flex; padding: .15rem .6rem; border-radius: 999px;
  font-size: .8125rem; align-items: center; gap: .35rem;
}

/* --- Rå kode: princippet gjort synligt ----------------------------------
   Et tal må aldrig se mere sikkert ud, end det er. En kode uden oversættelse
   vises som kode med prikket understregning — ikke som tom celle. */

.raa {
  color: var(--daempet);
  border-bottom: 1px dotted currentColor;
  cursor: help;
  font-size: .9375em;
}
.tom { color: var(--daempet); }

/* --- Hjælpetekst --------------------------------------------------------- */

.hjaelp { color: var(--daempet); font-size: .875rem; }
.maaling { color: var(--daempet); font-size: .875rem; margin: 0 0 1.25rem; }
.ingen { padding: 1.25rem; color: var(--daempet); }

/* --- Loginkortet --------------------------------------------------------- */

.login-side {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 1.5rem;
}
.login {
  width: 100%; max-width: 25rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: 10px;
  overflow: hidden;
}
.login__top {
  background: var(--skinne); color: var(--ny-hvid);
  padding: 1.75rem 1.75rem 1.5rem;
}
.login__top h1 {
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em;
  margin: 1rem 0 .2rem;
}
.login__top p { margin: 0; color: rgba(255,255,255,.65); font-size: .875rem; }
.login__krop { padding: 1.75rem; }

label {
  display: block; font-size: .8125rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--daempet); margin-bottom: .5rem;
}
.felt-ind {
  width: 100%; padding: .75rem .9rem;
  font: inherit; font-size: 1rem;
  color: var(--blaek); background: var(--grund);
  border: 1px solid var(--streg); border-radius: var(--radius);
}
.felt-ind:focus { border-color: var(--ny-blaa); }
.kode {
  text-align: center; font-size: 1.875rem; font-weight: 700;
  letter-spacing: .5rem; text-indent: .5rem;
}

.besked {
  padding: .75rem .9rem; border-radius: var(--radius);
  font-size: .875rem; margin-bottom: 1.25rem;
  border: 1px solid var(--streg);
}
.besked--fejl { background: var(--kontrast-flade); color: var(--kontrast-tekst); border-color: transparent; }
.besked--ok { background: var(--ny-lysegroen); color: #0B4A29; border-color: transparent; }

.sendt-til { text-align: center; margin: 0 0 1.25rem; color: var(--daempet); font-size: .875rem; }
.sendt-til b { display: block; color: var(--blaek); font-weight: 500; margin-top: .15rem; }

/* --- Statusfladen -------------------------------------------------------- */

.fliser {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  background: var(--streg); border: 1px solid var(--streg);
  border-radius: var(--radius); overflow: hidden;
}
.fliser > div { background: var(--flade); padding: 1rem 1.15rem; }
.fliser b { display: block; font-size: 1.875rem; font-weight: 700; letter-spacing: -.02em; }
.fliser span { color: var(--daempet); font-size: .875rem; }

/* --- Bevægelse: ét forfattet øjeblik -------------------------------------
   Nøgletallene stiger på plads én gang ved indlæsning, som markøren der
   falder på plads på et trykt mærke. Intet andet bevæger sig. */

@media (prefers-reduced-motion: no-preference) {
  .noegletal > div {
    animation: rejs .5s cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .noegletal > div:nth-child(2) { animation-delay: .06s; }
  .noegletal > div:nth-child(3) { animation-delay: .12s; }
}
@keyframes rejs {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Udtræk: filterskuffe og resultatliste -------------------------------
   Under 900 px er panelet en skuffe i fuld højde. Over folder det ud som
   sidebjælke — samme DOM, samme form, ingen JS afgør layoutet. */

.skuffe {
  border: 0; padding: 0; max-width: 100%; width: 100%;
  height: 100%; max-height: 100%;
  background: var(--flade); color: var(--blaek);
}
/* Skyggen bag skuffen er palettens mørkegrå med gennemsigtighed — ikke en
   sort, der ikke står i DESIGN.md. */
.skuffe::backdrop { background: var(--ny-moerkegraa); opacity: .5; }
.skuffe__top, .skuffe__bund {
  position: sticky; z-index: 1; display: flex; gap: .75rem;
  align-items: center; justify-content: space-between;
  padding: 1rem; background: var(--flade);
}
.skuffe__top  { top: 0;    border-bottom: 1px solid var(--streg); }
.skuffe__bund { bottom: 0; border-top: 1px solid var(--streg); }
/* Knappen i bunden er lys i skinnen, men står her på hvid flade. */
.skuffe__bund .knap--klar { color: var(--blaek); border-color: var(--streg); }
.skuffe__bund .knap--klar:hover { background: var(--grund); color: var(--blaek); }

.filtre { padding: 0 1rem 1rem; }
.gruppe { border-bottom: 1px solid var(--streg); }
.gruppe > summary {
  cursor: pointer; padding: .75rem 0;
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.gruppe > summary .hjaelp { text-transform: none; letter-spacing: 0; }
.gruppe[open] > summary { border-bottom: 1px solid var(--streg); }

.filter { padding: .75rem 0; }
.filter + .filter { border-top: 1px solid var(--streg); }
.interval { display: flex; gap: .5rem; align-items: center; }
.interval .felt-ind { min-width: 0; }

/* Afkrydsningsfeltets etiket er en sætning, ikke en overskrift — den skal
   ikke arve de store bogstavers versalisering fra label. */
.valg { display: grid; gap: .35rem; }
.afkryds {
  display: flex; gap: .55rem; align-items: baseline;
  margin: 0; text-transform: none; letter-spacing: 0;
  font-size: .875rem; font-weight: 400; color: var(--blaek);
  cursor: pointer;
}
.afkryds input { accent-color: var(--ny-blaa); flex: none; }
.vaelger { padding: .5rem; }

.fast-knap { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; }
.sider { display: flex; gap: 1rem; align-items: center; margin: 1.5rem 0 5rem; }
.sider .knap--klar { color: var(--blaek); border-color: var(--streg); }
.sider .knap--klar:hover { background: var(--flade); color: var(--blaek); }

/* Overskriftsbjaelken. Den spaender over begge spalter, saa filterpanel og
   resultat begynder i SAMME hoejde. Stod tallet og daekningsforbeholdet i
   indholdsspalten, ville tabellen starte 207 px under panelets overkant. */
.udtraek__top {
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--streg);
}
.udtraek__rad {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: flex-end; justify-content: space-between;
}
.udtraek__top h1 { margin: 0 0 .25rem; }
/* Ingen max-width. Med een blev "Se status" skubbet ned paa sin egen linje og
   kom til at ligne et element, der var faldet af. */
.udtraek__top .maaling { margin: 0; }
.udtraek__top .maerkater { margin: 1rem 0 0; }
/* Tallet er det, oejet skal finde foerst; forbeholdet staar lige ved siden af
   det, saa de to ikke kan laeses hver for sig. */
.udtraek__antal { color: var(--blaek); font-weight: 700; font-size: 1.125rem; }
.udtraek__handling {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.udtraek__handling .knap--klar { color: var(--blaek); border-color: var(--streg); }
.udtraek__handling .knap--klar:hover { background: var(--flade); color: var(--blaek); }

@media (min-width: 900px) {
  /* ⚠️ minmax(0, 1fr) og ikke 1fr. En gitterspalte er som udgangspunkt mindst
     saa bred som sit indhold, og `.rul table` har min-width: 34rem — uden
     minmax ville en bred tabel skubbe filterpanelet sammen. */
  .udtraek {
    display: grid; grid-template-columns: 22rem minmax(0, 1fr);
    column-gap: 2rem; align-items: start;
  }
  .udtraek__top     { grid-column: 1 / -1; grid-row: 1; }
  .udtraek__handling { align-items: flex-end; }

  /* ⚠️ `inset: auto` og `margin: 0` er ikke pynt. Browserens egen dialog-regel
     er `position: absolute; inset: 0; margin: auto`, og i et gitter betyder
     `margin: auto`, at panelet centreres LODRET i sit omraade. Panelet blev
     skubbet 509 px op over skaermkanten — synligt i DOM'en, usynligt for
     brugeren. Sticky holder det paa skaermen, mens listen rulles. */
  .skuffe {
    display: block; inset: auto; margin: 0;
    position: sticky; top: 1.5rem;
    grid-column: 1; grid-row: 2; align-self: start;
    height: auto; max-height: calc(100vh - 3rem); overflow-y: auto;
    width: auto; border: 1px solid var(--streg); border-radius: var(--radius);
  }
  .skuffe::backdrop { display: none; }
  .udtraek__ind { grid-column: 2; grid-row: 2; min-width: 0; }

  .fast-knap { display: none; }
  /* Skuffens hoved bliver panelets overskrift paa desktop. Uden den begynder
     spalten braat med "GEOGRAFI 3" og ser ud som et afskaaret element. */
  .skuffe__top { position: static; }
  .skuffe__top #luk { display: none; }
  .filtre { padding-top: 0; }
  /* Den faste knap er vaek, saa der skal ikke staa plads af til den. */
  .sider { margin-bottom: 1.5rem; }
}

/* --- Hvor brugsskriften gælder -------------------------------------------
   Ét sted, så grænsen mellem de to skrifter kan læses som en beslutning og
   ikke skal samles op af tredive spredte regler.

   BRANDET beholder: overskrifter, skinnen, nøgletallene, fliserne, knapperne
   — alt hvor skriften er identitet.
   BRUGSSKRIFTEN tager: alt hvor skriften er en arbejdsflade, som brugeren
   skal læse frem for at se. */

.skuffe, .felt-ind, select, textarea,
table, .par, .hjaelp, .maaling, .tom, .raa, label {
  font-family: var(--brugs-skrift);
}
/* Nøgletallene og fliserne står i brandet — de ER identiteten på siden. */
.noegletal dd, .noegletal dt, .fliser b, .fliser span { font-family: var(--brand-skrift); }

/* --- Mærkater: de aktive filtre ------------------------------------------
   Mærkaten er både kvittering og kontrol. Den siger hvad der er søgt efter,
   og den fjerner sig selv med ét klik — uden at skuffen skal åbnes. */

.maerkater { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.maerkat {
  display: inline-flex; gap: .5rem; align-items: baseline;
  border: 1px solid var(--streg); border-radius: 999px;
  padding: .3rem .5rem .3rem .8rem;
  font-family: var(--brugs-skrift); font-size: .875rem;
  color: var(--blaek); text-decoration: none; background: var(--flade);
}
.maerkat:hover { border-color: var(--ny-blaa); text-decoration: none; }
.maerkat b { font-weight: 500; }
.maerkat__x { color: var(--daempet); font-size: 1rem; line-height: 1; }
.maerkat:hover .maerkat__x { color: var(--ny-blaa); }
.maerkat--ryd { padding-right: .8rem; color: var(--daempet); }

/* Kun for skærmlæsere. Mærkatens × siger ingenting højtlæst. */
.skjult {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Nul-resultat-diagnostikken står inde i det tomme felt. */
.diagnose { padding: 0 0 .5rem; }
.diagnose > .hjaelp { padding: 0 1.25rem 1rem; }
.diagnose table { font-family: var(--brugs-skrift); }

/* --- Vurderingshistorikken: tabel og kurve side om side ------------------ */

/* Tabellen viser tallene, kurven viser formen. De tegner de SAMME rækker.

   ⚠️ Stablet under 64rem, to spalter over. Det er datarækkernes brudpunkt og
   ikke kortparrets — og de to skal ikke være ens.

   `.kortpar` har bevidst INTET brudpunkt, fordi stabling dér skubbede første
   datafelt 1.208 px ned på en telefon. Den bekymring findes ikke her: hele
   historikken ligger inde i en `<details>`, der er lukket som udgangspunkt, så
   den skubber ingenting, før mægleren selv åbner den. Valget står derfor frit
   på LÆSBARHED — og tyve års beløb i en 350 px bred kurve er ikke læsbart. */
.vurhist__graf { padding: .35rem 0 0; }

@media (min-width: 64rem) {
  .vurhist--par {
    display: grid;
    /* Tabellen har fire kolonner med kendt bredde; kurven skal have resten.
       `minmax(0, …)` fordi en SVG i et gitter ellers nægter at blive smallere
       end sit viewBox og skubber spalten ud. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }
  /* `.felt + .felt` giver ellers 1rem oven på gitterets egen gap. */
  .vurhist--par > .felt + .felt { margin-top: 0; }
}

.vurgraf { margin: 0; }
.vurgraf__svg {
  display: block; width: 100%; height: auto;
  /* Tabulære cifre, så aksens beløb flugter — samme regel som i tabeller. */
  font-family: var(--brugs-skrift); font-variant-numeric: tabular-nums;
}

/* ⚠️ GRAFEN SKALERES IKKE NED TIL ULAESELIGHED — DEN RULLER.

   Målt i browseren: ved 348 px bred blev SVG'en 152 px høj, og fordi hele
   viewBoxen skaleres, blev aksens 11 px-tekst omkring 6 px. Kurvens FORM var
   stadig læsbar, men beløbene og årstallene var det ikke.

   Løsningen er husets egen og ikke en ny: SVG'en ligger i en `.rul`, præcis
   som bygningstabellen, og får en `min-width`. Bred nok plads giver ingen
   rulning; smal plads giver en rulning i grafens egen flade — og siden ruller
   aldrig vandret.

   Alternativet var at lade den skalere og kalde den "et glimt", som kortruden
   på 160 px. Det holder for et kort, hvor formen ER indholdet, men en graf med
   ulæselige tal på akserne er ikke et glimt — det er et gæt. */
.vurgraf .rul .vurgraf__svg { min-width: 30rem; }

.vurgraf__forklaring {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin: 0; padding: 0 .85rem .85rem;
  font-family: var(--brugs-skrift); font-size: .8125rem;
}
.vurgraf__forklaring > span { display: flex; align-items: center; gap: .4rem; }

/* ⚠️ Formen bærer lige så meget som farven. Ejendomsværdien er rund,
   grundværdien firkantet — en graf, der kun kan læses i farver, kan ikke
   læses af alle. Derfor er tegnet i forklaringen den SAMME form som
   punkterne i kurven. */
.vurgraf__tegn {
  display: inline-block; width: .6rem; height: .6rem;
  background: var(--tegn); flex: 0 0 auto;
}
.vurgraf__tegn--cirkel  { border-radius: 50%; }
.vurgraf__tegn--firkant { border-radius: 1px; }