/* =====================================================================
   er_design.css — EJENDOMSRADARS FÆLLES DESIGNSYSTEM
   =====================================================================
   ÉT sted. Alle farver, flader, kanter, skygger, radier og statusfarver
   for hele platformen defineres her. Ingen side må definere sin egen
   farve; den skal bruge et token herfra.

   Baggrund (13.09.2026): platformen havde to temaer — et lyst og et
   mørkt navy — plus en guldbjælke på enkelte sider. Man kunne se på
   farven, hvilken udvikler der havde bygget siden. Det er nu ét system.

   RETNINGEN, besluttet af Morten 13.09.2026:
     varm off-white som hovedbaggrund · hvide cards · mørk grafit til
     TEKST, aldrig til store flader · én afdæmpet petrol-accent brugt
     sparsomt · grøn/gul/rød KUN som status · diskrete kanter · lette
     skygger · god luft · moderne nordisk B2B/SaaS.

   FORBUDT: mørkeblå helsidebaggrunde, mørkeblå sektioner, guldbjælker,
   kraftig royal blue som dominerende farve, temaer der skifter fra
   modul til modul.

   ACCENTEN er afgjort af referencebillederne (modtaget 13.09, skaerm
   01-08): de viser alle EjendomsRadar-blaa #1a56db. Petrol er droppet.

   LYST PAA ALLE 19 — ogsaa hvor referencebilledet er moerkt. Morten,
   13.09: "alle skal være lyse nu selv om de er mørke på dem her så alle
   19 skal være lyse". Referencebillede 06 og 07 er moerke navy; de
   bygges alligevel lyse. Det er en bevidst afvigelse fra referencen,
   besluttet af Morten, og den gaelder hele platformen.

   KONTRAST: hvert tekst/flade-par er målt med WCAG-formlen (kontrast.py)
   og står med sit måltal. Intet par under 4.5:1 for brødtekst.
   ===================================================================== */

:root{
  /* ---- Flader. Lyse flader dominerer; de mørke findes ikke laengere. ---- */
  --er-bg:            #f6f7f7;   /* sidens bund, varm off-white          */
  --er-flade:         #ffffff;   /* cards og paneler                     */
  --er-flade-2:       #eef1f2;   /* sekundaere flader, tabelhoveder      */
  --er-flade-3:       #e4e9eb;   /* tredje niveau, hover                 */

  /* ---- Tekst. Maalt mod --er-flade (hvid) og --er-bg. ---- */
  --er-tekst:         #1c2b33;   /* 14.6:1 paa hvid · 13.6:1 paa bg      */
  --er-tekst-2:       #55666f;   /*  6.0:1 paa hvid ·  5.3:1 paa flade-2 */
  --er-tekst-3:       #5f7079;   /*  5.2:1 paa hvid ·  4.5:1 paa flade-2 */
  --er-tekst-paa-accent: #ffffff;/*  7.1:1 paa accent                    */

  /* ---- Kanter og skygger. Diskrete, ikke usynlige. ---- */
  --er-kant:          #dfe5e7;
  --er-kant-kraftig:    #c8d2d6;
  --er-kant-fokus:    #1a56db;
  --er-skygge:        0 1px 2px rgba(28,43,51,.05), 0 1px 3px rgba(28,43,51,.06);
  --er-skygge-loeft:  0 2px 6px rgba(28,43,51,.07), 0 8px 20px rgba(28,43,51,.07);

  /* ---- Accent. Én farve. Bruges sparsomt. ---- */
  --er-accent:        #1a56db;   /* 6.18:1 begge veje mod hvid           */
  --er-accent-moerk:  #1746b8;   /* hover/aktiv, 8.06:1                  */
  --er-accent-svag:   #eaf0fd;   /* accent paa den: 5.41:1               */
  --er-accent-kant:   #c3d4f5;

  /* ---- Status. KUN status. Aldrig tema, aldrig dekoration. ---- */
  --er-ok:            #17663f;   /* 6.98:1 — godkendt / positiv          */
  --er-ok-svag:      #e6f2ec;
  --er-vent:          #8f5f08;   /* 5.51:1 — afventer / opmaerksomhed    */
  --er-vent-svag:    #fbf1de;
  --er-fejl:          #a32d26;   /* 7.09:1 — fejl / kritisk              */
  --er-fejl-svag:    #fbeceb;
  --er-neutral:       #5f7079;   /* 5.15:1 — mangler data / neutral      */
  --er-neutral-svag: #eef1f2;

  /* ---- Datavisualisering. Samme toner, adskillelige, alle >=3:1
          mod hvid, saa en soejle eller kurve kan ses uden at zoome. ---- */
  --er-graf-1:        #1a56db;
  --er-graf-2:        #17663f;
  --er-graf-3:        #8f5f08;
  --er-graf-4:        #6b4a86;
  --er-graf-5:        #a32d26;
  --er-graf-6:        #3d6a8f;
  --er-graf-akse:     #55666f;   /* akselinjer og tal, 6.0:1             */
  --er-graf-gitter:   #dfe5e7;

  /* ---- Form. Ens radius og luft overalt. ---- */
  --er-radius:        10px;
  --er-radius-lille:  10px;
  --er-radius-stor:   14px;
  --er-luft:          16px;

  /* ---- Typografi. Én sans-serif for hele platformen. Ingen serif. ---- */
  --er-skrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --er-skrift-tal: var(--er-skrift);

  /* ---- Aliasser i det ordforraad, Morten bad om. Samme vaerdier,
          saa nye komponenter kan skrives med begge navne. ---- */
  --background:        var(--er-bg);
  --surface:           var(--er-flade);
  --surface-secondary: var(--er-flade-2);
  --text-primary:      var(--er-tekst);
  --text-secondary:    var(--er-tekst-2);
  --border:            var(--er-kant);
  --accent:            var(--er-accent);
  --success:           var(--er-ok);
  --warning:           var(--er-vent);
  --danger:            var(--er-fejl);
}

