/* EjendomsRadar - offentlig salgsflade (skaerm 1) og de fem statiske sider.
   Bygget mod referencebillede 1/19, 2026-09-13.
   Palet, typografi og komponenter foelger referencen: hvid flade, kraftig blaa
   accent, smalle kort med tynd ramme og lille radius. */

:root{
  --ink:var(--er-accent);         /* overskrifter */
  --tekst:var(--er-accent);       /* broedtekst */
  --daemp:var(--er-tekst-2);       /* sekundaer tekst */
  --linje:#e2e7ee;       /* rammer */
  --flade:#ffffff;       /* kort */
  --bund:#f6f8fb;        /* sidebaggrund */
  --blaa:var(--er-accent);        /* primaer */
  --blaa-moerk:var(--er-accent);
  --blaa-svag:#eaf0fd;
  --groen:var(--er-ok);
  --skygge:0 1px 2px rgba(15,27,45,.05), 0 8px 24px rgba(15,27,45,.06);
  --radius:10px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bund); color:var(--tekst);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.er-baand{max-width:1240px; margin:0 auto; padding:0 24px}

/* ---------- Topnavigation ---------- */
.er-top-nav{background:var(--flade); border-bottom:1px solid var(--linje); position:sticky; top:0; z-index:50}
.er-top-inder{
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px; min-height:60px; flex-wrap:wrap;
}
.er-top-mrk{display:flex; align-items:center; gap:8px}
.er-top-ikon{
  width:26px; height:22px; flex:0 0 auto; display:flex; align-items:flex-end; gap:2px;
}
.er-top-ikon i{display:block; width:5px; background:var(--blaa); border-radius:6px}
.er-top-ikon i:nth-child(1){height:9px}
.er-top-ikon i:nth-child(2){height:15px}
.er-top-ikon i:nth-child(3){height:22px}
.er-top-navn{display:flex; flex-direction:column; line-height:1.12}
.er-top-navn strong{font-size:17px; font-weight:750; letter-spacing:.01em; color:var(--ink); text-transform:uppercase}
.er-top-slogan{font-size:10.5px; color:var(--daemp); letter-spacing:.01em}

.er-top-links{display:flex; gap:2px; list-style:none; margin:0; padding:0; flex:1 1 auto; flex-wrap:wrap}
.er-top-links a{
  display:block; padding:16px 12px; font-size:14.5px; color:var(--daemp);
  border-bottom:2px solid transparent;
}
.er-top-links a:hover{color:var(--ink)}
.er-top-links a.er-akt{color:var(--blaa); font-weight:600; border-bottom-color:var(--blaa)}

.er-top-handling{display:flex; gap:8px; align-items:center; flex:0 0 auto}

.er-knap-tom,.er-knap-fyldt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 16px; border-radius:10px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.er-knap-tom{background:var(--flade); border-color:var(--linje); color:var(--ink)}
.er-knap-tom:hover{border-color:var(--blaa); color:var(--blaa)}
.er-knap-fyldt{background:var(--blaa); color:var(--er-tekst)}
.er-knap-fyldt:hover{background:var(--blaa-moerk)}
.er-knap-fyldt.stor,.er-knap-tom.stor{padding:12px 24px; font-size:15px}
.er-knap-fyldt:disabled{background:var(--daemp); cursor:not-allowed}

/* ---------- Hero ---------- */
.er-hero{position:relative; min-height:330px; overflow:hidden; background:var(--er-flade-2)}
.er-hero-medie{position:absolute; inset:0; background-size:cover; background-position:center}
.er-hero-medie::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(8,20,36,.86) 0%,rgba(8,20,36,.62) 46%,rgba(8,20,36,.22) 100%);
}
.er-hero-medie.er-hero-tom{
  background:linear-gradient(135deg,var(--er-accent-svag) 0%,var(--er-accent-svag) 45%,var(--er-accent-svag) 100%);
}
.er-hero-inder{
  position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:32px 24px 24px;
  display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:24px; align-items:start;
}
.er-hero-tekst h1{
  margin:0 0 8px; color:var(--er-tekst); font-size:33px; line-height:1.16; font-weight:720; letter-spacing:-.02em;
}
.er-hero-tekst .er-under{margin:0 0 16px; color:var(--er-tekst-2); font-size:15px; max-width:46ch}

.er-hero-soeg{display:flex; gap:8px; max-width:640px; margin-bottom:12px; position:relative}
.er-hero-soeg-felt{position:relative; flex:1 1 auto}
.er-hero-soeg input{
  width:100%; padding:12px 12px 12px 32px; font:inherit; font-size:14.5px;
  border:1px solid transparent; border-radius:10px; background:#fff; color:var(--ink); outline:none;
}
.er-hero-soeg input:focus{box-shadow:0 0 0 3px rgba(26,86,219,.32)}
.er-hero-soeg-ikon{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; opacity:.5; pointer-events:none;
}
.er-hero-knapper{display:flex; gap:8px; flex-wrap:wrap}
.er-hero-knapper .er-knap-tom{background:#fff}

.er-hero-log{
  position:absolute; top:16px; right:22px; z-index:3; display:flex; gap:8px; align-items:center;
}

/* Ejendomskortet over heroen */
.er-hero-kort{
  background:rgba(15,32,54,.92); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius); padding:12px 16px; color:var(--er-tekst); backdrop-filter:blur(3px);
}
.er-hero-kort h3{margin:0 0 1px; font-size:15px; font-weight:650; display:flex; gap:4px; align-items:center}
.er-hero-kort .er-by{font-size:12px; color:var(--er-tekst-2); margin-bottom:8px}
.er-hero-kort dl{margin:0; display:grid; grid-template-columns:1fr auto; gap:8px 8px; font-size:12.5px}
.er-hero-kort dt{color:var(--er-tekst-2); margin:0}
.er-hero-kort dd{margin:0; text-align:right; font-weight:600}
.er-hero-kort .er-knap-fyldt{width:100%; margin-top:12px; padding:8px; font-size:13.5px}
.er-hero-prikker{display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:8px}
.er-hero-prik{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.42); border:0; padding:0; cursor:pointer}
.er-hero-prik.er-akt{background:#fff}
.er-hero-pil{
  width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.34);
  background:var(--er-flade); color:var(--er-tekst); cursor:pointer; font-size:11px; line-height:1;
}

/* ---------- Modulraekke (8 kasser) ---------- */
.er-moduler{
  max-width:1240px; margin:-24px auto 0; padding:0 24px; position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px;
}
.er-modul{
  background:var(--flade); border:1px solid var(--linje); border-radius:10px;
  padding:12px 8px; display:flex; align-items:center; gap:8px; box-shadow:var(--skygge);
  font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25; min-height:52px;
  transition:border-color .12s, transform .12s;
}
.er-modul:hover{border-color:var(--blaa); transform:translateY(-1px)}
.er-modul-ikon{
  width:26px; height:26px; flex:0 0 auto; border-radius:10px; background:var(--blaa-svag);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}

/* ---------- Noegletal ---------- */
.er-noegletal{
  max-width:1240px; margin:12px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  background:var(--flade); border:1px solid var(--linje); border-radius:var(--radius);
}
.er-noegletal > div{display:flex; gap:12px; align-items:center; padding:12px 16px; border-right:1px solid var(--linje)}
.er-noegletal > div:last-child{border-right:0}
.er-noegletal-ikon{
  width:30px; height:30px; flex:0 0 auto; border-radius:10px; background:var(--blaa-svag);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.er-noegletal b{display:block; font-size:16px; color:var(--ink); font-weight:700; line-height:1.2}
.er-noegletal span{font-size:12.5px; color:var(--daemp)}

/* ---------- To spalter: udforsk + demo ---------- */
.er-to-spalter{
  max-width:1240px; margin:24px auto 0; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start;
}
.er-afsnit-titel{margin:0 0 12px; font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.01em}

.er-udforsk{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.er-udforsk-kort{
  background:var(--flade); border:1px solid var(--linje); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color .12s, transform .12s;
}
.er-udforsk-kort:hover{border-color:var(--blaa); transform:translateY(-2px)}
.er-udforsk-billede{
  aspect-ratio:16/9; background:linear-gradient(135deg,var(--er-flade-2),var(--er-graf-6));
  background-size:cover; background-position:center;
}
.er-udforsk-krop{padding:12px 12px 12px}
.er-udforsk-krop h3{margin:0 0 4px; font-size:14px; font-weight:650; color:var(--ink)}
.er-udforsk-krop p{margin:0 0 8px; font-size:12.5px; color:var(--daemp); line-height:1.5}
.er-link{color:var(--blaa); font-size:12.5px; font-weight:600}

.er-demo-kort{
  background:var(--flade); border:1px solid var(--linje); border-radius:var(--radius); padding:16px;
}
.er-demo-kort h3{margin:0 0 12px; font-size:15px; font-weight:700; color:var(--ink); line-height:1.3}
.er-demo-skaerm{
  position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin-bottom:12px;
  background:linear-gradient(135deg,var(--er-accent-svag),var(--er-accent-svag)); display:flex; align-items:center; justify-content:center;
}
.er-demo-play{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--blaa);
  display:flex; align-items:center; justify-content:center; font-size:16px; padding-left:4px;
}
.er-tjek{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; font-size:12.5px; color:var(--tekst)}
.er-tjek li{display:flex; gap:8px; align-items:flex-start}
.er-tjek li::before{content:"\2713"; color:var(--groen); font-weight:700; flex:0 0 auto}
.er-demo-kort .er-knap-fyldt{width:100%}

/* ---------- Handler + nyheder ---------- */
.er-tabel-blok{
  background:var(--flade); border:1px solid var(--linje); border-radius:var(--radius); overflow:hidden;
}
.er-blok-hoved{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 12px}
.er-tabel-svoeb{overflow-x:auto}
/* Et fast gulv paa 640 px tvang VANDRET RULNING i ethvert panel, der er
   smallere end det - fx en tabel med fire korte kolonner i en to-spaltet
   raekke paa skaerm 14. Kolonnerne staar i forvejen med white-space:nowrap,
   saa tabellen kan ikke klemmes sammen til ulaeselighed uden gulvet; den
   finder selv sin naturlige mindstebredde. Paa smalle skaerme bliver gulvet,
   fordi en bred tabel dér SKAL kunne rulles frem for at mase sig sammen. */
table.er-tabel{width:100%; border-collapse:collapse; font-size:12.5px; min-width:0}
@media (max-width:900px){ table.er-tabel{min-width:640px} }
table.er-tabel th{
  text-align:left; padding:8px 12px; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--daemp); font-weight:600; background:#fafbfd; border-bottom:1px solid var(--linje); white-space:nowrap;
}
table.er-tabel td{padding:8px 12px; border-bottom:1px solid var(--linje); color:var(--tekst)}
table.er-tabel tr:last-child td{border-bottom:0}
table.er-tabel td.er-tal{text-align:right; font-variant-numeric:tabular-nums}
.er-demomaerkat{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--er-vent); background:#fdf3e0; border:1px solid #f0d9a8; border-radius:6px; padding:1px 4px; margin-left:8px;
}

.er-nyheder{display:grid; gap:12px}
.er-nyhed{display:flex; gap:8px; align-items:flex-start}
.er-nyhed-billede{
  width:52px; height:40px; flex:0 0 auto; border-radius:10px;
  background:linear-gradient(135deg,var(--er-flade-2),var(--er-graf-6)); background-size:cover; background-position:center;
}
.er-nyhed h4{margin:0 0 2px; font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.35}
.er-nyhed time{font-size:11.5px; color:var(--daemp)}

/* ---------- Kundelogoer ---------- */
.er-logoer{max-width:1240px; margin:24px auto 0; padding:16px 24px; border-top:1px solid var(--linje)}
.er-logoer-titel{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--daemp);
  margin-bottom:12px; font-weight:600;
}
.er-logoer-raekke{display:flex; gap:32px; align-items:center; flex-wrap:wrap; row-gap:12px}
.er-logo{font-size:14px; font-weight:700; color:#94a0ae; letter-spacing:.01em}
.er-logoer-tom{font-size:12.5px; color:var(--daemp); font-style:italic}

/* ---------- Tomme og fejlagtige tilstande ---------- */
.er-tom{
  padding:16px; border:1px dashed var(--linje); border-radius:10px;
  color:var(--daemp); font-size:13px; background:#fbfcfe;
}
.er-fejl{
  padding:12px 16px; border:1px solid #e8c2ba; background:#fdf2f0; color:var(--er-fejl);
  border-radius:10px; font-size:13px;
}

/* ---------- Autocomplete ---------- */
.er-autocomplete{
  position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:60; background:#fff;
  border:1px solid var(--linje); border-radius:10px; box-shadow:0 16px 38px rgba(9,25,45,.20); overflow:hidden;
  max-height:340px; overflow-y:auto;
}
.er-autocomplete-gruppe{
  padding:8px 12px 4px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--daemp); font-weight:700; background:#fafbfd;
}
.er-autocomplete-item{
  display:flex; width:100%; flex-direction:column; align-items:flex-start; text-align:left;
  padding:8px 12px; border:0; border-bottom:1px solid var(--linje); background:transparent;
  color:var(--ink); cursor:pointer; font:inherit; font-size:13.5px;
}
.er-autocomplete-item:last-child{border-bottom:0}
.er-autocomplete-item:hover,.er-autocomplete-item:focus{background:var(--blaa-svag); outline:0}
.er-autocomplete-item small{margin-top:1px; color:var(--daemp); font-size:12px}

/* ---------- Faelles indhold paa de fem sider ---------- */
.er-side{max-width:940px; margin:0 auto; padding:32px 24px 66px}
.er-side h1{margin:0 0 8px; font-size:30px; font-weight:720; letter-spacing:-.02em; color:var(--ink)}
.er-side .manchet{margin:0 0 24px; color:var(--daemp); font-size:16px; max-width:60ch}
.er-side h2{margin:32px 0 8px; font-size:19px; font-weight:700; color:var(--ink)}
.er-side p{margin:0 0 12px; max-width:66ch}
.er-side ul{margin:0 0 12px; padding-left:16px; line-height:1.8; max-width:66ch}
.er-kort-flade{background:var(--flade); border:1px solid var(--linje); border-radius:var(--radius); padding:24px; margin-bottom:16px}
.er-fakta{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:16px 0 8px}
.er-fakta div{background:var(--flade); border:1px solid var(--linje); border-radius:10px; padding:12px 16px}
.er-fakta .m{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--daemp); margin-bottom:4px}
.er-fakta .v{font-size:15px; font-weight:600; color:var(--ink)}

/* ---------- Priskort ---------- */
.er-priser{max-width:1240px; margin:0 auto; padding:32px 24px 8px}
.er-priser h2{margin:0 0 4px; font-size:24px; font-weight:720; letter-spacing:-.02em; color:var(--ink)}
/* FR-301: align-items var 'start', så hvert kort kun tog sin egen
   indholdshøjde. Mellem har én linje mindre tekst end Lille og Stor og
   blev derfor 71 px lavere - netop den pakke, vi fremhæver. 'stretch'
   lader dem fylde rækkens højde. */
.er-pris-grid{display:grid; gap:16px; margin-top:24px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); align-items:stretch}
.er-pris-kort{background:var(--flade); border:1px solid var(--linje); border-radius:10px; padding:24px 16px; display:flex; flex-direction:column; gap:8px; position:relative}
.er-pris-kort h3{margin:0; font-size:17px; font-weight:700; color:var(--ink)}
.er-pris-beloeb{font-size:31px; font-weight:730; letter-spacing:-.02em; line-height:1.1; color:var(--ink)}
.er-pris-beloeb small{font-size:14px; font-weight:500; color:var(--daemp)}
.er-pris-binding{font-size:12.5px; color:var(--daemp)}
.er-pris-kort ul{margin:8px 0 0; padding-left:16px; color:var(--daemp); font-size:13.5px; line-height:1.75}
/* FR-301: 'auto' skubber knappen til bunden af kortet, uanset hvor meget
   tekst der står over den. DET er det, der får knapperne til at flugte -
   ikke at gøre teksterne lige lange. */
.er-pris-kort .er-knap-tom,.er-pris-kort .er-knap-fyldt{margin-top:auto; padding-top:0}
.er-pris-kort ul{margin-bottom:12px}
.er-pris-fremhaevet{border-color:var(--blaa); box-shadow:0 10px 28px rgba(26,86,219,.10)}
.er-pris-maerkat{position:absolute; top:-10px; left:20px; background:var(--blaa); color:var(--er-tekst); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:999px}