/* =====================================================================
   DET MØRKE TEMA AFVIKLES
   =====================================================================
   .er-moerk-side satte tidligere hele siden i navy. Klassen bliver
   staaende i markup'en, saa ingen skaerm skal bygges om — men den
   peger nu paa de samme lyse tokens som alt andet. Det er dét, der
   goer, at en tilfaeldig side ikke laengere kan skifte tema.
   ===================================================================== */
body.er-moerk-side,
body.er-moerk-side .er-app-krop{
  background:var(--er-bg) !important;
  color:var(--er-tekst) !important;
}
body.er-moerk-side .er-app-nav,
body.er-moerk-side .er-app-side,
body.er-moerk-side .er-app-panel,
body.er-moerk-side .er-app-meta,
body.er-moerk-side .er-app-chip,
body.er-moerk-side .sk-kpi-kort,
body.er-moerk-side .er-knap-tom{
  background:var(--er-flade) !important;
  border-color:var(--er-kant) !important;
  color:var(--er-tekst) !important;
}
body.er-moerk-side .er-tom,
body.er-moerk-side table.er-tabel th{
  background:var(--er-flade-2) !important;
  border-color:var(--er-kant) !important;
  color:var(--er-tekst-2) !important;
}
body.er-moerk-side .er-app-navn strong,
body.er-moerk-side .er-app-hoved h1,
body.er-moerk-side .er-app-panel-hoved h2,
body.er-moerk-side .sk-kpi-tal,
body.er-moerk-side .er-app-side-bruger b,
body.er-moerk-side .er-app-meta{ color:var(--er-tekst) !important; }
body.er-moerk-side .er-app-links a,
body.er-moerk-side .er-app-side-liste a,
body.er-moerk-side .sk-kpi-navn,
body.er-moerk-side .sk-kpi-note,
body.er-moerk-side .sk-flade,
body.er-moerk-side table.er-tabel td,
body.er-moerk-side .er-app-ikonknap,
body.er-moerk-side .er-app-bruger{ color:var(--er-tekst-2) !important; }
body.er-moerk-side .er-app-links a.er-akt{
  color:var(--er-accent) !important;
  border-bottom-color:var(--er-accent) !important;
}
body.er-moerk-side .er-app-side-liste a:hover,
body.er-moerk-side .er-app-side-liste a.er-akt{
  background:var(--er-accent-svag) !important;
  color:var(--er-accent) !important;
}
body.er-moerk-side .er-app-chip.er-akt{
  background:var(--er-accent) !important;
  border-color:var(--er-accent) !important;
  color:var(--er-tekst-paa-accent) !important;
}
body.er-moerk-side .er-app-panel-hoved,
body.er-moerk-side .er-app-side-bruger,
body.er-moerk-side .er-app-meta > div,
body.er-moerk-side table.er-tabel td{ border-color:var(--er-kant) !important; }

/* =====================================================================
   FÆLLES KOMPONENTER
   ===================================================================== */
body{ font-family:var(--er-skrift); background:var(--er-bg);
      color:var(--er-tekst); }
/* Ingen serif nogen steder. 2FA-siden var sat i browserens standardserif. */
body,button,input,select,textarea,table{ font-family:var(--er-skrift); }

a{ color:var(--er-accent); }
a:hover{ color:var(--er-accent-moerk); }
/* Browserens standardblaa/lilla links maa ikke slaa igennem. */
a:link,a:visited{ color:var(--er-accent); }

.er-knap-fyldt,button.er-knap-fyldt,a.er-knap-fyldt{
  background:var(--er-accent); border:1px solid var(--er-accent);
  color:var(--er-tekst-paa-accent);
}
.er-knap-fyldt:hover{ background:var(--er-accent-moerk);
  border-color:var(--er-accent-moerk); }
.er-knap-tom,button.er-knap-tom,a.er-knap-tom{
  background:var(--er-flade); border:1px solid var(--er-kant-kraftig);
  color:var(--er-tekst);
}
.er-knap-tom:hover{ background:var(--er-flade-2);
  border-color:var(--er-accent); color:var(--er-accent); }