/* ---------- Formularer ---------- */
.er-form{max-width:430px}
.er-form label{display:block; margin:0 0 4px; font-size:13.5px; font-weight:600; color:var(--ink)}
.er-form input,.er-form select,.er-form textarea{
  width:100%; padding:12px 12px; margin-bottom:16px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--flade); border:1px solid var(--linje); border-radius:10px; outline:none;
}
.er-form input:focus,.er-form select:focus,.er-form textarea:focus{border-color:var(--blaa); box-shadow:0 0 0 3px var(--blaa-svag)}
.er-form textarea{min-height:126px; resize:vertical}
.er-form .er-knap-fyldt{width:100%; padding:12px; font-size:15px; border:0}
.er-hjaelp{font-size:12.5px; color:var(--daemp); margin:-8px 0 16px}
.er-status{margin-top:12px; padding:12px 12px; border-radius:10px; font-size:14px; border:1px solid var(--linje); background:var(--flade)}
.er-status.ok{border-color:#a9d9c4; background:#eefaf4; color:var(--er-ok)}
.er-status.fejl{border-color:#e8c2ba; background:#fdf2f0; color:var(--er-fejl)}
.er-status:empty{display:none}

/* ---------- Footer ---------- */
.er-fod{border-top:1px solid var(--linje); background:var(--flade); margin-top:32px}
.er-fod-inder{max-width:1240px; margin:0 auto; padding:24px; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between; font-size:13px; color:var(--daemp)}
.er-fod a:hover{color:var(--blaa)}

/* ---------- Tablet ---------- */
@media (max-width:1080px){
  .er-moduler{grid-template-columns:repeat(4,minmax(0,1fr))}
  .er-udforsk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .er-to-spalter{grid-template-columns:minmax(0,1fr); }
  .er-hero-inder{grid-template-columns:minmax(0,1fr)}
  .er-hero-kort{max-width:280px}
}
@media (max-width:820px){
  /* Kolonnetallet styres nu af auto-fit nederst i filen, saa skjulte
     kasser ikke efterlader tomme ruder og streger. */
  .er-hero-tekst h1{font-size:28px}
}

/* ---------- Mobil ---------- */
@media (max-width:640px){
  .er-top-inder{gap:8px; padding:8px 16px; min-height:0}
  .er-top-links{order:3; flex-basis:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:0}
  .er-top-links a{padding:8px 8px; font-size:13.5px; white-space:nowrap; border-bottom:0}
  .er-top-links a.er-akt{border-bottom:0}
  .er-top-handling{margin-left:auto}
  .er-knap-tom,.er-knap-fyldt{padding:8px 12px; font-size:13.5px}
  /* Log ind / Opret konto laa oven paa overskriften paa mobil. Paa smal skaerm
     lægges de i floedet over heroen i stedet for at svaeve. */
  .er-hero-log{position:relative; top:auto; right:auto; justify-content:flex-end;
    padding:12px 16px 0; z-index:3}
  .er-hero-inder{padding:12px 16px 16px}
  .er-top-links{flex-wrap:nowrap}
  .er-hero-tekst h1{font-size:24px}
  .er-hero-soeg{flex-wrap:wrap}
  .er-hero-soeg-felt{flex:1 1 100%}
  .er-hero-soeg .er-knap-fyldt{flex:1 1 100%}
  .er-hero-knapper .er-knap-tom,.er-hero-knapper .er-knap-fyldt{flex:1 1 100%}
  .er-hero-kort{max-width:none}
  .er-moduler{grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 16px; margin-top:16px}
  .er-noegletal,.er-to-spalter,.er-priser,.er-logoer{padding-left:16px; padding-right:16px}
  .er-udforsk{grid-template-columns:minmax(0,1fr)}
  /* 36 og ikke 26: navigationen er sticky og 61 px hoej, og med 26 px
     forsvandt sidens overskrift ind under baandet ved det mindste
     stroeg paa skaermen. Maalt: ved scroll 40 laa h1 paa 47, baandets
     bund paa 61. Nu er der luft under det sticky baand. */
  .er-side{padding:32px 16px 48px}
  .er-side h1{font-size:23px}
  .er-fod-inder{padding:16px 16px}
}

/* Heroens ejendomskort: markering naar handelslageret selv siger demodata. */
.er-hero-demodata{margin:8px 0 0;font-size:10.5px;line-height:1.4;color:var(--er-vent);
  background:rgba(201,162,39,.22);padding:4px 8px;border-radius:10px}

/* Soegeikonet i topnavigationen, som paa referencebillede 1/19. */
.er-top-soeg{display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; color:var(--daemp);
  border:1px solid transparent}
.er-top-soeg:hover{color:var(--ink); border-color:var(--linje)}

/* Skjult skal betyde skjult. .er-mm-skuffe har display:flex, og uden
   denne regel vinder display over hidden-attributten: skuffen ville
   ligge usynligt hen over hele skaermen og opsluge hvert eneste tryk.
   Samme fejl er tidligere fundet paa app-skaermene - reglen staar
   allerede i er_appskal.css, men de offentlige sider laeser den ikke. */
[hidden]{display:none !important}

/* =====================================================================
   MOBIL 390-430 px — rettet efter test paa rigtig iPhone (13.09.2026)
   =====================================================================
   Desktop er designlaast og roeres ikke: alt herunder ligger bag
   @media (max-width:899px) og aendrer intet over den bredde.

   Fejlene der rettes, i den raekkefoelge de blev fundet:
     1. Topbaren proevede at vise seks menupunkter + to knapper paa 390 px.
        "Kontakt" blev klippet af kanten. -> hamburger + skuffe.
     2. Beroeringsmaal nede paa 31-37 px. Apple og WCAG siger 44.
     3. "Soeg", "Se priser" og "Se demo" laa som tre ens fuldbrede klodser
        uden hierarki. -> soegning for sig, de to CTA'er side om side.
     4. Fire tomme billedfelter paa 190 px hver aad en tredjedel af siden.
        Felterne bliver staaende (de skal kunne fyldes uden omdesign),
        men de siger nu hvorfor de er tomme, og fylder 64 px i stedet.
     5. En fastgjort chatboble kunne daekke knapper. -> reserveret plads.
   ===================================================================== */

/* ---------- 1. Topbar og mobilmenu ---------- */
.er-mm-knap{display:none}

@media (max-width:899px){
  /* Desktop-listen og kontoknapperne flytter ind i skuffen. */
  .er-top-links{display:none !important}
  .er-top-handling .er-knap-tom,
  .er-top-handling .er-knap-fyldt{display:none}

  .er-top-inder{display:flex; align-items:center; gap:8px;
    padding:8px 12px; min-height:56px}
  .er-top-mrk{flex:1 1 auto; min-width:0}
  .er-top-navn{min-width:0}
  .er-top-navn strong{font-size:15px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; display:block}
  .er-top-slogan{display:none}          /* sloganet er ikke navigation */
  .er-top-handling{margin-left:auto; flex:0 0 auto; gap:4px}

  /* 44 px beroeringsmaal — ogsaa selv om ikonet indeni er 17 px. */
  .er-top-soeg{width:44px; height:44px; border-radius:10px}

  .er-mm-knap{display:inline-flex; flex-direction:column;
    align-items:center; justify-content:center; gap:4px;
    width:44px; height:44px; padding:0; flex:0 0 auto;
    background:none; border:1px solid var(--linje); border-radius:10px;
    cursor:pointer; -webkit-tap-highlight-color:transparent}
  .er-mm-knap span{display:block; width:19px; height:2px; border-radius:6px;
    background:var(--ink); transition:transform .16s, opacity .16s}
  .er-mm-knap.er-mm-aaben span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .er-mm-knap.er-mm-aaben span:nth-child(2){opacity:0}
  .er-mm-knap.er-mm-aaben span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .er-mm-knap:focus-visible{outline:2px solid var(--blaa); outline-offset:2px}
}

/* Skuffen selv. Den ligger i body, saa den er uafhaengig af topbarens
   stacking context — ellers kan et panel laegge sig oven paa den. */
.er-mm-taeppe{position:fixed; inset:0; z-index:998;
  background:rgba(8,20,36,.55); -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px)}
.er-mm-skuffe{position:fixed; top:0; right:0; bottom:0; z-index:999;
  width:min(86vw,340px); background:#fff; color:var(--ink);
  box-shadow:-14px 0 40px rgba(8,20,36,.28);
  display:flex; flex-direction:column;
  padding:0 0 max(16px,env(safe-area-inset-bottom));
  overscroll-behavior:contain; overflow-y:auto}
.er-mm-top{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border-bottom:1px solid var(--linje);
  position:sticky; top:0; background:#fff; z-index:1}
.er-mm-titel{font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--daemp)}
.er-mm-luk{width:44px; height:44px; flex:0 0 auto; font-size:19px; line-height:1;
  background:none; border:1px solid var(--linje); border-radius:10px;
  color:var(--ink); cursor:pointer}
.er-mm-luk:focus-visible{outline:2px solid var(--blaa); outline-offset:2px}
.er-mm-liste{display:flex; flex-direction:column; padding:8px 8px 4px}
.er-mm-liste a{display:flex; align-items:center; min-height:52px;
  padding:0 12px; border-radius:10px; text-decoration:none;
  font-size:16px; font-weight:550; color:var(--ink)}
.er-mm-liste a:active{background:var(--flade2,#f2f5f9)}
.er-mm-liste a.er-mm-akt{color:#1c2b33; background:#fff3cd;
  font-weight:700}
.er-mm-knapper{display:flex; flex-direction:column; gap:8px;
  padding:12px 16px 4px; margin-top:auto;
  border-top:1px solid var(--linje)}
.er-mm-knapper a{display:flex; align-items:center; justify-content:center;
  min-height:48px; font-size:15.5px; border-radius:10px}
body.er-mm-laast{overflow:hidden}

/* ---------- 2-5. Selve forsiden paa telefonbredde ---------- */
@media (max-width:640px){
  /* Beroeringsmaal. Gaelder alt, der kan trykkes paa. */
  .er-knap-tom,.er-knap-fyldt{min-height:48px; padding:12px 16px;
    font-size:15px; display:inline-flex; align-items:center;
    justify-content:center}
  .er-hero-pil{width:40px; height:40px; font-size:15px}

  /* Soegefeltet for sig. Det er sidens primaere handling. */
  .er-hero-soeg-felt input{min-height:48px; font-size:16px}  /* 16px = ingen
                                    auto-zoom paa iOS, naar feltet faar fokus */

  /* De to CTA'er side om side, med hver sin vaegt: "Se priser" er den
     fyldte, "Se demo" den tomme. Foer laa de som to ens klodser under
     "Soeg", saa alle tre lignede den samme knap. */
  .er-hero-knapper{display:flex; flex-wrap:nowrap; gap:8px}
  .er-hero-knapper .er-knap-tom,
  .er-hero-knapper .er-knap-fyldt{flex:1 1 0; min-width:0; white-space:nowrap}

  /* Modulkasserne: to i bredden er rigtigt, men de skal kunne rammes. */
  .er-modul{min-height:72px}

  /* Tomme billedfelter. De bliver staaende, saa et rigtigt foto kan
     saettes ind uden omdesign - men de skal ikke aede siden imens. */
  .er-udforsk-billede{aspect-ratio:auto; height:64px; position:relative;
    display:flex; align-items:center; justify-content:center}
  
  .er-udforsk-krop{padding:12px 12px 12px}
  .er-udforsk-krop h3{font-size:15px}
  .er-udforsk-krop p{font-size:13px}
  .er-udforsk-krop .er-link{display:inline-flex; align-items:center;
    min-height:44px}

  /* Luft. Sektionsafstandene var sat til desktop og gav 4.100 px side. */
  .er-to-spalter{gap:16px; padding-top:24px; padding-bottom:24px}
  .er-afsnit-titel{font-size:19px; margin-bottom:12px}
  .er-udforsk{gap:12px}

  /* Plads til en fastgjort chatboble, saa den ikke kan daekke
     sidens sidste knapper. */
  .er-fod{padding-bottom:84px}
}

/* Chatwidgetten (indlejres af serveren) maa aldrig laegge sig oven paa
   navigationen eller en aaben menu. */
#chat-med-os,.chat-med-os,[data-chat-widget]{z-index:900 !important}
@media (max-width:640px){
  #chat-med-os,.chat-med-os,[data-chat-widget]{
    bottom:max(12px,env(safe-area-inset-bottom)) !important}
}
body.er-mm-laast #chat-med-os,
body.er-mm-laast .chat-med-os,
body.er-mm-laast [data-chat-widget]{display:none !important}

/* ---------- Beroeringsmaal, resten ---------- */
@media (max-width:640px){
  /* Heroens prikker var 6 px. Selve prikken bliver 6 px - men den faar
     et gennemsigtigt trykfelt paa 44 px omkring sig. */
  .er-hero-prikker{gap:0}
  /* Trykfeltet er 44 px, men det maa ikke MALES. Basisreglen laengere
     oppe giver .er-hero-prik en hvid baggrund - uden overstyring her
     blev den aktive prik en 44 px hvid cirkel. Kun ::after tegner. */
  .er-hero-prik{width:44px !important; height:44px !important;
    padding:0; border:0; background:none !important; position:relative;
    -webkit-tap-highlight-color:transparent}
  .er-hero-prik.er-akt{background:none !important}
  .er-hero-prik::after{content:""; position:absolute; top:50%; left:50%;
    width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
    background:rgba(255,255,255,.45)}
  .er-hero-prik[aria-current="true"]::after,
  .er-hero-prik.er-akt::after{background:#fff; width:9px; height:9px;
    margin:-4.5px 0 0 -4.5px}

  /* "Se alle handler →" og lignende er rigtige maal, ikke loebende tekst. */
  .er-afsnit-hoved .er-link,
  .er-udforsk-krop .er-link,
  .er-kort-fod .er-link{min-height:44px; display:inline-flex;
    align-items:center}

  /* Logostriben i toppen er et link til forsiden og skal kunne rammes. */
  .er-top-mrk{min-height:44px; display:flex; align-items:center}
}

@media (max-width:640px){
  /* Handelstabellen: syv kolonner kan ikke laeses paa 390 px, og
     adresselinket var 14 px hoejt. Raekkerne bliver til kort, hvor hele
     adresselinjen er trykfeltet. Tabellen beholder sin markup, saa den
     stadig kan laeses af en skaermlaeser og eksporteres af er_eksport.js. */
  .er-blok-hoved{display:flex; flex-wrap:wrap; align-items:baseline;
    justify-content:space-between; gap:8px}
  .er-blok-hoved .er-link{min-height:44px; display:inline-flex;
    align-items:center}
  .er-tabel-blok .er-tabel thead{position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .er-tabel-blok .er-tabel,
  .er-tabel-blok .er-tabel tbody,
  .er-tabel-blok .er-tabel tr,
  .er-tabel-blok .er-tabel td{display:block; width:auto; min-width:0}
  .er-tabel-blok .er-tabel tr{border:1px solid var(--linje); border-radius:10px;
    padding:8px 12px; margin-bottom:8px; background:#fff}
  .er-tabel-blok .er-tabel td{border:0; padding:2px 0; font-size:13px}
  /* Adressen er raekkens overskrift og hele dens trykfelt. */
  .er-tabel-blok .er-tabel td:nth-child(2){font-size:15px; font-weight:650}
  .er-tabel-blok .er-tabel td:nth-child(2) .er-link{min-height:44px;
    display:flex; align-items:center; width:100%}
  /* Dato, by, type, koeber og saelger faar deres kolonnenavn med,
     nu hvor overskriftsraekken er vaek. */
  .er-tabel-blok .er-tabel td:nth-child(1)::before{content:"Dato: "}
  .er-tabel-blok .er-tabel td:nth-child(3)::before{content:"By: "}
  .er-tabel-blok .er-tabel td:nth-child(4)::before{content:"Type: "}
  .er-tabel-blok .er-tabel td:nth-child(5)::before{content:"Pris: "}
  .er-tabel-blok .er-tabel td:nth-child(6)::before{content:"Køber: "}
  .er-tabel-blok .er-tabel td:nth-child(7)::before{content:"Sælger: "}
  .er-tabel-blok .er-tabel td:nth-child(1)::before,
  .er-tabel-blok .er-tabel td:nth-child(3)::before,
  .er-tabel-blok .er-tabel td:nth-child(4)::before,
  .er-tabel-blok .er-tabel td:nth-child(5)::before,
  .er-tabel-blok .er-tabel td:nth-child(6)::before,
  .er-tabel-blok .er-tabel td:nth-child(7)::before{
    color:var(--daemp); font-weight:500}
  .er-tabel-blok .er-tabel td.er-tal{text-align:left}
  /* En raekke, der spaender over alle kolonner (fx "Henter handler ..."),
     skal ikke have et kolonnenavn klistret paa. */
  .er-tabel-blok .er-tabel td[colspan]::before{content:"" !important}
}

@media (max-width:640px){
  /* Handelskortene er hoeje. Tolv af dem gjorde siden 2.000 px laengere,
     end den var med tabellen. Paa telefon vises de fem nyeste, og
     "Se alle handler" foerer til den fulde liste. Raekkerne fjernes ikke
     fra DOM'en - eksporten og skaermlaeseren ser dem stadig. */
  .er-tabel-blok .er-tabel tbody tr:nth-child(n+6){display:none}
  .er-tabel-blok::after{content:"Viser de 5 nyeste. Tryk «Se alle handler» for hele listen.";
    display:block; font-size:12px; color:var(--daemp); padding:2px 2px 0}

  /* Fodlinks laa som 15 px hoej loebende tekst. */
  .er-fod a{min-height:44px; display:inline-flex; align-items:center;
    padding:0 2px}
  .er-fod-links,.er-fod-bund{display:flex; flex-wrap:wrap;
    align-items:center; gap:4px 16px}
}

@media (max-width:640px){
  /* Pilene ved siden af prikkerne: 44 px trykfelt, diskret cirkel. */
  .er-hero-pil{width:44px; height:44px; font-size:15px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    color:var(--er-tekst); border-radius:50%}
}

/* ---------- Noegletalsbaandet naar kun nogle af tallene har en kilde ----------
   Tre af de fire noegletal har ingen dokumenteret kilde og skjuler deres egen
   kasse. Baandet var sat op med faste 4 (og paa mobil 2) kolonner plus
   nth-child-borders, saa den ene overlevende kasse endte som en halv rude med
   en streg ud i ingenting. auto-fit lader tomme spor falde sammen, og
   borderen saettes paa kassen selv i stedet for paa position. */
.er-noegletal{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.er-noegletal > div{border-right:1px solid var(--linje); border-bottom:0}
.er-noegletal > div:last-child{border-right:0}
@media (max-width:640px){
  .er-noegletal{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    margin-top:16px}
  .er-noegletal > div{border-right:0; border-bottom:1px solid var(--linje);
    padding:12px 12px; min-height:56px}
  .er-noegletal > div:last-child{border-bottom:0}
}

@media (max-width:640px){
  /* Resterende beroeringsmaal fundet ved maaling paa 390-430 px.
     Telefonnummer og e-mail er de to vigtigste links paa kontaktsiden
     og skal kunne rammes med en tommelfinger, ikke en musemarkoer. */
  a[href^="tel:"],a[href^="mailto:"]{min-height:44px; display:inline-flex;
    align-items:center}
  /* Afkrydsningsfeltet ved vilkaarene paa opret-siden var 13x13 px. */
  input[type="checkbox"],input[type="radio"]{width:22px; height:22px;
    min-width:22px; margin:0}
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .er-tjek{display:flex; align-items:center; gap:8px; min-height:44px}
  /* Inline-links i loebende tekst (fx "vilkaarene") faar hoejde uden at
     bryde linjen op: de vokser lodret om deres egen tekst. */
  .er-tjek a,.er-side p > a{padding:12px 0; display:inline-block}
  /* "Se alle pakker" og lignende afsnitslinks. */
  .er-priser a.er-link,.er-side a.er-link{min-height:44px;
    display:inline-flex; align-items:center}
}

@media (max-width:640px){
  /* Afkrydsningsfeltet ved samtykket: 24 px opfylder WCAG 2.5.8 (AA), og
     hele etiketlinjen er selv trykfelt, saa det reelle maal er ~44 px. */
  input[type="checkbox"],input[type="radio"]{width:24px; height:24px;
    min-width:24px}
  /* Inline-links i samtykketeksten og i loebende afsnit. De maa ikke bryde
     linjen, saa de vokser lodret med padding i stedet for at blive blokke. */
  label a,.er-side a,.er-kort a{padding-top:12px; padding-bottom:12px}
  label a,.er-side p a{display:inline-block}
}

@media (max-width:640px){
  /* "Se alle pakker" paa opret-siden ligger i en div med inline-stil og
     blev ikke ramt af de generelle regler. */
  .er-kort a[href="priser.html"],.er-side a[href="priser.html"]{
    min-height:44px; display:inline-flex; align-items:center}
}

/* ---------- Heroen efter overgangen til det lyse system ----------
   Maalt 13.09: hvid brodtekst paa den nye lyse hero gav 1.12:1.
   Heroen er nu lys med moerk tekst. Foerst naar der ligger et rigtigt
   foto (klassen .er-hero-foto saettes af scriptet), kommer den moerke
   scrim og den hvide tekst tilbage - og saa er kontrasten hoej igen. */
.er-hero{ background:var(--er-flade-2); }
.er-hero-tekst h1{ color:var(--er-tekst); }
.er-hero-tekst .er-under{ color:var(--er-tekst-2); }
.er-hero-pil{ color:var(--er-tekst); background:var(--er-flade);
  border:1px solid var(--er-kant-kraftig); }
.er-hero-prik::after{ background:var(--er-kant-kraftig) !important; }
.er-hero-prik.er-akt::after{ background:var(--er-accent) !important; }
.er-hero-kort{ background:var(--er-flade); border:1px solid var(--er-kant);
  color:var(--er-tekst); box-shadow:var(--er-skygge); }
.er-hero-kort b,.er-hero-kort strong{ color:var(--er-tekst); }
.er-hero-demodata{ background:var(--er-vent-svag); color:var(--er-vent);
  border:1px solid #ecd9ae; }

/* Med foto ligger der en moerk scrim under teksten. Den tidligere regel
   satte teksten til --er-tekst (#1c2b33) OVENPAA rgba(20,32,38,.88) -
   omkring 1.05:1. Kommentaren ovenfor sagde hvid tekst; reglen sagde
   det modsatte. Fejlen bed foerst, da fotoet blev taendt. */
.er-hero-foto .er-hero-tekst h1,
.er-hero-foto .er-hero-tekst .er-under{ color:#fff; }
.er-hero-foto .er-hero-soeg input{ background:rgba(255,255,255,.96); }
.er-hero-foto .er-hero-knapper .er-knap-tom{
  background:rgba(255,255,255,.92); }

/* Kildeangivelsen hoerer paa billedet, ikke i en fodnote langt nede. */
/* Klassen maa IKKE hedde noget med "-hero": er_design.css har en bred
   regel [class*="-hero"] med color:var(--er-tekst) !important, som ellers
   tvinger teksten moerk paa den moerke scrim. */
.er-fotokilde{
  /* Fotoet daekker HELE heroen, ogsaa bag modulfliserne. En absolut
     placeret kildelinje i bunden ville derfor ligge et sted, hvor
     fotoet er skjult. Den floder med tekstblokken i stedet. */
  margin:12px 0 0; font-size:11.5px; line-height:1.4;
  color:rgba(255,255,255,.88);
  background:rgba(12,22,28,.42); padding:4px 8px; border-radius:6px;
  display:inline-block; max-width:52ch;
}
/* Billedet toner roligt ind, saa skiftet mellem sager ikke blinker.
   Ingen bevaegelse for den, der har fravalgt det. */
.er-hero-medie{ transition:opacity .45s ease; }
@media (prefers-reduced-motion: reduce){
  .er-hero-medie{ transition:none; }
}
.er-hero-foto .er-hero-medie::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,32,38,.88) 0%,rgba(20,32,38,.62) 46%,rgba(20,32,38,.20) 100%); }

@media (max-width:640px){
  .er-hero-pil{ background:var(--er-flade); border:1px solid var(--er-kant-kraftig);
    color:var(--er-tekst); }
}

/* =====================================================================
   SKÆRM 01 MOD REFERENCE 01 (modtaget 13.09)
   =====================================================================
   Kun det, referencebilledet viser. Punkterne er talt op mod billedet,
   ikke fortolket.
   ===================================================================== */

/* Ref: søgeikon + Log ind + Opret konto øverst til højre PÅ heroen.
   VIGTIGT: .er-hero-medie er en dekorativ flade der daekker hele heroen.
   Uden pointer-events:none ligger den OVENPAA knapperne, og de kan ikke
   trykkes — feltet ser aktivt ud, men er doedt. Det er praecis den fejl,
   Morten fandt paa iPhone. Maalt af mobilinteraktion.py. */
.er-hero-medie{ pointer-events:none; }
.er-hero-inder,.er-hero-log{ position:relative; }
.er-hero-log{ position:absolute; top:14px; right:22px; z-index:6;
  display:flex; align-items:center; gap:8px; }
.er-hero-log .er-top-soeg{ width:34px; height:34px; color:var(--er-tekst-2);
  background:rgba(255,255,255,.9); border:1px solid var(--er-kant); }
@media (max-width:640px){
  /* 44 px beroeringsmaal ogsaa paa heroens soegeikon. */
  .er-hero-log .er-top-soeg{ width:44px; height:44px; }
}
.er-hero-log .er-knap-tom{ background:#fff; border-color:var(--er-kant-kraftig); }

/* Ref: modulikonerne er farvede glyffer i afrundede, meget lyse felter. */
.er-modul-ikon{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; flex:0 0 auto;
  background:var(--er-accent-svag); color:var(--er-accent);
}
/* Energi & ESG er grøn i referencen — semantikken går igen i modulrækken. */
.er-modul[href*="energi"] .er-modul-ikon{
  background:var(--er-ok-svag); color:var(--er-ok); }
.er-modul[href*="risiko"] .er-modul-ikon{
  background:var(--er-vent-svag); color:var(--er-vent); }
.er-modul{ display:flex; align-items:center; gap:12px; padding:12px 12px;
  background:var(--er-flade); border:1px solid var(--er-kant);
  border-radius:var(--er-radius); box-shadow:var(--er-skygge);
  text-decoration:none; color:var(--er-tekst); font-weight:600;
  font-size:13px; line-height:1.25; }
.er-modul:hover{ border-color:var(--er-accent); box-shadow:var(--er-skygge-loeft); }

/* Ref: nøgletalsbåndet har fire celler med ikon, stort tal og label. */
.er-noegletal-ikon{
  width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--er-accent-svag); color:var(--er-accent);
  flex:0 0 auto; }
.er-noegletal b{ font-size:19px; font-weight:720; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }

/* Ref: demokortet har tre grønne flueben og en blå CTA under skærmen. */
.er-tjek{ list-style:none; margin:12px 0 12px; padding:0;
  display:flex; flex-direction:column; gap:8px; }
.er-tjek li{ display:flex; align-items:flex-start; gap:8px;
  font-size:13px; line-height:1.45; color:var(--er-tekst-2); }
.er-tjek li::before{
  content:"✓"; flex:0 0 auto; width:18px; height:18px; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--er-ok-svag); color:var(--er-ok);
  font-size:11px; font-weight:800; }
.er-demo-kort .er-knap-fyldt{ width:100%; justify-content:center;
  min-height:42px; }

@media (max-width:640px){
  .er-hero-log{ position:static; padding:12px 16px 0; justify-content:flex-end; }
  .er-modul{ min-height:72px; }
}

/* Ejendomsbilledet i sagskortet. Et baand oeverst, saa kortets egne
   felter bliver staaende praecis hvor de stod. */
.er-sagsbillede{
  display:block; width:calc(100% + 28px); margin:-14px -14px 8px;
  height:104px; border-radius:10px 10px 0 0;
  background-size:cover; background-position:center;
  background-color:var(--er-flade-2);
}
.er-sagsbillede-kilde{
  display:block; font-size:10px; line-height:1.3;
  /* Ingen negativ margin: den trak linjen op i billedet, saa teksten
     blev skaaret over af billedets underkant. */
  color:var(--er-tekst-2); margin:8px 0 8px;
}

/* Property Twin-kasser paa forsidens ejendomskort. Samme moenster som
   X-Ray, saa de to steder ser ens ud. */
.er-sagsbilledeskal{ position:relative; }

/* Ejendommen foerst, data ovenpaa. Baandet er hoejt nok til at bygningen
   kan ses som en bygning - ikke som en baggrund bag fire bokse. */
.er-sagsbilledeskal .er-sagsbillede{ height:250px; margin-bottom:0; }

/* Kasserne ligger i hjoernerne, saa midten - hvor bygningen er - staar fri.
   Let forskellig dybde giver fornemmelsen af noget, der svaever over
   ejendommen frem for fire bokse paa stribe. */
.er-sagstwin{ position:absolute; inset:0; pointer-events:none; }
.er-sagstwin button{
  pointer-events:auto; position:absolute; display:flex; align-items:center;
  gap:8px; background:rgba(255,255,255,.93);
  border:1px solid rgba(255,255,255,.7); border-radius:10px;
  padding:4px 8px; font:inherit; font-size:10.5px; line-height:1.25;
  cursor:pointer; text-align:left; max-width:60%;
  backdrop-filter:saturate(1.1) blur(1px);
  transition:transform .16s ease, box-shadow .16s ease;
}
/* Log ind/Opret konto ligger OVENPAA heroen og naar ned over kortets
   oeverste kant. Foerste kasse skal starte under den. */
.er-sagstwin button:nth-child(1){ top:34px;    left:10px;
  box-shadow:0 4px 14px -6px rgba(20,23,26,.22); }
.er-sagstwin button:nth-child(2){ top:84px;    right:10px;
  box-shadow:0 4px 14px -6px rgba(20,23,26,.22); }
.er-sagstwin button:nth-child(3){ bottom:52px; left:14px;
  box-shadow:0 4px 14px -6px rgba(20,23,26,.22); }
.er-sagstwin button:nth-child(4){ bottom:10px; right:14px;
  box-shadow:0 4px 14px -6px rgba(20,23,26,.22); }
.er-sagstwin button:hover{ background:#fff; transform:translateY(-1px);
  box-shadow:0 4px 14px -6px rgba(20,23,26,.22); }
.er-sagstwin button:focus-visible{ outline:2px solid var(--er-accent);
  outline-offset:2px; }
.er-sagstwin .prik{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.er-sagstwin .prik.groen{ background:var(--er-ok); }
.er-sagstwin .prik.gul{ background:var(--er-vent); }
.er-sagstwin .prik.roed{ background:var(--er-fejl); }
.er-sagstwin .etiket{ color:var(--er-tekst-2); }
.er-sagstwin .vaerdi{ font-weight:650; }

@media (prefers-reduced-motion: reduce){
  .er-sagstwin button{ transition:none; }
  .er-sagstwin button:hover{ transform:none; }
}

@media (max-width:640px){
  /* Paa en telefon er der plads til to. Ejendommen skal stadig kunne ses. */
  .er-sagstwin button:nth-child(n+3){ display:none; }
  .er-sagsbilledeskal .er-sagsbillede{ height:200px; }
  .er-sagstwin button{ max-width:72%; font-size:10px; }
}

/* Matrikelgraensen oven paa fotoet. Diskret cyan, saa den laeses som
   data - ikke som en tegning. Farven ligger i EjendomsRadars blaa
   familie og skriger ikke. */
.er-sagsomrids{
  position:absolute; inset:0; pointer-events:none; z-index:2;
}
.er-sagsomrids svg{ width:100%; height:100%; display:block; }
.er-sagsomrids polygon{
  fill:rgba(56,189,248,.14);
  stroke:#38bdf8; stroke-width:1.6; stroke-linejoin:round;
  filter:drop-shadow(0 0 3px rgba(56,189,248,.55));
}
/* Et roligt pulsslag viser, at graensen er levende data - ikke et
   paamalet omrids. Slaaet fra for den, der har fravalgt bevaegelse. */
@keyframes er-omrids-puls{
  0%,100%{ stroke-opacity:.95; } 50%{ stroke-opacity:.55; }
}
.er-sagsomrids polygon{ animation:er-omrids-puls 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .er-sagsomrids polygon{ animation:none; }
}
.er-sagsmaerke{
  position:absolute; left:10px; bottom:8px; z-index:3;
  font-size:9.5px; letter-spacing:.03em; text-transform:uppercase;
  color:#e6f7ff; background:rgba(12,32,44,.62);
  padding:4px 8px; border-radius:6px; pointer-events:none;
}

/* Kildebadge: kvaliteten foerst, myndighedsnavnet ved klik. Kilden
   forsvinder ikke - den staar bare ikke som det foerste, en kunde
   laeser. Inde i X-Ray og rapporter staar den fulde angivelse. */
.er-kildebadge{
  font:inherit; font-size:10.5px; line-height:1.3; cursor:pointer;
  color:var(--er-ok); background:rgba(31,92,74,.08);
  border:1px solid rgba(31,92,74,.22); border-radius:999px;
  padding:4px 8px; letter-spacing:.01em;
}
.er-kildebadge:hover{ background:rgba(31,92,74,.14); }
.er-kildebadge:focus-visible{ outline:2px solid var(--er-accent);
  outline-offset:2px; }
.er-kildefuld{ display:block; margin-top:4px; font-size:10px;
  color:var(--er-tekst-2); }

/* Modulpreviews: hvert kort viser, hvad modulet goer. Tegnet som SVG
   hvor det forklarer noget, og som ejendommens eget luftfoto hvor
   ejendommen ER pointen. */
.er-udforsk-billede{ position:relative; overflow:hidden; }
.er-preview{ position:absolute; inset:0; display:block; }
.er-preview svg{ width:100%; height:100%; display:block; }
.er-preview-chip{
  position:absolute; display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.93); border-radius:10px;
  padding:4px 8px; font-size:9.5px; line-height:1.2; font-weight:650;
  color:var(--er-tekst); box-shadow:0 1px 2px rgba(20,23,26,.06);
}
.er-preview-chip .p{ width:6px; height:6px; border-radius:50%; }
.er-preview-chip.et{ left:8px; top:8px; }
.er-preview-chip.to{ right:8px; bottom:8px; }
.er-udforsk-kort:hover .er-preview svg .liv{ opacity:1; }
.er-preview svg .liv{ opacity:.75; transition:opacity .18s ease; }
@media (prefers-reduced-motion: reduce){
  .er-preview svg .liv{ transition:none; }
}
@media (max-width:820px){
  .er-udforsk-billede{ aspect-ratio:auto; height:96px; }
}

/* Property Twin i sagskortet. Hoejere end det flade foto, fordi en
   3D-bygning med kasser omkring skal kunne ses. */
.er-sagstwin3d{ position:relative; width:calc(100% + 28px);
  margin:-14px -14px 8px; height:300px; border-radius:10px 10px 0 0;
  overflow:hidden; background:#060d1a; }
.er-sagstwin3d .maplibregl-ctrl-bottom-right{ bottom:6px; right:6px; }
.er-sagstwin3d canvas{ outline:none; }
/* Foerste gang: en diskret besked om at bygningen kan drejes. */
.er-twinhint{ position:absolute; left:10px; top:10px; z-index:5;
  font-size:10.5px; line-height:1.3; color:#e6f2ff;
  background:rgba(8,18,30,.66); padding:4px 8px; border-radius:10px;
  pointer-events:none; transition:opacity .5s ease; }
@media (max-width:640px){ .er-sagstwin3d{ height:260px; } }
@media (prefers-reduced-motion: reduce){ .er-twinhint{ transition:none; } }

/* =====================================================================
   PROPERTY TWIN PAA MOBILFORSIDEN - KOMPAKT PREVIEW
   =====================================================================
   Motoren har en indbygget smal-tilstand (.erpv-smal): paa telefon stiller
   den datakortene som en liste i fuld bredde UNDER kortet, og laegger
   betjeningspanelet ind i floedet. Det er rigtigt paa arbejdsfladen, hvor
   man skal kunne laese alle seksten felter.

   Paa forsiden er det forkert: listen skubber hovedmodulerne flere
   skaermlaengder ned. Her rulles den tilstand tilbage, saa kasserne bliver
   liggende OVEN PAA bygningen - og der vises kun tre.

   Alle reglerne er scopet til .er-sagstwin3d, som kun forsiden bruger.
   Property Twin, X-Ray og alle interne sider er uroerte, og intet er
   fjernet - kun skjult paa denne ene flade.
   ===================================================================== */
.er-twin-cta,
.er-twin-cta:link,
.er-twin-cta:visited{
  display:none; width:100%; margin:8px 0 2px; padding:12px 12px;
  font:inherit; font-size:13.5px; font-weight:650; cursor:pointer;
  color:#fff; background:var(--er-accent, #1a56db);
  border:0; border-radius:10px; text-align:center; text-decoration:none;
}
.er-twin-cta:hover{ filter:brightness(1.06); }
.er-twin-cta:focus-visible{ outline:2px solid var(--er-accent); outline-offset:2px; }

/* Ingen sort flade, mens kortet starter op. Ortofotoet ligger som baggrund
   fra foerste oejeblik, og laerredet toner ind ovenpaa. */
.er-sagstwin3d{ background:var(--er-flade-2); }
.er-sagstwin3d[data-preview]{ background-size:cover; background-position:center; }
.er-sagstwin3d canvas{ opacity:0; transition:opacity .45s ease; }
.er-sagstwin3d.klar canvas{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .er-sagstwin3d canvas{ transition:none; }
}

/* Rul motorens smal-tilstand tilbage - kun for forsidens vaert. */
.er-sagstwin3d.erpv-smal{ display:block; height:300px !important;
  min-height:300px !important; overflow:hidden !important; }
.er-sagstwin3d.erpv-smal [data-erpv-kort]{ position:absolute !important;
  inset:0 !important; height:auto !important; border-radius:0; }

/* erpv-chip-raekke: kasserne i en fast raekke oeverst paa billedet.
   Motoren placerer dem ikke i smal-tilstand, saa absolut placering gav
   tre kasser oven i hinanden paa samme punkt. Her afgoer floedet
   placeringen, og inline-koordinater kan ikke ramme forbi. */
.er-sagstwin3d.erpv-smal .erpv-overlay{
  position:absolute !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
  height:auto !important;   /* inset er kortform for alle fire sider - den nulstillede left og right */
  display:flex !important; flex-wrap:wrap; gap:8px;
  /* motoren stiller dem i en kolonne i smal-tilstand - her skal de staa paa raekke */
  flex-direction:row !important; align-items:flex-start;
  padding:8px 8px 24px; margin:0 !important; pointer-events:none;
  background:linear-gradient(to bottom, rgba(6,13,26,.74), rgba(6,13,26,0));
}
.er-sagstwin3d.erpv-smal .erpv-chip{
  position:static !important; inset:auto !important; transform:none !important;
  width:auto !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; padding:4px 8px !important;
  display:inline-flex !important; align-items:baseline; gap:8px;
  border-radius:999px !important; pointer-events:auto;
  background:rgba(7,16,28,.82) !important; border:0 !important;
  box-shadow:none !important; line-height:1.25;
}
.er-sagstwin3d.erpv-smal .erpv-chip .luk,
.er-sagstwin3d.erpv-smal .erpv-chip .k,
.er-sagstwin3d.erpv-smal .erpv-chip .mere{ display:none !important; }
.er-sagstwin3d.erpv-smal .erpv-chip .l{
  margin:0 !important; font-size:9.5px !important; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#b9cde6 !important;
}
.er-sagstwin3d.erpv-smal .erpv-chip .v{
  margin:0 !important; font-size:12.5px !important; font-weight:650;
  color:#fff !important; white-space:nowrap;
}
/* Forbindelseslinjerne pegede paa kassernes gamle placering. */
.er-sagstwin3d.erpv-smal #erPvLinjer{ display:none !important; }

/* Fire kasser ved navn. Forsiden beder motoren om Energiklasse, CVR,
   Byggeaar og Etager via data-erpv-felter, saa der skjules ikke laengere
   efter position - det ville ramme foerste og fjerde af netop de fire. */
.er-sagstwin3d.erpv-smal .erpv-chip{ flex:0 0 auto; }

/* Betjeningspanel og kvalitetsstempel hoerer til arbejdsfladen. */
.er-sagstwin3d .erpv-panel,
.er-sagstwin3d .erpv-stempel,
.er-sagstwin3d .erkl-panel,
.er-sagstwin3d .ertegn-panel{ display:none !important; }

/* Knappen hoerer til den kompakte visning - den er vejen til alle
   seksten felter, som ikke vises her. */
.er-sagstwin3d.erpv-smal + .er-twin-cta{ display:block; }

/* Telefon: lavere, saa modulerne under kommer med paa skaermen. */
@media (max-width:820px){
  .er-sagstwin3d.erpv-smal{ height:240px !important; min-height:240px !important; }
}

/* =====================================================================
   ENERGIKASSEN PAA FORSIDEN
   =====================================================================
   Kassen er ikke laengere et link med et miniaturebillede, men det rigtige
   vaerktoej fra Energi & ESG-modulet - samme komponent, samme rute. Den
   har en skala med ni klasser, et haandtag der skal kunne trækkes, og en
   tabel med tal. Det kan ikke staa i en spalte paa en fjerdedel: maalt i
   browseren blev vaerten 32 px bred og 972 px hoej.

   Derfor faar den hele raekken. De tre oevrige kort beholder deres
   stoerrelse og plads i gitteret.
   ===================================================================== */
.er-udforsk-energi{
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:8px;
  padding:12px 16px 16px;
  cursor:default;
}
.er-udforsk-energi:hover{ transform:none; border-color:var(--er-kant, #dfe5e7); }
.er-udforsk-energi > .er-udforsk-krop{ padding:0; }
.er-energipil-vaert{ width:100%; }
/* Vaerktoejet har sin egen moerke flade - linket under skal kunne laeses
   paa kortets lyse baggrund, ikke paa vaerktoejets. */
.er-udforsk-energi > .er-link,
.er-udforsk-energi > .er-link:link,
.er-udforsk-energi > .er-link:visited{
  align-self:flex-start; font-size:13px; font-weight:650;
  color:var(--blaa, #1a56db); text-decoration:none;
}
.er-udforsk-energi > .er-link:hover{ text-decoration:underline; }

@media (max-width:820px){
  /* Paa telefon staar tabellen alligevel i een kolonne - kassen skal bare
     ikke klemmes af gitterets sidepadding. */
  .er-udforsk-energi{ padding:12px 12px 12px; }
}

/* =====================================================================
   DE OTTE HOVEDKASSER
   =====================================================================
   Foer var de otte ens: samme hvide flade, samme blaa ikon. Raekken saa ud
   som en menu, ikke som otte forskellige vaerktoejer, og oejet havde intet
   at orientere sig efter.

   Hver kasse faar nu sin egen kuloer - een pr. fagomraade, i samme
   daempede familie, saa de stadig hoerer sammen. Kuloeren staar i ikonet
   og i en tynd stribe langs toppen; selve fladen forbliver hvid, saa
   raekken ikke bliver et farvekort.

   Struktur, raekkefoelge og stoerrelse er uaendret.
   ===================================================================== */
.er-modul{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Striben i modulets egen kuloer. Den ligger paa toppen, saa den laeses
   som en fane og ikke som en ramme. */
.er-modul::before{
  content:; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--m-kulor, #1a56db);
  opacity:.85;
}
.er-modul:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(16,32,58,.14);
  border-color:var(--m-kulor, #1a56db);
}
.er-modul:hover::before{ opacity:1; }
.er-modul .er-modul-ikon{
  background:var(--m-flade, #e8effd);
  color:var(--m-kulor, #1a56db);
  transition:transform .16s ease;
}
.er-modul:hover .er-modul-ikon{ transform:scale(1.08); }
.er-modul:focus-visible{ outline:2px solid var(--m-kulor, #1a56db); outline-offset:2px; }

/* Een kuloer pr. fagomraade. Alle er daempede og i samme familie - det er
   identitet, ikke dekoration. */
.er-modul[href*=xray]     { --m-kulor:#1a56db; --m-flade:#e8effd; }
.er-modul[href*=handler]  { --m-kulor:#0f766e; --m-flade:#dff2f0; }
.er-modul[href*=ejer]     { --m-kulor:#4338ca; --m-flade:#ebeaff; }
.er-modul[href*=energi]   { --m-kulor:#15803d; --m-flade:#e4f3e9; }
.er-modul[href*=revisor]  { --m-kulor:#a16207; --m-flade:#fbf1d8; }
.er-modul[href*=dd_ny]    { --m-kulor:#475569; --m-flade:#eceff4; }
.er-modul[href*=crm]      { --m-kulor:#7e22ce; --m-flade:#f4e9ff; }
.er-modul[href*=admin]    { --m-kulor:#525a66; --m-flade:#edeef1; }
.er-modul[href*=bankcase]    { --m-kulor:#0e7490; --m-flade:#dff3f7; }
.er-modul[href*=portefoelje] { --m-kulor:#be185d; --m-flade:#fce7f1; }
.er-modul[href*=husleje]     { --m-kulor:#c2410c; --m-flade:#fdeee4; }
.er-modul[href*=investering] { --m-kulor:#0369a1; --m-flade:#e2f0fb; }

@media (prefers-reduced-motion: reduce){
  .er-modul, .er-modul .er-modul-ikon{ transition:none; }
  .er-modul:hover{ transform:none; }
  .er-modul:hover .er-modul-ikon{ transform:none; }
}

/* =====================================================================
   MODULKORTENE - fire i bredden, to raekker
   =====================================================================
   Kasserne var smalle pinde paa een raekke og lignede en menulinje. Nu er
   de kort med billedfelt, overskrift, en linje om indholdet og en pil.
   Samme otte moduler, samme links, samme raekkefoelge.
   ===================================================================== */
.er-moduler{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:-30px auto 0;
}
.er-modulkort{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  padding:0; min-height:0; overflow:hidden;
  position:relative;
}
/* Striben fra den generelle modulregel ville skaere gennem billedet. */
.er-modulkort::before{ display:none; }

.er-modulkort-billede{
  display:block; width:100%; aspect-ratio:16/8; overflow:hidden;
  background:var(--m-flade, #e8effd);
  position:relative;
}
.er-modulkort-billede svg,
.er-modulkort-billede canvas{ display:block; width:100%; height:100%; }
/* Ortofotoet paa Ejendom & X-Ray. */
.er-modulkort-billede[data-foto]{ background-size:cover; background-position:center; }

.er-modulkort-krop{
  display:block; padding:12px 12px 8px; flex:1 1 auto;
}
.er-modulkort-titel{
  display:block; font-size:14px; font-weight:680; color:var(--ink, #10203a);
  line-height:1.25; margin-bottom:4px;
}
.er-modulkort-tekst{
  display:block; font-size:12.5px; font-weight:450; line-height:1.5;
  color:var(--daemp, #5b6b80);
}
.er-modulkort-pil{
  align-self:flex-end; margin:0 12px 12px;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600;
  background:var(--m-flade, #e8effd); color:var(--m-kulor, #1a56db);
  transition:transform .16s ease, background-color .16s ease;
}
.er-modulkort:hover .er-modulkort-pil{
  transform:translateX(3px);
  background:var(--m-kulor, #1a56db); color:#fff;
}
@media (prefers-reduced-motion: reduce){
  .er-modulkort-pil{ transition:none; }
  .er-modulkort:hover .er-modulkort-pil{ transform:none; }
}

@media (max-width:1000px){
  .er-moduler{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  /* Paa telefon er to i bredden stadig laesbart, fordi teksten er kort. */
  .er-moduler{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
    padding:0 16px; margin-top:16px; }
  .er-modulkort-krop{ padding:8px 12px 4px; }
  .er-modulkort-titel{ font-size:13px; }
  .er-modulkort-tekst{ font-size:11.5px; line-height:1.45; }
  .er-modulkort-pil{ width:24px; height:24px; margin:0 12px 8px; font-size:12px; }
  .er-modul{ min-height:0; }
}

/* =====================================================================
   DANMARKSKORTET
   =====================================================================
   Tekst til venstre, levende kort til hoejre. Kortet er ikke interaktivt -
   sektionen er en indgang til soegningen, ikke et arbejdskort.
   ===================================================================== */
.er-danmarkskort-sektion{ max-width:1240px; margin:24px auto 0; padding:0 24px; }
.er-danmarkskort-boks{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,10fr);
  gap:0; align-items:stretch;
  background:linear-gradient(135deg, #f4f8fd 0%, #eaf1fa 100%);
  border:1px solid var(--linje, #dde5ee); border-radius:14px; overflow:hidden;
}
.er-danmarkskort-tekst{ padding:32px 32px 32px; align-self:center; }
.er-danmarkskort-tekst h2{
  margin:8px 0 8px; font-size:30px; line-height:1.15; font-weight:700;
  color:var(--ink, #10203a); letter-spacing:-.01em;
}
.er-danmarkskort-tekst p{
  margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--daemp, #5b6b80);
  max-width:42ch;
}
.er-danmarkskort{ min-height:330px; position:relative; background:#0b1624; }
.er-danmarkskort canvas{ display:block; }

/* Naalene paa byerne. Ingen tal - et tal uden kilde hoerer ikke til her. */
.er-soegenaal, .er-danmarksnaal{
  width:12px; height:12px; border-radius:50%;
  background:#1a56db; border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(9,20,40,.5);
}

.er-fmaerkat{
  display:inline-block; font-size:11px; font-weight:680; letter-spacing:.07em;
  text-transform:uppercase; color:#0f766e; background:#dff2f0;
  padding:4px 8px; border-radius:999px;
}
.er-fmaerkat-blaa{ color:#1a56db; background:#e8effd; }

.er-knap-primaer,
.er-knap-primaer:link,
.er-knap-primaer:visited{
  display:inline-block; padding:12px 16px; border-radius:10px;
  background:var(--blaa, #1a56db); color:#fff; text-decoration:none;
  font-size:13.5px; font-weight:650;
}
.er-knap-primaer:hover{ filter:brightness(1.06); }

/* =====================================================================
   PROSPEKTKASSEN
   ===================================================================== */
.er-udforsk-prospekt{
  grid-column:1 / -1;
  display:flex; flex-direction:column; gap:12px;
  padding:16px 16px 16px; cursor:default;
}
.er-udforsk-prospekt:hover{ transform:none; }
.er-udforsk-prospekt > .er-udforsk-krop{ padding:0; }
.er-udforsk-prospekt h3{ margin:8px 0 8px; font-size:19px; line-height:1.25; }
.er-udforsk-prospekt p{ margin:0; max-width:56ch; }
.er-prospekt-trin{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px;
}
.er-prospekt-trin li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:12.5px; line-height:1.45; color:var(--daemp, #5b6b80);
}
.er-prospekt-trin span{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#e8effd; color:#1a56db; font-size:11px; font-weight:700;
}
.er-udforsk-prospekt > .er-knap-primaer{ align-self:flex-start; }

@media (max-width:900px){
  .er-danmarkskort-boks{ grid-template-columns:minmax(0,1fr); }
  .er-danmarkskort{ min-height:260px; order:-1; }
  .er-danmarkskort-tekst{ padding:24px 16px 24px; }
  .er-danmarkskort-tekst h2{ font-size:24px; }
  .er-prospekt-trin{ grid-template-columns:minmax(0,1fr); }
}

/* Navnet er .er-fmaerkat og ikke .er-maerkat, fordi er_design.css har en
   bred gruppe med color:!important, som ogsaa ramte den gamle klasse og
   gjorde teksten hvid paa en lys flade. Et eget navn er mere holdbart end
   at svare igen med !important. */

/* Energi og prospekt side om side - som i referencen. De er begge
   funktionsdemonstrationer og hoerer sammen; hver for sig i fuld bredde
   blev siden en lang stribe. */
/* to kolonner, ingen tomme celler */
@media (min-width:901px){
  /* Fire kolonner efterlod to tomme celler ved siden af energikassen -
     548 px bredt og 982 px hoejt hvidt felt. Med to kolonner ligger
     X-Ray og Marked i foerste raekke og Prospekt og Energi i anden,
     og der er ingen tomme celler tilbage. */
  .er-udforsk{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .er-udforsk-energi, .er-udforsk-prospekt{ grid-column:auto; }
}

/* =====================================================================
   DEMOKASSEN
   =====================================================================
   Feltet var graat og tomt med en afspilningstrekant ovenpaa - det lignede
   et billede, der ikke var kommet. Nu ligger der et ortofoto af
   visningsejendommen bag, med et moerkt slaer over saa trekanten kan
   laeses. Billedet viser noget, produktet faktisk handler om.
   ===================================================================== */
.er-demo-skaerm{
  position:relative; overflow:hidden;
  background-color:#0b1624;
  background-image:
    linear-gradient(rgba(8,18,32,.50), rgba(8,18,32,.64)),
    url("er_billedeproxy.php?kilde=ortofoto&lat=55.466776&lon=8.444367&m=150&b=640&h=360");
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
.er-demo-play{
  position:relative; z-index:2;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}

/* =====================================================================
   TILLIDSBAANDENE
   ===================================================================== */
.er-tillidsbaand{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  font-size:12.5px; font-weight:550;
}
.er-tillidsbaand li{
  display:flex; align-items:center; gap:8px;
}
/* Fluebenet tegnes af CSS, saa der ikke skal hentes et ikonsaet for fire
   linjer tekst. */
.er-tillidsbaand li::before{
  content:""; flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background:#15803d;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 5.9l-4.3 5.2a.8.8 0 01-1.2.05L4 9.1a.8.8 0 111.1-1.1l1.6 1.6 3.8-4.6a.8.8 0 011.2 1z' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 5.9l-4.3 5.2a.8.8 0 01-1.2.05L4 9.1a.8.8 0 111.1-1.1l1.6 1.6 3.8-4.6a.8.8 0 011.2 1z' fill='black'/></svg>") center/contain no-repeat;
}

/* I hero: lys tekst paa fotoet, med et slaer saa den kan laeses uanset
   hvilket luftfoto der ligger bagved. */
.er-tillidsbaand-hero{
  max-width:1240px; margin:12px auto 0; padding:0 24px;
  position:relative; z-index:4;
  color:#fff;
}
.er-tillidsbaand-hero li{
  background:rgba(8,18,32,.52);
  padding:4px 12px 4px 8px; border-radius:999px;
  backdrop-filter:saturate(1.15) blur(2px);
}
.er-tillidsbaand-hero li::before{ background:#7ee2a8; }

/* I bunden: moerk tekst paa den lyse flade. */
.er-tillidsbaand-sektion{
  max-width:1240px; margin:32px auto 0; padding:16px 24px;
  border-top:1px solid var(--linje, #dde5ee);
}
.er-tillidsbaand-sektion .er-tillidsbaand{
  justify-content:space-between; color:var(--daemp, #5b6b80);
}

@media (max-width:820px){
  .er-tillidsbaand-hero{ padding:0 16px; gap:8px 8px; font-size:11.5px; }
  /* Paa telefon er der ikke plads til fem - de to vigtigste bliver staaende
     og resten foelger med paa naeste linje, hvis der er plads. */
  .er-tillidsbaand-hero li:nth-child(n+4){ display:none; }
  .er-tillidsbaand-sektion{ padding:16px; }
  .er-tillidsbaand-sektion .er-tillidsbaand{ justify-content:flex-start; gap:8px 12px; font-size:12px; }
}

/* =====================================================================
   FORSLAG UNDER SOEGEFELTET
   =====================================================================
   Listen ligger oven paa hero-fotoet. Den har derfor sin egen hvide flade
   og et hoejt z-index: baade kortet og Property Twin tegner i samme
   omraade, og forslagene skal ligge over dem begge.
   ===================================================================== */
.er-soegforslag{
  position:relative; z-index:40;
  max-width:560px; margin:8px 0 0;
  background:#fff; border:1px solid var(--linje, #dde5ee);
  border-radius:10px; box-shadow:0 18px 44px rgba(10,22,42,.22);
  overflow:hidden auto; max-height:min(52vh, 380px);
  text-align:left;
}
.er-soeggruppe{
  padding:8px 12px 4px; font-size:10.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:#8496ab;
  background:#f7f9fc;
}
.er-soegtraef{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:8px 12px; border:0; background:#fff; font:inherit;
  border-top:1px solid #dfe5e7;
}
.er-soegtraef:first-child{ border-top:0; }
.er-soegtraef:hover, .er-soegtraef.er-akt{ background:#eef4ff; }
.er-soegtraef:focus-visible{ outline:2px solid var(--blaa, #1a56db); outline-offset:-2px; }
.er-soegtitel{
  display:block; font-size:13.5px; font-weight:620; color:var(--ink, #10203a);
  line-height:1.3;
}
.er-soegunder{
  display:block; font-size:11.5px; color:var(--daemp, #5b6b80); margin-top:2px;
}
.er-soegbesked{
  padding:12px; font-size:12.5px; color:var(--daemp, #5b6b80);
}

@media (max-width:820px){
  .er-soegforslag{ max-width:none; max-height:min(46vh, 300px); }
  .er-soegtitel{ font-size:13px; }
}

/* =====================================================================
   SLOERET BAG HERO-TEKSTEN
   =====================================================================
   Den oprindelige gradient er vandret - moerk til venstre, lys til hoejre -
   og passer til desktop, hvor teksten staar i venstre spalte.

   Paa telefon fylder overskriften hele bredden, saa hoejre halvdel af
   "Skab bedre beslutninger." landede paa den lyse del af luftfotoet. Det
   blev foerst synligt, da hero-billedet blev skarpt og lyst; foer skjulte
   sloeringen det.
   ===================================================================== */
@media (max-width:820px){
  .er-hero-medie::after{
    background:linear-gradient(180deg,
      rgba(8,20,36,.88) 0%,
      rgba(8,20,36,.80) 38%,
      rgba(8,20,36,.58) 66%,
      rgba(8,20,36,.34) 100%);
  }
}
@media (min-width:821px){
  /* Et par procent kraftigere i venstre side: teksten skal staa skarpt,
     ogsaa naar luftfotoet er lyst. */
  .er-hero-medie::after{
    background:linear-gradient(90deg,
      rgba(8,20,36,.90) 0%,
      rgba(8,20,36,.70) 46%,
      rgba(8,20,36,.24) 100%);
  }
}

/* =====================================================================
   PLADS TIL ASSISTENTKNAPPEN
   =====================================================================
   Knappen ligger fast i hoejre hjoerne over alt andet. Uden plads i
   bunden stod den oven paa det sidste indhold paa telefonen.
   ===================================================================== */
@media (max-width:820px){
  body{ padding-bottom:78px; }
}

/* =====================================================================
   BREDDEN PAA STORE SKAERME
   =====================================================================
   Alle sektioner var laast til 1240 px. Paa en 1920 px skaerm gav det 340 px
   tom margen i hver side, og siden lignede en mobilspalte midt paa en PC.

   Bredden vokser nu med skaermen i tre trin - men med et loft: en
   tekstlinje paa 2400 px kan ingen laese. Kort, gitre og grafer faar
   pladsen; broedteksten beholder sit maal.

   Alt ligger bag min-width. Mobil og tablet er uroerte.
   ===================================================================== */
:root{ --er-sidebredde:1240px; }

@media (min-width:1500px){
  :root{ --er-sidebredde:1480px; }
}
@media (min-width:1900px){
  :root{ --er-sidebredde:1720px; }
}

@media (min-width:1200px){
  .er-moduler,
  .er-noegletal,
  .er-danmarkskort-sektion,
  .er-to-spalter,
  .er-tillidsbaand-hero,
  .er-tillidsbaand-sektion{
    max-width:var(--er-sidebredde);
  }
  /* Heroens indhold foelger med, saa overskrift og soegefelt ikke bliver
     staaende i venstre hjoerne af en meget bred skaerm. */
  .er-hero-inder{ max-width:var(--er-sidebredde); }
}

@media (min-width:1500px){
  /* Mere luft mellem kortene, naar der er plads til det. */
  .er-moduler{ gap:16px; }
  .er-modulkort-krop{ padding:12px 16px 8px; }
  .er-modulkort-titel{ font-size:15px; }
  .er-modulkort-tekst{ font-size:13px; }

  /* Kortet skal imponere, ikke ligne et vindue. */
  .er-danmarkskort{ min-height:460px; }
  .er-danmarkskort-tekst{ padding:32px 48px; }
  .er-danmarkskort-tekst h2{ font-size:36px; }
  .er-danmarkskort-tekst p{ font-size:15px; }

  .er-udforsk{ gap:16px; }
  .er-udforsk-energi, .er-udforsk-prospekt{ padding:16px 24px 24px; }
  .er-udforsk-prospekt h3{ font-size:21px; }
}

@media (min-width:1900px){
  .er-danmarkskort{ min-height:540px; }
  .er-danmarkskort-tekst h2{ font-size:40px; }
}

/* =====================================================================
   PROPERTY X-RAY-VISUALET
   =====================================================================
   Ortofoto i bunden, et blaat slaer ovenpaa saa det ligner
   EjendomsRadar og ikke et luftfoto, og fire hotspots med
   ejendommens rigtige tal.
   ===================================================================== */
.er-udforsk-billede[data-xray]{ position:relative; overflow:hidden; }
.er-xray-slaer{
  position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(10,32,64,.78) 0%, rgba(12,58,96,.52) 52%, rgba(16,92,120,.44) 100%);
}
/* Scanningslinjen er diskret med vilje: den skal antyde en
   gennemlysning, ikke stjaele opmaerksomheden fra tallene. */
.er-xray-scan{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(94,234,212,.85), transparent);
  box-shadow:0 0 12px rgba(94,234,212,.6);
  animation:erXrayScan 4.6s ease-in-out infinite;
}
@keyframes erXrayScan{
  0%   { top:6%;  opacity:0; }
  18%  { opacity:.95; }
  82%  { opacity:.95; }
  100% { top:94%; opacity:0; }
}
.er-xray-punkt{
  position:absolute; display:flex; flex-direction:column; gap:1px;
  padding:4px 8px; border-radius:10px;
  background:rgba(7,20,38,.74); border:1px solid rgba(94,234,212,.34);
  line-height:1.15; white-space:nowrap;
}
.er-xray-navn{
  font-size:8.5px; font-weight:650; letter-spacing:.06em;
  text-transform:uppercase; color:#7fd8c6;
}
.er-xray-vaerdi{ font-size:12px; font-weight:680; color:#fff; }
@media (prefers-reduced-motion: reduce){
  .er-xray-scan{ animation:none; opacity:.5; top:50%; }
}

/* =====================================================================
   PROPERTY TWIN PAA PC
   =====================================================================
   Hero-gitteret gav sagskortet 210 px, uanset skaermbredde. Derfor var
   Twin en thumbnail - og derfor slog motorens smal-tilstand til, for
   den maaler vaerten og ikke vinduet.

   Spalten vokser nu med skaermen. Over cirka 420 px slaar smal-
   tilstanden fra af sig selv, og saa er hele vaerktoejet der:
   betjeningspanel, datalag, feltantal og kasser man kan traekke.
   ===================================================================== */
@media (min-width:1200px){
  .er-hero-inder{ grid-template-columns:minmax(0,1fr) 420px; }
  .er-sagstwin3d{ height:400px; }
  .er-hero-kort{ padding:16px 16px; font-size:13.5px; }
  .er-hero-kort h3{ font-size:17px; }
  .er-hero-kort dl{ font-size:13.5px; }
}
@media (min-width:1500px){
  .er-hero-inder{ grid-template-columns:minmax(0,1fr) 520px; }
  .er-sagstwin3d{ height:460px; }
}
@media (min-width:1900px){
  .er-hero-inder{ grid-template-columns:minmax(0,1fr) 600px; }
  .er-sagstwin3d{ height:520px; }
  .er-hero-tekst h1{ font-size:40px; }
}

/* Paa PC skal Twin vaere et vaerktoej, ikke et billede: fuld hoejde og
   betjeningspanelet med. Panelet var skjult for ALLE .er-sagstwin3d - det
   var rigtigt paa telefon, hvor der ikke er plads, men forkert paa en
   skaerm med 600 px at give. */
@media (min-width:1200px){
  .er-sagstwin3d.erpv-smal{ height:400px !important; min-height:400px !important; }
  .er-sagstwin3d .erpv-panel{ display:flex !important; }
  .er-sagstwin3d.erpv-smal .erpv-overlay{ padding:8px 12px 24px; }
}
@media (min-width:1500px){
  .er-sagstwin3d.erpv-smal{ height:460px !important; min-height:460px !important; }
}
@media (min-width:1900px){
  .er-sagstwin3d.erpv-smal{ height:520px !important; min-height:520px !important; }
}

/* =====================================================================
   FRA EJENDOM TIL BESLUTNING
   =====================================================================
   Moerk navy, fordi sektionen markerer at forsiden slutter - og at det her
   er sammenfatningen, ikke endnu en raekke kasser.
   ===================================================================== */
.er-beslutning{
  margin-top:32px; padding:48px 0 48px;
  background:
    radial-gradient(1200px 420px at 18% 0%, rgba(26,86,219,.28), transparent 62%),
    radial-gradient(900px 380px at 88% 100%, rgba(15,118,110,.24), transparent 60%),
    linear-gradient(160deg, #081527 0%, #0b1e35 52%, #081422 100%);
  color:#e8f0fa;
}
.er-beslutning-inder{
  max-width:var(--er-sidebredde, 1240px); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px;
  align-items:center;
}
.er-beslutning h2{
  margin:12px 0 16px; font-size:28px; line-height:1.2; font-weight:700;
  letter-spacing:-.01em; color:#fff;
}

/* ---- datanettet ---- */
.er-datanet{
  position:relative; width:100%; aspect-ratio:1/.82; max-width:520px;
  margin-top:8px;
}
.er-datanet-midte{
  position:absolute; left:50%; top:50%; width:34%; aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background-image:
    linear-gradient(rgba(8,20,36,.30), rgba(8,20,36,.30)),
    url("er_billedeproxy.php?kilde=ortofoto&lat=55.466776&lon=8.444367&m=150&b=440&h=440");
  background-size:cover; background-position:center;
  border:2px solid rgba(127,216,198,.55);
  box-shadow:0 0 0 10px rgba(26,86,219,.14), 0 0 46px rgba(26,86,219,.42);
}
.er-datanet-punkt{
  position:absolute; transform:translate(-50%,-50%);
  padding:8px 12px; border-radius:999px; white-space:nowrap;
  font-size:11.5px; font-weight:620; color:#dff3ee;
  background:rgba(9,24,44,.86); border:1px solid rgba(127,216,198,.28);
  box-shadow:0 4px 14px -6px rgba(20,23,26,.22);
  animation:erDatapunkt 5.4s ease-in-out infinite;
}
/* Otte punkter i en ring. Placeringen er regnet, ikke gaettet: 45 grader
   mellem hvert, med den foerste i toppen. */
.er-datanet-punkt[data-p="1"]{ left:50%;   top:4%;    animation-delay:0s; }
.er-datanet-punkt[data-p="2"]{ left:82%;   top:18%;   animation-delay:.35s; }
.er-datanet-punkt[data-p="3"]{ left:95%;   top:50%;   animation-delay:.7s; }
.er-datanet-punkt[data-p="4"]{ left:82%;   top:82%;   animation-delay:1.05s; }
.er-datanet-punkt[data-p="5"]{ left:50%;   top:96%;   animation-delay:1.4s; }
.er-datanet-punkt[data-p="6"]{ left:18%;   top:82%;   animation-delay:1.75s; }
.er-datanet-punkt[data-p="7"]{ left:5%;    top:50%;   animation-delay:2.1s; }
.er-datanet-punkt[data-p="8"]{ left:18%;   top:18%;   animation-delay:2.45s; }

/* Linjen ind mod ejendommen. Den tegnes som et element FOER punktet, saa
   den ligger bagved, og den peger altid mod midten. */
.er-datanet-punkt::before{
  content:""; position:absolute; left:50%; top:50%;
  width:var(--linje, 120px); height:1px; transform-origin:0 0;
  background:linear-gradient(90deg, rgba(127,216,198,.62), rgba(127,216,198,0));
  transform:rotate(var(--vinkel, 0deg));
  animation:erDatalinje 3.6s ease-in-out infinite;
  animation-delay:inherit;
}
.er-datanet-punkt[data-p="1"]::before{ --vinkel:90deg;  --linje:34%; }
.er-datanet-punkt[data-p="2"]::before{ --vinkel:132deg; --linje:30%; }
.er-datanet-punkt[data-p="3"]::before{ --vinkel:180deg; --linje:34%; }
.er-datanet-punkt[data-p="4"]::before{ --vinkel:228deg; --linje:30%; }
.er-datanet-punkt[data-p="5"]::before{ --vinkel:270deg; --linje:34%; }
.er-datanet-punkt[data-p="6"]::before{ --vinkel:312deg; --linje:30%; }
.er-datanet-punkt[data-p="7"]::before{ --vinkel:0deg;   --linje:34%; }
.er-datanet-punkt[data-p="8"]::before{ --vinkel:48deg;  --linje:30%; }

@keyframes erDatapunkt{
  0%,100% { transform:translate(-50%,-50%); }
  50%     { transform:translate(-50%,calc(-50% - 4px)); }
}
@keyframes erDatalinje{
  0%,100% { opacity:.34; }
  50%     { opacity:.9; }
}

/* ---- hoejre side ---- */
.er-beslutning-trin{
  list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.er-beslutning-trin li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; line-height:1.45; color:#c3d6ea;
}
.er-beslutning-trin span{
  flex:0 0 auto; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#06121f; background:#7fd8c6;
}
.er-beslutning-kort{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  margin-bottom:24px;
}
.er-beslutning-kort a,
.er-beslutning-kort a:link,
.er-beslutning-kort a:visited{
  display:block; padding:12px 12px; border-radius:10px; text-decoration:none;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  transition:background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.er-beslutning-kort a:hover{
  background:rgba(127,216,198,.12); border-color:rgba(127,216,198,.4);
  transform:translateY(-2px);
}
.er-beslutning-kort b{ display:block; font-size:13.5px; color:#fff; margin-bottom:4px; }
.er-beslutning-kort span{ display:block; font-size:11.5px; color:#9db5cd; line-height:1.4; }
.er-beslutning-cta{ border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:650; }

@media (max-width:900px){
  /* Paa telefon stables de: foerst datanettet, saa vejen til beslutningen. */
  .er-beslutning-inder{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .er-beslutning{ padding:32px 0 32px; }
  .er-beslutning h2{ font-size:22px; }
  .er-datanet{ max-width:340px; margin:8px auto 0; }
  .er-datanet-punkt{ font-size:10.5px; padding:4px 8px; }
  .er-beslutning-kort{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* =====================================================================
   MICRO-MOTION PAA DE OTTE MODULKORT
   =====================================================================
   Meget lidt med vilje: grafikken traekker vejret langsomt, og kortet
   loefter sig ved hover. Ingen voldsom bevaegelse.
   ===================================================================== */
.er-modulkort-billede svg{ transition:transform .55s ease; }
.er-modulkort:hover .er-modulkort-billede svg{ transform:scale(1.06); }
.er-modulkort-billede svg .liv,
.er-modulkort-billede svg circle{ transition:opacity .4s ease; }

@media (prefers-reduced-motion: reduce){
  .er-datanet-punkt, .er-datanet-punkt::before{ animation:none; }
  .er-beslutning-kort a, .er-modulkort-billede svg{ transition:none; }
  .er-modulkort:hover .er-modulkort-billede svg{ transform:none; }
}

/* =====================================================================
   MICRO-MOTION PR. MODUL
   =====================================================================
   Otte forskellige bevaegelser, ikke den samme otte gange. Hver enkelt
   fortaeller, hvad modulet goer: X-Ray scanner, markedet tegner sig,
   relationerne forbindes, energien gaar mod naeste klasse.

   Alt er langsomt, bruger kun transform og opacity, og stopper helt ved
   prefers-reduced-motion.
   ===================================================================== */

/* Scanningen - X-Ray og dokumentkontrollen. */
.mb-scan{ animation:mbScan 5.2s ease-in-out infinite; }
@keyframes mbScan{
  0%   { transform:translateY(0);    opacity:0; }
  12%  { opacity:.95; }
  88%  { opacity:.95; }
  100% { transform:translateY(54px); opacity:0; }
}

/* Kurven tegner sig selv. */
.mb-tegn{
  stroke-dasharray:240; stroke-dashoffset:240;
  animation:mbTegn 4.4s ease-in-out infinite;
}
@keyframes mbTegn{
  0%   { stroke-dashoffset:240; }
  45%  { stroke-dashoffset:0; }
  88%  { stroke-dashoffset:0; opacity:1; }
  100% { stroke-dashoffset:0; opacity:.25; }
}

/* Markoerer og noder. */
.mb-puls{ animation:mbPuls 3.4s ease-in-out infinite; transform-origin:center; }
@keyframes mbPuls{
  0%,100% { opacity:.55; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.22); }
}

/* Relationslinjerne taendes paa skift. */
.mb-forbind{
  stroke-dasharray:70; stroke-dashoffset:70;
  animation:mbForbind 4.8s ease-in-out infinite;
}
@keyframes mbForbind{
  0%   { stroke-dashoffset:70; opacity:.15; }
  35%  { stroke-dashoffset:0;  opacity:.75; }
  80%  { stroke-dashoffset:0;  opacity:.75; }
  100% { stroke-dashoffset:0;  opacity:.15; }
}

/* Energipilen gaar mod den bedre klasse. */
.mb-vandre{ animation:mbVandre 4.6s ease-in-out infinite; }
@keyframes mbVandre{
  0%,100% { transform:translateX(0); opacity:.7; }
  50%     { transform:translateX(9px); opacity:1; }
}
.mb-aktiv{ animation:mbGloed 3.2s ease-in-out infinite; }
@keyframes mbGloed{
  0%,100% { opacity:1; }
  50%     { opacity:.7; }
}

/* Bjaelker der fyldes. */
.mb-fyld{ transform-origin:left center; animation:mbFyld 4.2s ease-in-out infinite; }
@keyframes mbFyld{
  0%      { transform:scaleX(.12); }
  45%     { transform:scaleX(1); }
  88%     { transform:scaleX(1); }
  100%    { transform:scaleX(.12); }
}

/* Regnskabets soejler vokser ind. */
.mb-vokser{ transform-origin:center bottom; animation:mbVokser 4.6s ease-out infinite; }
@keyframes mbVokser{
  0%      { transform:scaleY(.08); opacity:.3; }
  40%     { transform:scaleY(1);   opacity:1; }
  88%     { transform:scaleY(1);   opacity:1; }
  100%    { transform:scaleY(.08); opacity:.3; }
}

/* Kontrollerne taendes een ad gangen. */
.mb-taend{ animation:mbTaend 5.4s ease-in-out infinite; }
@keyframes mbTaend{
  0%,10%  { opacity:.18; transform:translateX(-4px); }
  28%     { opacity:1;   transform:translateX(0); }
  86%     { opacity:1;   transform:translateX(0); }
  100%    { opacity:.18; transform:translateX(-4px); }
}

/* Pipeline-kortet flytter status. */
.mb-flyt{ animation:mbFlyt 6.2s ease-in-out infinite; }
@keyframes mbFlyt{
  0%,14%   { transform:translate(0,0); }
  40%,58%  { transform:translate(48px,-16px); }
  84%,100% { transform:translate(96px,-32px); opacity:.85; }
}

/* Ringen om selskabet. */
.mb-ring{ transform-origin:80px 40px; animation:mbRing 3.8s ease-in-out infinite; }
@keyframes mbRing{
  0%,100% { opacity:.5; transform:scale(1); }
  50%     { opacity:1;  transform:scale(1.14); }
}

/* Paa desktop loefter kortet sig, og grafikken traekker et hak ind. */
@media (hover:hover){
  .er-modulkort:hover .er-modulkort-billede svg{ transform:scale(1.05); }
}

@media (prefers-reduced-motion: reduce){
  .mb-scan, .mb-tegn, .mb-puls, .mb-forbind, .mb-vandre, .mb-aktiv,
  .mb-fyld, .mb-vokser, .mb-taend, .mb-flyt, .mb-ring{
    animation:none !important;
  }
  .mb-tegn{ stroke-dashoffset:0; }
  .mb-forbind{ stroke-dashoffset:0; opacity:.6; }
  .mb-fyld, .mb-vokser{ transform:none; }
}

/* =====================================================================
   DET TOMME OMRAADE VED ENERGI & ESG
   =====================================================================
   Energikassen var 812 px hoej og prospektkassen 302. I samme gitterraekke
   straekkes begge til raekkens hoejde, saa prospektkassen fik 510 px tomt
   indhold - det var det store hvide felt paa PC.

   Tabellen staar nu i to spalter paa brede skaerme, og prospektkassen har
   faaet et visual, der fylder resten. Saa er de to naesten lige hoeje.
   ===================================================================== */
@media (min-width:1100px){
  .er-udforsk-energi .erp-tabel{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
  }
  .er-udforsk-energi .erp-raekke{ font-size:12px; }
  .er-udforsk-energi .erp-mangler{ font-size:10.5px; }
}

/* Prospektets visual: dokumentet scannes og holdes op mod kilderne. */
.er-prospekt-visual{
  margin-top:auto; border-radius:10px; overflow:hidden;
  background:linear-gradient(150deg, #0d2340 0%, #123152 55%, #0a1c2e 100%);
  aspect-ratio:16/7;
}
.er-prospekt-visual svg{ display:block; width:100%; height:100%; }

@media (max-width:900px){
  .er-prospekt-visual{ aspect-ratio:16/8; }
}

/* =====================================================================
   SIDSTE CTA
   =====================================================================
   Forsidens afslutning: samme spoergsmaal som oeverst, nu hvor kunden har
   set hvad systemet kan. Feltet er det SAMME - forsideSoegning() binder sig
   til begge.
   ===================================================================== */
.er-slutcta{
  padding:48px 0 48px;
  background:linear-gradient(170deg, #061120 0%, #0a1c30 60%, #07131f 100%);
  color:#e8f0fa; text-align:center;
}
.er-slutcta-inder{ max-width:760px; margin:0 auto; padding:0 24px; }
.er-slutcta h2{
  margin:0 0 8px; font-size:30px; line-height:1.2; font-weight:700; color:#fff;
  letter-spacing:-.01em;
}
.er-slutcta p{ margin:0 0 24px; font-size:15px; line-height:1.55; color:#a9c1d8; }
.er-slutcta-soeg{ display:flex; gap:8px; margin-bottom:16px; position:relative; }
.er-slutcta-soeg input{
  flex:1 1 auto; padding:12px 16px; font:inherit; font-size:15px;
  border:1px solid rgba(255,255,255,.18); border-radius:10px;
  background:rgba(255,255,255,.96); color:#10203a; outline:none;
}
.er-slutcta-soeg input:focus{ box-shadow:0 0 0 3px rgba(127,216,198,.38); }
.er-slutcta-soeg .er-knap-primaer{ border:0; cursor:pointer; font:inherit; font-size:14.5px; font-weight:650; padding:12px 16px; }
.er-tillidsbaand-moerk{ justify-content:center; color:#93aec6; font-size:12px; }
.er-tillidsbaand-moerk li::before{ background:#7fd8c6; }

@media (max-width:820px){
  .er-slutcta{ padding:32px 0 32px; }
  .er-slutcta h2{ font-size:23px; }
  .er-slutcta-soeg{ flex-direction:column; }
  .er-tillidsbaand-moerk{ justify-content:flex-start; }
}

/* Kasserne skal ikke straekkes til raekkens hoejde. Energikassen er hoejere
   end prospektkassen, og et gitter giver som udgangspunkt begge celler
   raekkens hoejde - saa den korte fik et stort tomt felt indeni. Med
   align-items:start slutter hver kasse, hvor dens indhold slutter. */
@media (min-width:901px){
  /* Kasserne straekkes nu til raekkens hoejde igen. Det var tidligere
     et problem, fordi prospektkassen saa fik et tomt felt indeni -
     men nu vokser dens visual i stedet, saa det, der fylder kassen
     ud, er grafikken og ikke hvidt. */
  .er-udforsk{ align-items:stretch; }

  /* Pladsen fordeles mellem kassens dele. Uden det samler hele
     overskuddet sig eet sted - foerst som hvidt under kassen, og med
     margin-top:auto som et enkelt stort mellemrum over visualet.
     Fire mellemrum paa halvfjerds px laeses som luft; eet paa 290 px
     laeses som en fejl. */
  .er-udforsk-prospekt{ justify-content:space-between; gap:16px; }
  .er-prospekt-visual{
    /* Tegningen er bred og lav og har en viewBox, saa den skalerer
       proportionalt. Uden en oevre graense blev kassen 672 px hoej og
       resten farvet baggrund - saa var det hvide hul bare byttet ud
       med et blaat. */
    margin-top:0; aspect-ratio:auto;
    flex:1 1 auto; min-height:190px; max-height:440px;
  }
}

/* =====================================================================
   SEKVENSEN I BUNDSEKTIONEN
   =====================================================================
   Datakilderne taendes een ad gangen, en puls loeber ind ad linjen mod
   ejendommen, analysen gaar EEN gang rundt, og derefter bygges
   beslutningen op. Alt starter foerst, naar sektionen er paa skaermen.
   ===================================================================== */

/* Foer sekvensen: alt er der, men daempet. Aldrig usynligt - en side,
   der aldrig faar startet sin animation, skal stadig kunne laeses. */
.er-beslutning .er-datanet-punkt{ opacity:.34; animation:none; }
.er-beslutning .er-beslutning-trin li,
.er-beslutning .er-beslutning-kort a{ opacity:.45; }

.er-beslutning.er-koerer .er-datanet-punkt{
  animation:erKildeTaend .7s ease-out forwards;
  animation-delay:calc(.35s + var(--nr, 0) * .38s);
}
@keyframes erKildeTaend{
  0%   { opacity:.2;  transform:translate(-50%,-50%) scale(.86); }
  60%  { opacity:1;   transform:translate(-50%,-50%) scale(1.08); }
  100% { opacity:1;   transform:translate(-50%,-50%) scale(1); }
}

/* Linjen ind mod ejendommen. Pseudoelementet fra foer erstattes af et
   rigtigt element, saa pulsen kan loebe langs det. */
.er-beslutning .er-datanet-punkt::before{ display:none; }
.er-datalinje{
  position:absolute; left:50%; top:50%;
  width:var(--linje, 30%); height:1px; transform-origin:0 0;
  transform:rotate(var(--vinkel, 0deg));
  background:linear-gradient(90deg, rgba(127,216,198,.7), rgba(127,216,198,.06));
  opacity:0; pointer-events:none;
}
.er-beslutning.er-koerer .er-datalinje{
  animation:erLinjeInd .8s ease-out forwards;
  animation-delay:calc(.35s + var(--nr, 0) * .38s);
}
@keyframes erLinjeInd{ to{ opacity:.85; } }

/* Pulsen: en lille prik der loeber ind mod ejendommen. */
.er-datapuls{
  position:absolute; left:0; top:50%; width:5px; height:5px;
  margin-top:-2.5px; border-radius:50%; background:#7fd8c6;
  box-shadow:0 0 8px rgba(127,216,198,.9); opacity:0;
}
.er-beslutning.er-koerer .er-datapuls{
  animation:erPulsLoeb 1.25s ease-in-out 2;
  animation-delay:calc(.45s + var(--nr, 0) * .38s);
}
@keyframes erPulsLoeb{
  0%   { left:0;    opacity:0; }
  15%  { opacity:1; }
  85%  { opacity:1; }
  100% { left:100%; opacity:0; }
}

/* Ejendommen gloeder, mens data hentes ind. */
.er-beslutning.er-koerer .er-datanet-midte{
  animation:erMidteGloed 3.4s ease-in-out infinite;
}
@keyframes erMidteGloed{
  0%,100% { box-shadow:0 0 0 10px rgba(26,86,219,.14), 0 0 46px rgba(26,86,219,.42); }
  50%     { box-shadow:0 0 0 14px rgba(127,216,198,.18), 0 0 62px rgba(26,86,219,.6); }
}

/* Analysen: radarringen gaar EEN gang rundt, naar alle kilder er inde. */
.er-datanet::after{
  content:; position:absolute; left:50%; top:50%;
  width:34%; aspect-ratio:1; transform:translate(-50%,-50%) scale(.9);
  border-radius:50%; border:1.5px solid rgba(127,216,198,.85);
  opacity:0; pointer-events:none;
}
.er-beslutning.er-koerer .er-datanet::after{
  animation:erRadar 1.9s ease-out 3.5s 1;
}
@keyframes erRadar{
  0%   { opacity:.95; transform:translate(-50%,-50%) scale(.9); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(2.35); }
}

/* Beslutningen bygges op - trin for trin, saa resultatkort. */
.er-beslutning.er-koerer .er-beslutning-trin li{
  animation:erIndOvenfra .55s ease-out forwards;
  animation-delay:calc(4.3s + var(--t, 0) * .32s);
}
.er-beslutning-trin li:nth-child(1){ --t:0; }
.er-beslutning-trin li:nth-child(2){ --t:1; }
.er-beslutning-trin li:nth-child(3){ --t:2; }
.er-beslutning-trin li:nth-child(4){ --t:3; }
@keyframes erIndOvenfra{
  0%   { opacity:.25; transform:translateY(8px); }
  100% { opacity:1;   transform:translateY(0); }
}
/* Tallet bliver til et flueben, naar trinnet er naaet. */
.er-beslutning.er-koerer .er-beslutning-trin li span{
  animation:erFlueben .01s linear forwards;
  animation-delay:calc(4.75s + var(--t, 0) * .32s);
}
@keyframes erFlueben{ to{ font-size:0; } }
.er-beslutning.er-koerer .er-beslutning-trin li span::after{
  content:; opacity:0;
}
.er-beslutning.er-koerer .er-beslutning-trin li span::before{
  content:2713; font-size:13px; opacity:0;
  animation:erFluebenInd .35s ease-out forwards;
  animation-delay:calc(4.75s + var(--t, 0) * .32s);
}
@keyframes erFluebenInd{ to{ opacity:1; } }

.er-beslutning.er-koerer .er-beslutning-kort a{
  animation:erKortInd .5s ease-out forwards;
  animation-delay:calc(6s + var(--k, 0) * .22s);
}
.er-beslutning-kort a:nth-child(1){ --k:0; }
.er-beslutning-kort a:nth-child(2){ --k:1; }
.er-beslutning-kort a:nth-child(3){ --k:2; }
.er-beslutning-kort a:nth-child(4){ --k:3; }
@keyframes erKortInd{
  0%   { opacity:.3; transform:translateY(10px); }
  100% { opacity:1;  transform:translateY(0); }
}

/* Naar sekvensen er faerdig, falder det til ro. */
.er-beslutning.er-faerdig .er-datapuls{ animation:none; opacity:0; }
.er-beslutning.er-faerdig .er-datanet-punkt{
  animation:mbPuls 6s ease-in-out infinite;
  animation-delay:calc(var(--nr, 0) * .5s);
  opacity:1;
}

/* At pege paa en kilde: linjen lyser, og resultatkortet fremhaeves. */
.er-datanet-punkt.er-peget{
  background:rgba(127,216,198,.2); border-color:rgba(127,216,198,.8);
  opacity:1 !important;
}
.er-datanet-punkt.er-peget .er-datalinje{
  opacity:1; height:2px;
  background:linear-gradient(90deg, rgba(127,216,198,1), rgba(127,216,198,.2));
}
.er-beslutning-kort a.er-fremhaevet{
  background:rgba(127,216,198,.16); border-color:rgba(127,216,198,.65);
  transform:translateY(-2px);
}

@media (prefers-reduced-motion: reduce){
  .er-beslutning .er-datanet-punkt,
  .er-beslutning .er-beslutning-trin li,
  .er-beslutning .er-beslutning-kort a{ opacity:1 !important; animation:none !important; }
  .er-datalinje{ opacity:.7; animation:none !important; }
  .er-datapuls, .er-datanet::after{ display:none; }
  .er-beslutning .er-datanet-midte{ animation:none !important; }
}

/* =====================================================================
   RESERVEN: EJENDOMMEN UDEN KORTMOTOR
   =====================================================================
   Ligger oven paa ortofotoet, under datakasserne. Stemplet siger, at
   det er et 2D-omrids - et fodaftryk maa ikke se ud som en 3D-bygning.
   ===================================================================== */
.er-twin-reserve{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.er-twin-omrids{ width:100%; height:100%; display:block; }
.er-twin-reservestempel{
  position:absolute; left:10px; bottom:10px;
  font-size:10px; font-weight:600; letter-spacing:.02em;
  color:#e6f2ff; background:rgba(8,18,30,.72);
  padding:4px 8px; border-radius:10px;
}
@media (max-width:820px){
  .er-twin-reservestempel{ font-size:9px; left:8px; bottom:8px; }
}

/* =====================================================================
   HEROKARRUSELLEN
   =====================================================================
   Fem af MOM Ejendommes egne ejendomme. Syv sekunder hver, to sekunders
   overtoning og et meget langsomt zoom. Teksten staar helt stille - kun
   ejendommen bag skifter.

   Sloeret fra .er-hero-medie::after ligger OVENPAA, saa den hvide tekst er
   laesbar uanset hvilket billede der vises.
   ===================================================================== */
.er-heroslides{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.er-heroslide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 2s ease-in-out;
  transform:scale(1.02);
}
.er-heroslide.er-akt{
  opacity:1;
  animation:erHeroZoom 9s ease-out forwards;
}
@keyframes erHeroZoom{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.085); }
}

/* Sloeret skal ligge over billederne, ikke under. */
.er-hero-medie{ z-index:1; }
.er-hero-medie::after{ z-index:2; }
.er-hero-inder, .er-hero-log{ z-index:3; }

/* Adressen paa den ejendom, man ser. */
.er-heroslide-navn{
  position:absolute; right:16px; bottom:14px; z-index:4;
  font-size:11.5px; font-weight:600; color:#e8f0fa;
  background:rgba(8,18,32,.6); padding:4px 12px; border-radius:999px;
  backdrop-filter:saturate(1.2) blur(2px);
}
.er-heroslide-prikker{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:4; display:flex; gap:8px;
}
.er-heroslide-prikker button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.4); cursor:pointer;
  transition:background-color .25s ease, width .25s ease;
}
.er-heroslide-prikker button.er-akt{ background:#fff; width:18px; border-radius:999px; }
.er-heroslide-prikker button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media (max-width:820px){
  .er-heroslide-navn{ right:12px; bottom:auto; top:12px; font-size:10.5px; }
  .er-heroslide-prikker{ bottom:10px; }
}
@media (prefers-reduced-motion: reduce){
  .er-heroslide{ transition:none; }
  .er-heroslide.er-akt{ animation:none; transform:none; }
}

/* =====================================================================
   INTELLIGENSBAANDET
   =====================================================================
   Erstatter "21 Datakilder · 3 tilsluttet". Ruller roligt, staar
   stille naar man peger paa det, og hver linje foerer til sit modul.
   ===================================================================== */
.er-intelligensbar{
  margin:16px 0 0; padding:12px 0;
  background:linear-gradient(90deg, #07131f 0%, #0d2440 50%, #07131f 100%);
  overflow:hidden; position:relative;
}
/* Blode kanter, saa teksten toner ud i stedet for at blive klippet. */
.er-intelligensbar::before,
.er-intelligensbar::after{
  content:""; position:absolute; top:0; bottom:0; width:70px; z-index:2;
  pointer-events:none;
}
.er-intelligensbar::before{ left:0; background:linear-gradient(90deg, #07131f, transparent); }
.er-intelligensbar::after{ right:0; background:linear-gradient(270deg, #07131f, transparent); }
.er-intelligensbar-spor{ display:flex; width:max-content; animation:erBaandRul 46s linear infinite; }
.er-intelligensbar:hover .er-intelligensbar-spor{ animation-play-state:paused; }
@keyframes erBaandRul{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.er-intelligensbar-raekke{ display:flex; align-items:center; gap:32px; padding-right:32px; }
.er-intelligensbar a,
.er-intelligensbar a:link,
.er-intelligensbar a:visited,
.er-intelligensbar span{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12.5px; font-weight:550; color:#c3d8ee; text-decoration:none;
}
.er-intelligensbar a:hover{ color:#fff; }
.er-intelligensbar i{
  width:6px; height:6px; border-radius:50%; background:#7fd8c6; flex:0 0 auto;
  box-shadow:0 0 8px rgba(127,216,198,.7);
}
.er-intelligensbar span i{ background:#f5b544; box-shadow:0 0 8px rgba(245,181,68,.6); }
@media (max-width:820px){
  .er-intelligensbar{ padding:8px 0; }
  .er-intelligensbar a, .er-intelligensbar span{ font-size:11.5px; }
  .er-intelligensbar-raekke{ gap:24px; padding-right:24px; }
}
@media (prefers-reduced-motion: reduce){
  .er-intelligensbar-spor{ animation:none; }
  .er-intelligensbar{ overflow-x:auto; }
}

/* =====================================================================
   BOBLERNE SOM KONTROLPANEL
   =====================================================================
   De otte bobler er <a> nu. Farven og formen er uaendret - det, der
   kommer til, er en tilstand ved hover, tap og tastaturfokus, og en
   kort fremhaevning naar man trykker.

   a:link og a:visited staar med, fordi er_design.css saetter farve paa
   netop de to. En ren klasse taber til dem, og saa blev teksten blaa
   paa moerkeblaa.
   ===================================================================== */
.er-datanet-punkt,
.er-datanet-punkt:link,
.er-datanet-punkt:visited{
  color:#dff3ee; text-decoration:none; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease,
             box-shadow .18s ease, color .18s ease;
}

/* Hover og tap: boblen lyser, og ringen udenom antyder forbindelsen
   ind mod ejendommen. Svaevet i baggrunden faar lov at koere videre -
   derfor roeres transform ikke her. */
.er-datanet-punkt:hover,
.er-datanet-punkt:focus-visible,
.er-datanet-punkt:active{
  color:#fff;
  background:rgba(23,64,108,.96);
  border-color:rgba(127,216,198,.95);
  box-shadow:0 0 0 4px rgba(127,216,198,.18), 0 10px 26px rgba(0,0,0,.42);
  opacity:1 !important;
}
.er-datanet-punkt:focus-visible{
  outline:2px solid rgba(127,216,198,.95); outline-offset:3px;
}

/* Linjen ind mod ejendommen taendes med boblen, saa man kan se HVAD
   boblen haenger sammen med. Begge varianter rammes: linjen er et
   ::before udenfor sekvensen og et .er-datalinje-element inde i den. */
.er-datanet-punkt:hover::before,
.er-datanet-punkt:focus-visible::before{
  height:2px; opacity:1; animation:none;
  background:linear-gradient(90deg, rgba(127,216,198,1), rgba(127,216,198,.25));
}
.er-datanet-punkt:hover .er-datalinje,
.er-datanet-punkt:focus-visible .er-datalinje{
  height:2px; opacity:1;
  background:linear-gradient(90deg, rgba(127,216,198,1), rgba(127,216,198,.25));
}

/* Trykket: een puls udad, og saa skifter siden. 240 ms, samme tal som
   i scriptet - er de to forskellige, sker skiftet enten foer pulsen er
   set eller efter den er doet ud. */
.er-datanet-punkt.er-datanet-aabner{
  color:#08202e; background:#7fd8c6; border-color:#7fd8c6;
  animation:erBobleAabner .24s ease-out forwards;
}
@keyframes erBobleAabner{
  0%   { box-shadow:0 0 0 0 rgba(127,216,198,.65); }
  100% { box-shadow:0 0 0 16px rgba(127,216,198,0); }
}

/* Mangler ejendommen et CVR, aabner boblen stadig modulet - men den
   skal ikke love et opslag, den ikke kan lave. Prikken er den samme
   markering som resten af siden bruger for "ikke oplyst". */
.er-datanet-punkt[data-udenvaerdi]{ border-style:dashed; }

/* Fingeren er bredere end en musemarkoer. Paa telefon og tablet faar
   boblerne et stoerre trykfelt, uden at selve boblen bliver stoerre -
   ellers ville ringen af otte sprede sig ud over grafikken. */
@media (pointer:coarse){
  .er-datanet-punkt{ padding:8px 12px; }
}

@media (prefers-reduced-motion: reduce){
  .er-datanet-punkt.er-datanet-aabner{ animation:none; }
}

/* =====================================================================
   DEN ANDEN VEJ UD AF SIDSTE SEKTION
   =====================================================================
   Sektionen havde kun eet valg: soeg en adresse. Den, der allerede er
   overbevist, skal ikke foerst finde menuen for at komme i gang.

   Knappen er bevidst sekundaer - en udfyldt knap mere ved siden af
   soegefeltet ville tage opmaerksomheden fra selve soegningen, og
   soegningen er stadig den vigtigste handling paa siden.

   a:link og a:visited staar med, fordi er_design.css saetter farve paa
   netop de to pseudoklasser. En ren klasse taber til dem.
   ===================================================================== */
.er-slutcta-valg{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  margin:0 0 16px;
}
.er-slutcta-proev,
.er-slutcta-proev:link,
.er-slutcta-proev:visited{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:10px;
  font-size:14.5px; font-weight:650; text-decoration:none;
  color:#dff3ee; background:transparent;
  border:1px solid rgba(127,216,198,.55);
  transition:background-color .15s, border-color .15s, color .15s;
}
.er-slutcta-proev:hover,
.er-slutcta-proev:focus-visible{
  color:#08202e; background:#7fd8c6; border-color:#7fd8c6;
}
.er-slutcta-valg small{ font-size:12.5px; color:#8fa9c2; }
@media (max-width:640px){
  /* Paa telefon staar knappen i fuld bredde under teksten - to
     halve knapper ved siden af hinanden bliver for smalle at ramme. */
  .er-slutcta-valg{ gap:8px; }
  .er-slutcta-proev{ width:100%; justify-content:center; }
}

/* Begrundelsen, naar en placering ikke kan beregnes. Den skal kunne
   laeses, men ikke konkurrere med de tal, der FAKTISK er beregnet. */
.erp-maal-mangler{
  margin-top:8px; font-size:11.5px; line-height:1.45;
  color:var(--er-tekst-2,#5b6b7d); font-style:italic;
}

/* =====================================================================
   MODULGITTERET PAA PC - SEKS KOLONNER
   =====================================================================
   Demokortet laa foer i en sidespalte ved siden af HELE gitteret.
   Maalt paa 1600 px: spalten med modulerne var 1471 px hoej,
   demokortet 371. Det efterlod 1100 x 300 px rent hvidt - og det var
   det hul, der laa foer den moerkeblaa sektion.

   Nu er demokortet et kort blandt de andre:
     raekke 1   X-Ray (2) · Marked (2) · Se demo (2)
     raekke 2   Prospekt (3) · Energi & ESG (3)

   Seks kolonner og ikke fire, fordi fire ikke gaar op i baade tre og
   to kort pr. raekke. Med seks bliver begge raekker fyldt helt ud.
   ===================================================================== */
@media (min-width:901px){
  /* Sektionen har kun een spalte tilbage. Uden det her stod der stadig
     en tom 300 px kolonne, hvor demokortet plejede at vaere. */
  .er-forside-moduler{ display:block; }

  .er-udforsk{ grid-template-columns:repeat(6, minmax(0,1fr)); }
  .er-udforsk > .er-udforsk-kort,
  .er-udforsk > .er-demo-kort{ grid-column:span 2; }
  /* Efter reglen ovenfor, saa de to brede vinder over span 2. */
  .er-udforsk > .er-udforsk-prospekt,
  .er-udforsk > .er-udforsk-energi{ grid-column:span 3; }

  /* Demokortet staar nu i en raekke med to andre kort og skal foelge
     deres hoejde i stedet for at hoere til en sidespalte. */
  .er-udforsk > .er-demo-kort{
    margin:0; display:flex; flex-direction:column; height:auto;
  }
  .er-udforsk > .er-demo-kort .er-tjek{ flex:1 1 auto; }
}

/* =====================================================================
   PRISBAANDET
   =====================================================================
   Ligger mellem modulerne og den moerkeblaa sektion - dér hvor det
   hvide hul laa. Teksten til venstre, de tre pakker til hoejre.

   Kortene er links, ikke kasser med en knap i. Hele feltet kan
   trykkes, og det er den samme rute som fra prissiden:
   opret.html?pakke=<navn>.

   a:link og a:visited staar med, fordi er_design.css saetter farve paa
   netop de to - en ren klasse taber til dem.
   ===================================================================== */
.er-prisbaand{ margin:24px 0 0; }
.er-prisbaand-inder{
  max-width:var(--er-sidebredde,1240px); margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:24px 32px; align-items:center;
}
.er-prisbaand-tekst h2{ margin:8px 0 8px; font-size:24px; line-height:1.2;
  font-weight:700; color:var(--ink,#12222f); text-wrap:balance; }
.er-prisbaand-tekst p{ margin:0 0 8px; font-size:13.5px; line-height:1.55;
  color:var(--daemp,#5b6b7d); max-width:46ch; }
.er-prisbaand-note{ font-size:12.5px !important; }
.er-prisbaand-henter{ font-size:13px; color:var(--daemp,#5b6b7d); margin:0; }

.er-prisbaand-kort{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px; }
.er-prispakke,
.er-prispakke:link,
.er-prispakke:visited{
  display:flex; flex-direction:column; gap:4px;
  padding:16px 16px 16px; border-radius:var(--radius,12px);
  border:1px solid var(--linje,#dfe5e7); background:var(--flade,#fff);
  text-decoration:none; color:var(--ink,#12222f);
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.er-prispakke:hover{ border-color:var(--blaa,#1a56db); transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(16,42,73,.12); }
.er-prispakke-navn{ font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--daemp,#5b6b7d); }
.er-prispakke-pris{ font-size:26px; font-weight:750; line-height:1.1;
  font-variant-numeric:tabular-nums; }
.er-prispakke-pris small{ font-size:12.5px; font-weight:600; color:var(--daemp,#5b6b7d); }
.er-prispakke-note{ font-size:11.5px; line-height:1.45; color:var(--daemp,#5b6b7d); }
.er-prispakke-start{ margin-top:8px; font-size:12.5px; font-weight:650;
  color:var(--blaa,#1a56db); }

@media (max-width:1100px){
  .er-prisbaand-inder{ grid-template-columns:minmax(0,1fr); gap:16px; }
}
@media (max-width:560px){
  /* Tre kort ved siden af hinanden bliver for smalle at laese paa en
     telefon - saa staar de under hinanden i stedet. */
  .er-prisbaand-kort{ grid-template-columns:minmax(0,1fr); }
  .er-prisbaand-tekst h2{ font-size:21px; }
}

/* Etiketten over maallinjen. Den er bevidst lille og daempet: den skal
   forklare linjen, ikke konkurrere med tallene i den. */
.erp-maal-etiket{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--er-tekst-2,#5b6b7d); margin-bottom:4px;
}
.erp-maal-naesteetiket{
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
  color:var(--er-tekst-2,#5b6b7d); margin-left:8px; margin-right:4px;
}

/* I 2-kolonne-omraadet har demokortet ingen makker, og saa laa der en tom
   celle ved siden af det - maalt til 348 x 401 px paa 768 px bredde.
   Det fylder raekken, praecis som prospekt- og energikassen goer dér. */
@media (min-width:641px) and (max-width:900px){
  .er-udforsk > .er-demo-kort{ grid-column:1 / -1; margin:0; }
}

/* =====================================================================
   MOBIL: RYTMEN MELLEM SEKTIONERNE
   =====================================================================
   Maalt fra sidste indhold i een sektion til foerste indhold i den
   naeste paa 375 px:

       moduler            16 px
       budskabsbaandet    27 px
       danmarkskortet     37 px
       modulkasserne      50 px
       prisbaandet        50 px
       den moerkeblaa     38 px hvidt

   De 50 px er ikke een regel, der er sat for stort. Det er tre ting,
   der laegges oven i hinanden: sektionens margin (26), dens egen
   padding (24) og den forriges bundpadding. Derfor kunne det ikke
   ses ved at kigge paa CSS'en - kun ved at maale den byggede side.

   Her saettes een rytme: cirka 26 px hvidt hele vejen ned. Farver,
   kasser, billeder og skriftstoerrelser er uroerte.
   ===================================================================== */
@media (max-width:640px){
  .er-moduler,
  .er-intelligensbar,
  .er-danmarkskort-sektion,
  .er-to-spalter,
  .er-prisbaand,
  .er-tillidsbaand-sektion{ margin-top:24px; }

  /* Modulkassernes sektion havde BAADE margin og 24 px egen padding. */
  .er-to-spalter{ padding-top:8px; padding-bottom:8px; }

  /* Den moerkeblaa har sin egen rigelige padding indeni. Marginen
     ovenover er ren hvid plads og kan vaere mindre. */
  .er-beslutning{ margin-top:24px; }

  /* Prisbaandet staeder op til den moerkeblaa nedenunder. */
  .er-prisbaand{ margin-bottom:0; }
}

/* =====================================================================
   OVERSKRIFTER BLEV KLIPPET FORNEDEN
   =====================================================================
   Maalt paa forsiden, mobil:

       "Se hvad EjendomsRadar ved om din ejendom"  scrollH 57 · clientH 55
       "Alle oplysninger om ejendommen ..."        scrollH 81 · clientH 79
       "Søg ejendomme i hele Danmark"              scrollH 57 · clientH 55

   To px for lidt hver gang. Linjehoejden var 1,2 - for lidt til
   danske bogstaver: undersiden af ø, g og j gaar under linjen og
   blev skaaret. Det er praecis de overskrifter, der saa forkerte ud.
   ===================================================================== */
@media (max-width:640px){
  .er-slutcta h2,
  .er-beslutning h2,
  .er-danmarkskort-tekst h2,
  .er-prisbaand-tekst h2,
  .er-afsnit-titel{ line-height:1.28; padding-bottom:2px; }
}

/* Rejselinjen staar oeverst og baerer kassens eneste pil: fra
   ejendommens klasse i dag til det valgte trins klasse. */
.erp-rejse{ font-size:13.5px; line-height:1.5; margin:0 0 12px; }
.erp-rejse b{ font-weight:750; }
.erp-rejse .erp-trinnavn{ display:block; margin-top:2px;
  font-size:12px; color:var(--er-tekst-2,#5b6b7d); }

/* =====================================================================
   DEMOLINK PAA MODULKASSERNE
   =====================================================================
   Kassen er selv et <a>, og et link kan ikke ligge inde i et andet.
   Demolinket er derfor et soeskende-element lige under kassen.

   Det er bevidst diskret: kassen foerer til modulet, og det er den
   vigtigste handling. Demoen er et tilbud ved siden af.

   a:link og a:visited staar med, fordi er_design.css saetter farve
   paa netop de to pseudoklasser.
   ===================================================================== */
.er-modulkort-demo,
.er-modulkort-demo:link,
.er-modulkort-demo:visited{
  display:flex; align-items:center; gap:8px;
  margin:-6px 0 0; padding:8px 4px 0;
  font-size:12.5px; font-weight:600; text-decoration:none;
  color:var(--blaa,#1a56db);
}
.er-modulkort-demo:hover{ text-decoration:underline; }
.er-modulkort-demo span{ font-size:10px; opacity:.85; }
@media (max-width:640px){
  .er-modulkort-demo{ font-size:12px; padding-top:8px; }
}

/* Demolisten paa Demo Center. Eet kort pr. demo med titel, varighed
   og antal trin - saa man kan vaelge uden at gaette. */
.dm-demoliste{ display:grid; gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.dm-demokort,
.dm-demokort:link,
.dm-demokort:visited{
  display:flex; flex-direction:column; gap:4px;
  padding:12px 16px; border-radius:var(--radius,12px);
  border:1px solid var(--linje,#dfe5e7); background:var(--flade,#fff);
  text-decoration:none; color:var(--ink,#12222f);
  transition:border-color .14s, transform .14s; }
.dm-demokort:hover{ border-color:var(--blaa,#1a56db); transform:translateY(-2px); }
.dm-demotitel{ font-size:14px; font-weight:650; }
.dm-demometa{ font-size:12px; color:var(--daemp,#5b6b7d);
  font-variant-numeric:tabular-nums; }

/* =====================================================================
   MODULKASSENS CELLE
   =====================================================================
   Kassen er selv et <a>, og et link kan ikke ligge inde i et andet.
   Demolinket maatte derfor staa ved siden af - men i et gitter bliver
   et soeskende-element sin EGEN celle, og kasserne blev skubbet fra
   hinanden med en tom kasseplads imellem.

   Cellen samler de to. Kassen faar hele hoejden paa naer linjen
   nedenunder, saa alle otte kasser flugter i bunden - ogsaa de tre,
   der endnu ikke har en demo.
   ===================================================================== */
.er-modulfelt{
  display:flex; flex-direction:column;
  /* Cellen arver gitterets egen hoejde, saa raekkerne flugter. */
  height:100%;
}
.er-modulfelt > .er-modul{ flex:1 1 auto; }

/* Linket sidder taet under sin egen kasse - ikke midt i gitteret. */
.er-modulfelt > .er-modulkort-demo,
.er-modulfelt > .er-modulkort-demo:link,
.er-modulfelt > .er-modulkort-demo:visited{
  flex:0 0 auto; margin:8px 0 0; padding:0 4px;
}

/* Tre moduler har endnu ingen demo. Uden en reserveret linje bliver
   deres kasser hoejere end naboens, og pilene i bunden staar i to
   forskellige hoejder. Pladsholderen fylder linjen ud - den er tom,
   aria-hidden og kan ikke faa fokus. */
.er-modulkort-demo-tom{
  pointer-events:none; visibility:hidden;
}

/* Et tomt flex-element har hoejden 0, uanset line-height. Uden en
   reserveret mindstehoejde flugtede kasserne stadig ikke: den rigtige
   linje maalte 19,4 px, pladsholderen 0. Begge faar samme hoejde. */
.er-modulfelt > .er-modulkort-demo{ min-height:20px; }


/* ---- Fotos paa de fire nye hovedkasser (Morten 17-09-2026) ----
   Fotoet ligger oven paa tegningen og bevaeger sig roligt (zoom + glid),
   i forskudt takt, saa kasserne ikke gaar i samme rytme. */
.er-modulfoto{ position:relative; }
.er-modulfoto > svg{ position:absolute; inset:0; }
.er-modulfoto-img{
  position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; display:block;
  transform-origin:center; animation:erModulfotoDrift 16s ease-in-out infinite alternate;
  will-change:transform;
}
.er-modulfoto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,20,18,0) 55%, rgba(4,20,18,.28) 100%);
}
.er-modul[href*=bankcase] .er-modulfoto-img{ animation-delay:-2s; }
.er-modul[href*=portefoelje] .er-modulfoto-img{ animation-delay:-7s; animation-duration:18s; }
.er-modul[href*=husleje] .er-modulfoto-img{ animation-delay:-4s; animation-duration:17s; }
.er-modul[href*=investering] .er-modulfoto-img{ animation-delay:-10s; animation-duration:19s; }
.er-modulkort:hover .er-modulfoto-img{ animation-play-state:paused; transform:scale(1.08); transition:transform .5s ease; }
@keyframes erModulfotoDrift{
  0%   { transform:scale(1.00) translate(0%, 0%); }
  50%  { transform:scale(1.07) translate(-2.2%, 1.2%); }
  100% { transform:scale(1.04) translate(2%, -1.4%); }
}
@media (prefers-reduced-motion: reduce){
  .er-modulfoto-img{ animation:none; }
}

/* Ens pile på alle 12 kasser (Morten 17-09-2026): samme flade og farve uanset kassens farve. */
.er-modulkort .er-modulkort-pil{ background:#e8effd; color:#1a56db; }
.er-modulkort:hover .er-modulkort-pil{ background:#1a56db; color:#fff; }

/* PC (17-09-2026): 3D-ejendomskortet lå oven på "Log ind"/"Opret konto" i hero-hjørnet.
   Knapperne ligger nu øverst, og kortkolonnen starter under dem. Mobil er uændret. */
@media (min-width:1001px){
  .er-hero-log{ z-index:7; }
  .er-hero-inder > div:has(> .er-sagstwin3d){ padding-top:48px; }
}

/* Tablet (641-1080 px, 17-09-2026): ejendomskortet i hero var låst til 280 px og efterlod halvdelen tom. Telefon uændret. */
@media (min-width:641px) and (max-width:1080px){
  .er-hero-kort{ max-width:480px; }
}
/* Tillidsbåndet i hero arvede mørk tekst oven på det mørke slør (ulæseligt) → lys tekst igen. */
.er-tillidsbaand-hero, .er-tillidsbaand-hero li{ color:#fff !important; }
/* Tablet: stednavnet på fotoet lå bag "Opret konto" → nederst til højre som på PC. */
@media (min-width:641px) and (max-width:1080px){
  .er-heroslide-navn{ top:auto; bottom:14px; right:16px; }
}

/* ==================================================================
   GREEN+ accent på forsiden (Morten 17-09-2026): samme visuelle identitet
   som de 12 kasser. Layout, placeringer, funktioner og fotobevægelse er
   uændrede – kun accent: primære knapper, pile, aktive tilstande, ikoner,
   fokus og highlights. Tekst er charcoal. Status- og datafarver (energi-
   klasser, risiko, modulillustrationer, grafer) er IKKE ændret.
   ================================================================== */
:root{
  --er-accent:       #806020;
  --er-accent-moerk: #5f4716;
  --er-accent-svag:  #f3ecd9;
  --er-accent-kant:  #ddcfa6;
  --er-kant-fokus:   #806020;
  --accent:          #806020;
  --ink:             #1c2b33;
  --tekst:           #1c2b33;
  --blaa:            #806020;
  --blaa-moerk:      #5f4716;
  --blaa-svag:       #f3ecd9;
}
.er-modulkort .er-modulkort-pil{ background:#f3ecd9; color:#806020; }
.er-modulkort:hover .er-modulkort-pil{ background:#806020; color:#fff; }
.er-soegenaal, .er-danmarksnaal{ background:#806020; }
.er-prospekt-trin span{ background:#f3ecd9; color:#806020; }
.er-knap-primaer:hover, .er-knap-fyldt:hover{ background:#5f4716; border-color:#5f4716; }

/* GREEN+: valgte knapper i Property Twin/KPI-vælgere (motorens egen --pv-blaa) følger accenten. Datafarver uændrede. */
html .erpv-panel button.on, html .erkpi-vaelg button.on{ background:#806020; border-color:#806020; color:#fff; }
html .ervis-trin.paa, html .ervis-vaelg button.on{ background:#806020; border-color:#806020; color:#fff; }

/* =====================================================================
   HERO-OPSTILLING (Morten 17-09-2026): række 1 = overskrift, søgning og knapper.
   Række 2 = "Se hvad EjendomsRadar kan" (venstre) og 3D-demoboksen (helt til højre), flugtende i toppen.
   Hero og modulkasser bruger hele bredden med samme sidemargin (32 px). Mobil/tablet: én kolonne.
   ===================================================================== */
@media (min-width:1100px){
  .er-hero-inder{
    max-width:none; padding-left:32px; padding-right:32px;
    grid-template-rows:auto auto; align-items:start; row-gap:24px;
  }
  .er-hero-inder > .er-hero-tekst{ grid-column:1; grid-row:1; }
  .er-hero-inder > #erUdstilling{ grid-column:1; grid-row:2; margin-top:0; max-width:900px; align-self:stretch; display:flex; }
  .er-hero-inder > #heroSagBoks{ grid-column:2; grid-row:2; align-self:start; }
  .er-hero-inder > div:has(> .er-sagstwin3d){ padding-top:0; }
  .er-moduler, .er-tillidsbaand-hero{ max-width:none; padding-left:32px; padding-right:32px; }
}
/* Lavere 3D-kort i række 2, så heroen ikke bliver højere end nødvendigt og modulkasserne kommer længere op. */
@media (min-width:1100px){ .er-hero-inder .er-sagstwin3d, .er-hero-inder .er-sagstwin3d.erpv-smal{ height:440px !important; min-height:440px !important; } }
@media (min-width:1900px){ .er-hero-inder .er-sagstwin3d, .er-hero-inder .er-sagstwin3d.erpv-smal{ height:460px !important; min-height:460px !important; } }

/* =====================================================================
   FORSIDEN UNDER MODULKASSERNE (Morten 17-09-2026)
   Én fælles bred ramme med samme sidemargin (32 px) som hero og modulkasser.
   Række 2 i "Udforsk": Prospekt (2) · Energi & ESG (2) · Alle oplysninger samlet (2) under demoen.
   ===================================================================== */
/* (17-09-2026) Sektionerne under modulkasserne står igen i den oprindelige, centrerede ramme – efter Mortens ønske. */

.er-udforsk-datanet{
  margin:0; padding:16px 16px 16px; cursor:default; border-radius:14px; border:0;
  display:flex; flex-direction:column; align-items:stretch; gap:8px; overflow:hidden;
}
.er-udforsk-datanet:hover{ transform:none; }
.er-udforsk-datanet h3{ margin:4px 0 0; font-size:19px; line-height:1.25; color:#fff; }
.er-udforsk-datanet .er-datanet{ align-self:center; max-width:440px; margin-top:4px; }
.er-udforsk-datanet .er-datanet-punkt{ font-size:12.5px; }
.er-udforsk-datanet .er-datanet-link, .er-udforsk-datanet .er-datanet-link:link, .er-udforsk-datanet .er-datanet-link:visited{ color:#9fe3c4; font-weight:650; margin-top:auto; }
@media (max-width:900px){ .er-udforsk > .er-udforsk-datanet{ grid-column:1 / -1; } }
/* Læselighed: beskrivelser og demo-links i modulkasser og prisbånd. */
.er-modulkort-tekst{ font-size:13.5px; line-height:1.45; }
.er-modulkort-demo, .er-modulkort-demo:link, .er-modulkort-demo:visited{ font-size:13px; font-weight:650; }
.er-prisbaand p, .er-udforsk-kort p{ font-size:14.5px; line-height:1.5; }

/* Modulkasserne var for store på PC (Morten 17-09-2026): seks i bredden på store skærme = to pæne rækker med 12 kasser. */
@media (min-width:1400px){
  .er-moduler{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:12px !important; }
  .er-modulkort-billede{ aspect-ratio:16/9; }
  .er-modulkort-krop{ padding:12px 12px 4px !important; }
  .er-modulkort-titel{ font-size:14px !important; }
  .er-modulkort-tekst{ font-size:12.5px !important; line-height:1.4; }
}
@media (min-width:1100px) and (max-width:1399px){
  .er-moduler{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}

/* Mere kompakt på PC (Morten 17-09-2026: "kasserne er for store"). */
@media (min-width:1100px){
  .er-hero-inder > #erUdstilling{ align-self:start !important; }
  .er-hero-inder > #erUdstilling .eu{ height:640px; min-height:0; }
  .er-hero-inder .er-sagstwin3d, .er-hero-inder .er-sagstwin3d.erpv-smal{ height:380px !important; min-height:380px !important; }
  .er-prospekt-visual{ max-height:230px !important; overflow:hidden; }
  .er-danmarkskort-boks{ max-height:440px; overflow:hidden; }
  .er-udforsk-billede{ aspect-ratio:16/8 !important; }
  .er-demo-skaerm{ max-height:260px; }
}
/* Den skiftende gennemgang øverst til venstre – mindre på PC (Morten 17-09-2026). */
@media (min-width:1100px){
  .er-hero-inder > #erUdstilling{ max-width:760px !important; }
  .er-hero-inder > #erUdstilling .eu{ height:540px; }
  .er-hero-inder > #erUdstilling .eu-mini{ width:min(400px, calc(100% - 28px)); }
  .er-hero-inder > #erUdstilling .eu-bund p{ font-size:13px; }
}
/* Energi & ESG på forsiden: fakta og knapper under beregneren (Morten 17-09-2026). */
.er-energi-fakta{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.er-energi-fakta li{border:1px solid #dcebe2;background:#f6faf8;border-radius:10px;padding:8px 12px}
.er-energi-fakta b{display:block;font-size:14px;color:#806020}
.er-energi-fakta span{display:block;font-size:12.5px;line-height:1.4;color:#4f5f67;margin-top:2px}
.er-energi-knapper{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.er-udforsk-energi .erp-felt{min-height:30px;font-size:12.5px}
@media (max-width:640px){.er-energi-fakta{grid-template-columns:minmax(0,1fr)}}
/* FR-108: blok 20 - karruselprikkerne er 7 px; trykområdet gøres 30 px uden at ændre prikken */
.er-heroslide-prikker button{position:relative}
.er-heroslide-prikker button::after{content:"";position:absolute;inset:-12px -4px}
/* FR-108b: et link lå oven på prikkerne, så de ikke kunne trykkes (heller ikke på PC) */
.er-heroslide-prikker{z-index:20}
/* FR-108c: på telefon dækker forsidens indhold karrusellen; prikkerne kan ikke nås og skjules (billederne skifter selv) */
@media (max-width: 760px){ .er-heroslide-prikker{display:none} }
/* FR-108d: hero-indholdets tomme flade fangede klik til karruselprikkerne; kun selve indholdet tager klik */
.er-hero-inder{pointer-events:none}
.er-hero-inder > *{pointer-events:auto}

/* FR-296: forsidens ejendomskort viser produktet - det betjenes ikke.
   Panelets første gruppe (Visning: 3D · Luftfoto · Kort) bliver, fordi
   den VISER produktet. Datamængde og Datalag er operatørværktøj og hører
   hjemme i platformen. Reglen hænger på #heroSagBoks, som kun findes på
   forsiden, så den samme komponent er urørt i Property Twin. */
#heroSagBoks #erPvPanel .kasse:not(:first-child){display:none}
#heroSagBoks #erPvPanel{max-height:none}