:focus-visible{ outline:2px solid var(--er-kant-fokus); outline-offset:2px; }

/* ---- Statusbadges. Små, tydelige, semantiske. ---- */
.er-badge{ display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:650;
  line-height:1.5; white-space:nowrap; border:1px solid transparent; }
.er-badge-ok{    background:var(--er-ok-svag);      color:var(--er-ok);
                 border-color:#c9e2d5; }
.er-badge-vent{  background:var(--er-vent-svag);    color:var(--er-vent);
                 border-color:#ecd9ae; }
.er-badge-fejl{  background:var(--er-fejl-svag);    color:var(--er-fejl);
                 border-color:#eec9c6; }
.er-badge-neutral{background:var(--er-neutral-svag);color:var(--er-neutral);
                 border-color:var(--er-kant-kraftig); }

/* ---- Kompakt empty state. Erstatter de store tomme paneler. ---- */
.er-tom-kompakt{ display:flex; align-items:center; gap:8px;
  padding:12px 12px; border:1px dashed var(--er-kant-kraftig);
  border-radius:var(--er-radius); background:var(--er-flade-2);
  color:var(--er-tekst-2); font-size:13.5px; line-height:1.5;
  min-height:0; }
.er-tom-kompakt b{ color:var(--er-tekst); font-weight:650; }

/* =====================================================================
   LÆSBARHED — rettelser maalt med laesbarhed.py 13.09.2026
   =====================================================================
   Hvid tekst er kun lovlig paa accent- og statusfarver, som alle er
   maalt til over 7:1. Paa alt andet er teksten moerk. Reglerne herunder
   lukker de konkrete fejl, maalingen fandt.
   ===================================================================== */

/* Skalabadges (energimaerker, risikoniveauer). Hvid tekst paa en
   mellemlys groen/gul gav 2.15-3.46:1. Teksten bliver moerk; farven
   beholder sin betydning. */
.x3-skala-b,.rs-niveau,.en-klasse-b,[class*="-skala-b"]{
  color:var(--er-tekst) !important; text-shadow:none; font-weight:700; }

/* Energipilen. Lys tekst paa lys flade gav 1.15-1.16:1. */
.erp-fra-til,.erp-detalje,.erp-trin,.erp-navn{ color:var(--er-tekst) !important; }
.erp-detalje{ background:var(--er-flade) !important;
  border:1px solid var(--er-kant-kraftig) !important; }

/* Demokortene. Lys graablaa tekst paa lys flade gav 1.02-1.43:1. */
.sk-modulkort,.sk-modulkort b,.sk-modulkort span,.sk-tid,
.sk-mini,.sk-varighed{ color:var(--er-tekst) !important; }
.sk-modulkort span,.sk-tid,.sk-varighed{ color:var(--er-tekst-2) !important; }
.sk-modulkort{ background:var(--er-flade) !important;
  border:1px solid var(--er-kant) !important; }

/* Mobilvisningens knap havde samme farve som sin egen baggrund (1.00:1). */
.m-knap,.m-telefon .m-knap{ color:var(--er-tekst-paa-accent) !important;
  background:var(--er-accent) !important; }

/* Kortboblerne paa markedsskaermen: hvid tekst paa en lys blaa boble. */
.mi-by,.hm-by,.kt-boble{ background:var(--er-flade) !important;
  color:var(--er-tekst) !important;
  border:1px solid var(--er-kant-kraftig) !important;
  box-shadow:var(--er-skygge); }
.mi-by b,.hm-by b{ color:var(--er-tekst) !important; }
.mi-by span,.hm-by span{ color:var(--er-tekst-2) !important; }

/* Ikonchips i risikokategorierne. */
.rs-dikon,.rs-ki{ color:var(--er-accent) !important;
  background:var(--er-accent-svag) !important; }

/* Hvid tekst er tilladt her — begge maalt til 7.07:1 og derover. */
.er-knap-fyldt,.er-app-chip.er-akt,.er-badge-paa-accent{
  color:var(--er-tekst-paa-accent); }

/* Heroer, der tidligere var mørke gradienter med lys tekst. Fladen er nu
   lys; teksten skal følge med. Maalt: 1.02-1.43:1 før, over 12:1 efter. */
.sk-hero,.mi-hero,.hm-hero,.x3-hero{
  background:linear-gradient(140deg,var(--er-flade),var(--er-accent-svag)) !important;
  color:var(--er-tekst) !important;
  border:1px solid var(--er-kant) !important; }
.sk-hero h1,.sk-hero h2,.sk-hero b,.sk-hero strong{ color:var(--er-tekst) !important; }
.sk-hero p,.sk-hero span,.sk-tid{ color:var(--er-tekst-2) !important; }
.sk-kontrol button,.sk-skaerm,.sk-kontrol{ color:var(--er-tekst) !important; }
.sk-kontrol button{ background:var(--er-flade) !important;
  border:1px solid var(--er-kant-kraftig) !important; }
.sk-skaerm{ background:var(--er-flade-2) !important;
  border:1px solid var(--er-kant) !important; }

/* Skalabjælker: bogstavet står mørkt på den lysnede officielle skala
   (se _c3.py og er_energi_pil.js). Kun forbuddet mod hvid tekst står her. */
.x3-skala-b{ color:var(--er-tekst) !important; }

/* =====================================================================
   HVID TEKST DÉR, HVOR BUNDEN ER ACCENTEN
   =====================================================================
   Da den hvide tekst blev ryddet ud, ramte oprydningen ogsaa de faa
   elementer, hvis baggrund saettes i EN ANDEN regel end tekstfarven —
   avataren, aktive chips og faner, priskortets maerkat, sendeknappen.
   De endte med moerk tekst paa accenten (2.06:1). De faar hvid tekst
   igen, hvor bunden faktisk er accent eller en staerk statusfarve:
   hvid paa #24606d er maalt til 7.07:1.
   ===================================================================== */
.er-app-avatar,
.er-app-chip.er-akt,
.er-app-chip[aria-pressed="true"],
.er-pris-maerkat,
.m-send,
.sg-fane.er-akt,
.m-chip[aria-pressed="true"],
.er-badge-paa-accent,
[class*="-maerkat"]:not(.erk-maerkat){
  color:var(--er-tekst-paa-accent) !important;
}
/* "er-akt" betyder blot AKTIV og siger intet om baggrunden. Paa
   kortets baggrundsvaelgere er den aktive knap hvid med accentfarvet
   tekst — en blank regel om hvid tekst gjorde den usynlig (1.00:1).
   Aktiv tilstand paa en lys knap markeres derfor med accentfarve
   og ramme, ikke med hvid tekst. */
.rs-baggrund button.er-akt,.kt-baggrund button.er-akt,
.hm-baggrund button.er-akt,.mi-baggrund button.er-akt,
.x3-baggrund button.er-akt,[data-bg].er-akt{
  color:var(--er-accent) !important;
  background:var(--er-accent-svag) !important;
  border-color:var(--er-accent) !important;
  font-weight:650;
}
/* Ikke-aktive chips og faner er lyse og skal have moerk tekst. */
.er-app-chip:not(.er-akt):not([aria-pressed="true"]),
.sg-fane:not(.er-akt),
.m-chip:not([aria-pressed="true"]){
  color:var(--er-tekst) !important;
  background:var(--er-flade) !important;
  border-color:var(--er-kant-kraftig) !important;
}
/* Ikoner der ligger i en accentfarvet cirkel. */
.x3-ikon[style*="var(--er-accent)"],
.x3-ikon[style*="#24606d"]{ color:var(--er-tekst-paa-accent) !important; }

/* Medie-/pladsholderkort (.sk-kort m.fl.) laa som en gradient fra lys til
   accent med hvid tekst: i den lyse ende gav det 1.00:1. De er nu lyse
   kort med moerk tekst — samme rolle, laesbar besked. */
.sk-kort,.sk-medie,.x3-medie,.kt-medie{
  background:var(--er-flade-2) !important;
  color:var(--er-tekst-2) !important;
  border:1px dashed var(--er-kant-kraftig) !important; }
.sk-kort b,.sk-kort strong{ color:var(--er-tekst) !important; }

/* Grupperoverskrift i mobilmenuen (app-skærmene har både genveje og
   det fulde modulkatalog i skuffen). */
.er-mm-gruppe{ padding:12px 12px 8px; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--er-tekst-3); }
.er-mm-gruppe:first-child{ padding-top:8px; }

@media (max-width:899px){
  /* App-skærmenes topnav og sidebar flytter ind i skuffen — præcis som
     på de offentlige sider. Før lå 14 topnav-punkter og 17 sidebar-punkter
     på 390 px, og topnavet blev klippet af højrekanten. */
  /* FR-203: kun paa telefon. Paa en iPad bliver den vandrette menu staaende -
     "Mere" i menuen (FR-202) tager de punkter, der ikke kan vaere der. */
  .er-app-links{ display:flex; }
  @media (max-width:699px){ .er-app-links{ display:none !important; } }
  .er-app-side{ display:none !important; }
  .er-app-nav-inder{ display:flex; align-items:center; gap:8px;
    padding:8px 12px; min-height:56px; }
  .er-app-krop{ display:block !important; }
  .er-app-indhold{ --er-side-luft:14px;
    padding-left:var(--er-side-luft); padding-right:var(--er-side-luft); }
  .er-app-hoejre{ margin-left:auto; gap:4px; }
  .er-app-navn .er-app-slogan,.er-app-slogan{ display:none; }
}

/* =====================================================================
   MOBIL: TOMME PANELER OG FOLDEDE FILTRE
   =====================================================================
   Styres af er_mobilpanel.js. Beskeden om HVORFOR et felt er tomt bliver
   staaende — det var en udtrykkelig beslutning. Det, der forsvinder, er
   den reserverede tomme hoejde. Maalt foer: 24 paneler fyldte mellem 40 %
   og 131 % af en iPhone-skaerm uden at vise noget.
   ===================================================================== */
@media (max-width:899px){
  /* Kort-, graf- og medieflader inde i et tomt panel klapper sammen til
     en kompakt besked i stedet for at reservere desktop-hoejde. */
  [data-tom-mobil] .erk-kort,
  [data-tom-mobil] .er-kortflade,
  [data-tom-mobil] [id$="Kort"],
  [data-tom-mobil] [id$="kort"],
  [data-tom-mobil] .erg-graf,
  [data-tom-mobil] .sk-kort,
  [data-tom-mobil] .x3-kortflade{
    min-height:0 !important; height:auto !important;
    aspect-ratio:auto !important; max-height:132px;
  }
  [data-tom-mobil] .er-app-panel-krop{ padding-top:12px; padding-bottom:12px; }
  [data-tom-mobil] .er-tom,
  [data-tom-mobil] .er-utilg-blok{
    padding:12px 12px; font-size:13.5px; line-height:1.5;
    border:1px dashed var(--er-kant-kraftig); border-radius:var(--er-radius);
    background:var(--er-flade-2); color:var(--er-tekst-2);
    min-height:0; display:block;
  }
  /* Et tomt panel må aldrig reservere mere end en fjerdedel af skærmen. */
  [data-tom-mobil]{ max-height:none; }
  /* Formularfelter og medier er altid :empty i CSS - de maa aldrig skjules.
     Uden undtagelsen forsvandt soegefeltet paa Ejer & Virksomheder paa mobil. */
  [data-tom-mobil] > .er-app-panel-krop > *:empty:not(input):not(select):not(textarea):not(button):not(img):not(canvas):not(iframe){ display:none; }

  /* Foldede filterpaneler. */
  [data-foldet="1"] .er-app-panel-krop{ display:none !important; }
  .er-fold-knap{ margin-left:auto; display:inline-flex; align-items:center;
    gap:8px; min-height:44px; padding:0 12px; font:inherit; font-size:14px;
    font-weight:600; cursor:pointer; color:var(--er-accent);
    background:var(--er-accent-svag); border:1px solid var(--er-accent-kant);
    border-radius:var(--er-radius-lille); }
  .er-fold-antal{ display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 8px; border-radius:999px;
    background:var(--er-accent); color:var(--er-tekst-paa-accent);
    font-size:11.5px; font-weight:700; }
  [data-foldet="0"] .er-fold-pil{ transform:rotate(180deg); }
  .er-fold-pil{ transition:transform .15s; }
}
/* Paa desktop er knappen skjult og filtrene altid aabne. */
@media (min-width:900px){
  .er-fold-knap{ display:none; }
  [data-foldet="1"] .er-app-panel-krop{ display:block; }
}

@media (max-width:899px){
  /* Chatten maa ikke aabne som en stor tom boks. Den starter kompakt og
     vokser med samtalen — Mortens krav til de to assistenter. */
  .sk-log,.ai-log,#aiLog{ min-height:120px !important; max-height:52vh;
    overflow-y:auto; }
  /* Kortet paa soegesiden reserverer 320 px, foer man har soegt. */
  [data-tom-mobil] .sg-kort,[data-tom-mobil] #sgKort,
  [data-tom-mobil] .hu-kortramme,[data-tom-mobil] .sg-kortramme{
    min-height:0 !important; height:auto !important; max-height:150px; }
  [data-tom-mobil] .sg-kortknapper{ position:static; flex-wrap:wrap; }
}

/* Gradientkort (bykort, hero-felter). Gradienten gaar nu fra hvid til den
   svage accent, saa MOERK tekst kan laeses i hele forloebet. Hvid tekst
   paa en lys gradient var det sidste sted, det gamle moerke tema
   overlevede — og kontrastmaalingen springer gradienter over, saa den
   ville aldrig selv have fanget det. */
.hm-byboks,.mi-byboks,.hm-topby,.mi-topby,
[class*="byboks"],[class*="topby"]{
  color:var(--er-tekst) !important; }
[class*="byboks"] b,[class*="topby"] b{ color:var(--er-tekst) !important; }
[class*="byboks"] span,[class*="topby"] span{ color:var(--er-tekst-2) !important; }

/* Tekst oven på en lys gradient. Hvid tekst her måler 1.00:1 mod
   gradientens lyseste ende — den er usynlig i toppen af forløbet.
   Alle gradientkort bærer nu mørk tekst. */
.hm-byboks,.mi-byboks,.hm-topby,.mi-topby,.sk-hero,.m-hero,
[class*="byboks"],[class*="topby"],[class*="-hero"]{
  color:var(--er-tekst) !important; }
[class*="byboks"] *,[class*="topby"] *,.sk-hero *,.m-hero *{
  color:inherit; }
[class*="byboks"] span:not(b),[class*="topby"] span:not(b),
.sk-hero p,.m-hero p{ color:var(--er-tekst-2) !important; }
.sk-hero .er-knap-fyldt,.m-hero .er-knap-fyldt{
  color:var(--er-tekst-paa-accent) !important; }

/* =====================================================================
   PRÆSENTATIONSLAGET PÅ MOBIL — KPI-KORT, KORT OG FILTRE
   =====================================================================
   Morten, 13.09: teknisk responsivt er ikke det samme som visuelt færdigt.
   Maalt paa skaerm 06 foer denne blok:
     · KPI-raekken fyldte 652 px — fem kort stablet i én kolonne
     · kortet begyndte foerst 867 px nede og virkede sekundaert
     · KPI'erne laa som loes tekst uden korthierarki

   Komponenterne herunder er faelles for alle 19 skaerme. De bruger de
   KPI-klasser, skaermene allerede har, saa der ikke bygges 19 varianter.
   ===================================================================== */

/* ---------- KpiCard: samme premium-kort overalt ---------- */
.hm-kpi > div, .mi-kpi > div, .en-kpi > div, .po-kpi > div, .hu-kpi > div,
.ej-skpi > div, .kn-skpi > div, .rv-skpi > div, .kn-seks > div,
.sk-kpi-kort, .er-kpi-kort{
  background:var(--er-flade);
  border:1px solid var(--er-kant);
  border-radius:var(--er-radius);
  box-shadow:var(--er-skygge);
  padding:12px 16px 16px;
  min-width:0;
  position:relative;
  display:flex; flex-direction:column; gap:4px;
}
/* Ikonet er en chip, ikke et loest tegn. */
.hm-kpi-ikon,.mi-kpi-ikon,.en-kikon,.po-kikon,.hu-kikon,
.ej-ki,.kn-ki,.rv-ki,.sk-kpi-ikon{
  width:32px; height:32px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; margin-bottom:2px; flex:0 0 auto;
  background:var(--er-accent-svag); color:var(--er-accent);
}
/* Tallet er sidens vigtigste element. Tabulaere cifre, saa kolonner
   flugter, og en stoerrelse der kan aflaeses paa armslaengde. */
.hm-kpi-tal,.mi-kpi-tal,.en-ktal,.po-ktal,.hu-ktal,.sk-kpi-tal,
.ej-skpi b,.kn-skpi b,.rv-skpi b,.kn-seks b{
  font-size:24px; font-weight:720; line-height:1.12;
  letter-spacing:-.015em; color:var(--er-tekst);
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.hm-kpi-navn,.mi-kpi-navn,.en-knavn,.po-knavn,.hu-knavn,.sk-kpi-navn,
.ej-kl,.kn-kl,.rv-kl,.kn-nl{
  font-size:13px; line-height:1.4; color:var(--er-tekst-2); font-weight:500;
}
/* Tendensen er en chip med semantisk farve — ikke en løs tekstlinje. */
.hm-kpi-tendens,.mi-kpi-tendens,.rv-aendring,.kn-aendring{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start;
  margin-top:8px; padding:4px 8px; border-radius:999px;
  font-size:11.5px; font-weight:650; line-height:1.5;
  background:var(--er-neutral-svag); color:var(--er-neutral);
  border:1px solid var(--er-kant);
}
.hm-op,.mi-op,.rv-op,.kn-op{
  background:var(--er-ok-svag); color:var(--er-ok); border-color:#c9e2d5; }
.hm-ned,.mi-ned,.rv-ned,.kn-ned{
  background:var(--er-fejl-svag); color:var(--er-fejl); border-color:#eec9c6; }
.hm-flad,.mi-flad,.rv-flad,.kn-flad{
  background:var(--er-neutral-svag); color:var(--er-neutral); }

@media (max-width:640px){
  /* KPI-striben: vandret swipe med snap. Fem kort fylder nu ~165 px i
     stedet for 652 px, og kortet under dem rykker 490 px op. */
  .hm-kpi,.mi-kpi,.en-kpi,.po-kpi,.hu-kpi,.ej-skpi,.kn-skpi,.rv-skpi{
    display:flex !important; grid-template-columns:none !important;
    gap:8px; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    /* Striben skal gaa helt ud til kanten, men maa ikke stikke UDENFOR.
       Den negative margen skal derfor matche indholdets egen polstring
       praecist - 16 px gav 2 px vandret overloeb, fordi .er-app-indhold
       har 14 px paa mobil. Vaerdien laeses nu fra én variabel. */
    padding:2px var(--er-side-luft,14px) 10px;
    margin:0 calc(-1 * var(--er-side-luft,14px)) 4px;
    max-width:100vw;
    scrollbar-width:none;
  }
  .hm-kpi::-webkit-scrollbar,.mi-kpi::-webkit-scrollbar,
  .en-kpi::-webkit-scrollbar,.po-kpi::-webkit-scrollbar,
  .hu-kpi::-webkit-scrollbar,.ej-skpi::-webkit-scrollbar,
  .kn-skpi::-webkit-scrollbar,.rv-skpi::-webkit-scrollbar{ display:none; }
  .hm-kpi > *,.mi-kpi > *,.en-kpi > *,.po-kpi > *,.hu-kpi > *,
  .ej-skpi > *,.kn-skpi > *,.rv-skpi > *{
    flex:0 0 auto; width:min(70vw,268px); scroll-snap-align:start;
  }
  .hm-kpi-tal,.mi-kpi-tal,.en-ktal,.po-ktal,.hu-ktal,.sk-kpi-tal,
  .ej-skpi b,.kn-skpi b,.rv-skpi b{ font-size:26px; }

  /* Kortet skal have reel visuel vaegt — ikke ligge som et lille element.
     Kun naar det HAR data; er panelet tomt, gaelder reglen om kompakt
     empty state laengere oppe. */
  .er-app-panel:not([data-tom-mobil]) .hm-kortramme,
  .er-app-panel:not([data-tom-mobil]) .mi-kortramme,
  .er-app-panel:not([data-tom-mobil]) .kt-kortramme,
  .er-app-panel:not([data-tom-mobil]) .po-kortramme,
  .er-app-panel:not([data-tom-mobil]) .sg-kortramme{
    min-height:52vh !important;
  }
  /* Kortpanelet foerst i floedet, saa markedsbilledet moeder brugeren
     med det samme — KPI-striben ligger over, kortet lige under. */
  .hm-hoved{ display:flex !important; flex-direction:column; gap:12px; }
  .hm-kortpanel{ order:1; }
  .hm-filterpanel{ order:2; }

  /* Mindre luft mellem sektionerne. Siden var 6.085 px lang. */
  .er-app-indhold > section,.er-app-indhold > div{ margin-bottom:12px; }
  .er-app-panel-hoved h2{ font-size:16px; }
  .er-app-panel-krop{ padding:12px 12px 12px; }
}

/* Click-everywhere: entiteter der er gjort klikbare af er_klik.js.
   De skal ses som links uden at støje i en tabel — derfor en diskret
   understregning der først bliver tydelig ved hover. */
.er-entitet{ color:inherit; text-decoration:none;
  border-bottom:1px dashed var(--er-accent-kant); cursor:pointer; }
.er-entitet:hover,.er-entitet:focus-visible{
  color:var(--er-accent); border-bottom-style:solid;
  border-bottom-color:var(--er-accent); }
td .er-entitet,dd .er-entitet{ border-bottom-color:var(--er-kant-kraftig); }

/* =====================================================================
   AUTOCOMPLETE PÅ UNIVERSALSØGNINGEN (er_forslag.js)
   ===================================================================== */
.er-forslag{ position:absolute; top:calc(100% + 6px); left:0; right:0;
  z-index:60; max-height:min(58vh,420px); overflow-y:auto;
  background:var(--er-flade); border:1px solid var(--er-kant);
  border-radius:var(--er-radius); box-shadow:var(--er-skygge-loeft);
  padding:8px; }
.er-forslag-gruppe{ padding:8px 8px 4px; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--er-tekst-3); }
.er-forslag-raekke{ display:flex; flex-direction:column; gap:2px;
  padding:8px 8px; border-radius:var(--er-radius-lille);
  text-decoration:none; color:var(--er-tekst); min-height:44px;
  justify-content:center; }
.er-forslag-raekke:hover,.er-forslag-raekke.er-akt{
  background:var(--er-accent-svag); color:var(--er-accent); }
.er-forslag-navn{ font-size:14.5px; font-weight:600; }
.er-forslag-under{ font-size:12px; color:var(--er-tekst-2); }
.er-forslag-raekke:hover .er-forslag-under,
.er-forslag-raekke.er-akt .er-forslag-under{ color:var(--er-accent); }
.er-forslag-tom{ padding:12px 12px; font-size:13px; line-height:1.5;
  color:var(--er-tekst-2); }
@media (max-width:640px){
  .er-forslag{ max-height:52vh; }
  .er-forslag-raekke{ min-height:52px; }
}

@media (max-width:640px){
  /* De nye klikbare entiteter må ikke blive 13 px høje mål i en tæt
     tabel. De vokser lodret om deres egen tekst, så hele cellens højde
     bliver trykfelt, uden at rækken bryder op. Målt af mobil.py. */
  .er-entitet{ display:inline-block; padding-block:14px; font-size:13.5px;
    line-height:1.3; }
  td .er-entitet,dd .er-entitet,li .er-entitet{ padding-block:15px; }
  /* En celle med et entitetslink må ikke selv lægge polstring oveni. */
  td:has(> .er-entitet){ padding-top:0; padding-bottom:0; }
  /* Søgeikonet på heroen. */
  .er-hero-log .er-top-soeg{ width:44px; height:44px; }
}

/* ------------------------------------------------------------------
   Den valgte ejendom, naar opslagsfeltet er klappet sammen.
   Én regel for alle ejendomsskaerme - ikke én pr. skaerm.
   ------------------------------------------------------------------ */
.er-valgt-ejendom{display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:8px 12px; margin-bottom:12px;
  background:var(--er-flade); border:1px solid var(--er-kant);
  border-radius:var(--er-radius); font-size:13px; color:var(--er-tekst-2)}
.er-skiftknap{background:none; border:0; font:inherit; font-size:13px;
  color:var(--er-accent); cursor:pointer; padding:4px 8px;
  border-radius:var(--er-radius-lille); text-decoration:underline}
.er-skiftknap:hover{background:var(--er-accent-svag)}
.er-skiftknap:focus-visible{outline:2px solid var(--er-accent); outline-offset:2px}
@media (max-width:640px){
  .er-valgt-ejendom{font-size:14px}
  .er-skiftknap{min-height:44px; display:inline-flex; align-items:center; font-size:14px}
}

/* ------------------------------------------------------------------
   LINKS PAA EN ACCENTFARVET FLADE
   Koncerndiagrammets fremhaevede boks er fyldt med accentfarven. Links
   inde i den arvede linkfarven - som ER accentfarven - saa selskabets
   navn stod i 1,00:1 og var fuldstaendig usynligt. Man kunne kun se den
   stiplede understregning. Reglen ligger her, saa den gaelder hver gang
   en flade fyldes med accent, ikke kun i diagrammet.
   ------------------------------------------------------------------ */
/* Moderselskabsboksen hedder kn-mor paa skaerm 9 og rv-mor paa skaerm 10.
   Begge er fyldt med accentfarven, og begge havde usynlige links. */
[class$="-mor"] a, [class$="-mor"] a:visited,
[class*="-mor "] a, [class*="-mor "] a:visited,
.kn-boks.kn-valgt a, .kn-boks.kn-valgt a:visited,
[class*="-boks"].er-akt a, [class*="-kort"].er-akt a,
.er-paa-accent a, .er-paa-accent a:visited{
  color:var(--er-tekst-paa-accent) !important;
  text-decoration-color:rgba(255,255,255,.6) !important;
}
[class$="-mor"] a:hover, [class*="-mor "] a:hover, .kn-boks.kn-valgt a:hover, .er-paa-accent a:hover{
  text-decoration-color:var(--er-tekst-paa-accent) !important;
}
[class$="-mor"] a:focus-visible, [class*="-mor "] a:focus-visible, .kn-boks.kn-valgt a:focus-visible{
  outline:2px solid var(--er-tekst-paa-accent); outline-offset:2px;
}

/* =====================================================================
   GODKEND BESTILLINGEN
   =====================================================================
   Regnestykket, kunden skal se foer ordren sendes: pakkepris, ekstra
   brugere, samlet pr. maaned. Summen staar tydeligere end resten -
   det er det tal, man godkender.
   ===================================================================== */
.er-ordre{ border:1px solid var(--er-kant,#dfe5e7); border-radius:10px;
  padding:16px 16px 16px; margin:8px 0 16px; background:var(--er-flade-2,#f6f8fb); }
.er-ordre h2{ margin:0 0 12px; font-size:16px; font-weight:650; }
.er-ordre-linjer{ display:grid; grid-template-columns:1fr auto;
  gap:8px 16px; margin:0 0 12px; font-size:14px; }
.er-ordre-linjer dt{ margin:0; color:var(--er-tekst-2,#5b6b7d); }
.er-ordre-linjer dt span{ font-size:12.5px; opacity:.8; }
.er-ordre-linjer dd{ margin:0; text-align:right;
  font-variant-numeric:tabular-nums; }
.er-ordre-linjer .er-ordre-sum{ padding-top:8px; font-size:16px; font-weight:700;
  color:var(--er-tekst,#12222f); border-top:1px solid var(--er-kant,#dfe5e7); }
.er-ordre-note{ margin:0 0 16px; font-size:12.5px; line-height:1.5;
  color:var(--er-tekst-2,#5b6b7d); }
.er-ordre-knapper{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:520px){
  .er-ordre-knapper > *{ flex:1 1 100%; text-align:center; }
}

/* =====================================================================
   OVERSKRIFTEN LAA UNDER DEN STICKY NAVIGATION
   =====================================================================
   Maalt paa priser.html, 375 px bred:

       scroll   0   nav bund 61 · h1 top 87   (26 px luft)
       scroll  40   nav bund 61 · h1 top 47   DAEKKET

   Navigationen er sticky og bliver staaende i toppen. Med kun 26 px
   luft forsvinder sidens overskrift ind under baandet, saa snart man
   roerer siden - og paa en telefon roerer man altid siden.

   scroll-padding-top gaelder hele dokumentet: uden den lander et
   link til et anker inde i siden ogsaa bag baandet.
   ===================================================================== */
html{ scroll-padding-top:74px; }
@media (max-width:640px){
  .er-side{ padding-top:32px; }
  .er-side > h1:first-child{ margin-top:0; line-height:1.24; padding-bottom:2px; }
}

/* =====================================================================
   UNDERSIDER I SIDEBAREN
   =====================================================================
   44 sider virkede, men havde ingen vej ind i menuen. De er nu lagt
   under deres hovedomraade i stedet for at blive 44 nye hovedpunkter.

   Indrykket, mindre og uden ikon: de skal kunne findes, men de skal
   ikke konkurrere med hovedomraaderne om opmaerksomheden.
   ===================================================================== */
.er-app-side-under > a{
  padding-left:32px; font-size:12.5px; opacity:.82;
}
.er-app-side-under > a:hover{ opacity:1; }