/* Søgebjælken er hentet 1:1 fra booking-siden, så de to sider føles ens.
   Værdierne herunder er aflæst direkte fra .by-searchbar. */
.by-searchbar{display:grid;gap:10px;padding:14px 16px;background:#fff;
  border:1px solid #E6E8EF;border-radius:18px;box-shadow:0 4px 20px rgba(15,23,42,.05);
  grid-template-columns:1.9fr 1.15fr 1.15fr 1fr .68fr 1fr;margin:0 0 18px}
/* Fritekstfeltet kom til efter de seks spalter. Det fylder to, så der er
   plads til at skrive et vejnavn uden at teksten løber ud af feltet. */
.by-searchbar{grid-template-columns:1.6fr 1.2fr 1fr .95fr .95fr 1.05fr 1fr}
.by-sf-soeg{grid-column:span 1}
.by-nulstil{display:flex;align-items:flex-end;gap:8px}
.by-soegknap{background:#081F5C !important;color:#fff !important;border-color:#081F5C !important}
.by-soegknap:hover{background:#213C85 !important;border-color:#213C85 !important}
/* Nulstil er nu et link, ikke en knap — så den skal se ud som en knap igen. */
.by-nulknap{flex:0 0 auto;height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 16px;border:1px solid #E6E8EF;border-radius:12px;background:#fff;color:#0F1729;
  font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.by-nulknap:hover{border-color:#687DB3;color:#081F5C}
.by-ryd{color:#213C85;font-weight:600}
.by-sf{display:flex;flex-direction:column;gap:5px;min-width:0}
.by-sf > span{font-size:11px;font-weight:700;letter-spacing:.66px;text-transform:uppercase;color:#6B7280}
.by-searchbar select,.by-searchbar input{height:48px;border:1px solid #E6E8EF;border-radius:12px;
  padding:0 13px;font-size:14px;color:#1F2937;background:#fff;width:100%;font-family:inherit}
.by-searchbar select:focus,.by-searchbar input:focus{outline:2px solid #687DB3;outline-offset:1px}
/*
   Prisskyderen.

   Inputtet nulstilles helt. Temaet giver alle input en ramme, en hvid bund og
   en højde, og den kasse lagde sig som en grå bjælke bag stregen med en tynd
   hale ud til hver side, hvor sporet stak længere end min egen baggrund.
   Sporet tegnes derfor kun ét sted: i pseudoelementet.
*/
.by-skyder{display:flex;flex-direction:column;gap:10px;padding:14px 2px 0}
.by-skyder input[type=range]{-webkit-appearance:none;appearance:none;
  width:100%;margin:0;padding:0;border:0;outline:0;box-shadow:none;
  background:transparent;height:22px;cursor:pointer;display:block}
.by-skyder input[type=range]:hover,
.by-skyder input[type=range]:focus{background:transparent;box-shadow:none;border:0}

/* Sporet: én streg, én farve, hele bredden. */
.by-skyder input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:#081F5C;border:0}
.by-skyder input[type=range]::-moz-range-track{height:6px;border-radius:999px;
  background:#081F5C;border:0}

/* Håndtaget: samme blå, ingen skygge. margin-top centrerer det på sporet. */
.by-skyder input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:#081F5C;border:0;box-shadow:none;cursor:grab;transition:transform .12s}
.by-skyder input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.by-skyder input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:#081F5C;border:0;box-shadow:none;cursor:grab}
.by-skyder input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid #213C85;
  outline-offset:3px}

.by-skyder-tal{font-size:15px;font-weight:600;color:#081F5C;line-height:1.2;
  font-variant-numeric:tabular-nums}

/*
   Søg og Nulstil skal stå på linje med felterne ved siden af.
   Der lå tidligere to .by-nulstil-regler; den nederste vandt og gav Søg hvid
   bund, fuld bredde og intet mellemrum til Nulstil. Nu er der én, og målene
   er de samme som feltets: 48 px høj, 12 px hjørner.
*/
.by-nulstil{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;align-content:flex-start}
.by-nulstil-etiket{flex:0 0 100%;font-size:11px;font-weight:700;letter-spacing:.66px;
  line-height:1.3;margin-bottom:5px}
.by-nulstil button,.by-nulstil .by-nulknap{height:48px;box-sizing:border-box;
  border:1px solid #E6E8EF;border-radius:12px;background:#fff;color:#0F1729;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;padding:0 18px;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.by-nulstil button{flex:1 1 auto;min-width:0}
.by-nulstil button:hover{border-color:#687DB3}
@media (max-width:1100px){
  .by-searchbar{grid-template-columns:1fr 1fr}
  .by-sf-soeg{grid-column:1 / -1}
  .by-nulstil{grid-column:1 / -1}
}
@media (max-width:560px){
  .by-searchbar{grid-template-columns:1fr}
  /* Antallet og visningsknapperne står side om side på en telefon og bliver
     klemt. Under hinanden er der plads til begge dele. */
  .by-antal{flex-direction:column;align-items:flex-start;gap:10px}
}

.by-visning{display:flex;gap:8px}
.by-view-btn{width:42px;height:42px;border-radius:10px;border:1px solid #E6E8EF;background:#fff;
  color:#213C85;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.by-view-btn.active{background:#213C85;border-color:#213C85;color:#fff}
.by-view-btn svg{width:18px;height:18px;display:block}

/* --- Sådan fungerer BY Direkte ------------------------------------------
   Egen side, egne regler. Klassenavnene begynder alle med by-dir, så intet
   herfra kan lande oven i oversigten eller boligsiden. */
.by-direkte{padding:0 var(--by-gutter);color:#0F172A}
.by-direkte h1,.by-direkte h2{color:#081F5C;letter-spacing:-.02em;margin:0}
.by-direkte p{margin:0}

.by-dir-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(36px,6vw,76px) 0 clamp(30px,4vw,56px)}
.by-dir-hero-tekst h1{font-size:clamp(30px,4.6vw,52px);line-height:1.08;margin:14px 0 18px}
.by-dir-hero-tekst > p{font-size:clamp(16px,1.5vw,18.5px);line-height:1.7;color:#364151;
  max-width:52ch}
.by-dir-maerke{display:inline-block;background:#E7F6FF;color:#081F5C;font-size:12px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 15px;border-radius:999px}

/* Billederne.
   Et gitter med tre felter er statisk, uanset hvor pænt det er sat op: alt
   ligger stille inden for sine kanter. Her er der ét stort billede med et
   mindre, der lapper ind over hjørnet og bryder rammen, og billederne skifter
   langsomt mellem boligerne. Bevægelsen er det, der gør forskellen — ikke
   flere kasser.

   Skiftet sker på opacitet alene. Alt andet ville få browseren til at tegne
   hele feltet om hvert sekund, og på en telefon ses det med det samme. */
.by-dir-visning{position:relative;padding:0 4% 6% 0}
.by-dir-ramme{position:relative;overflow:hidden;background:#E7F6FF}
.by-dir-ramme img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease-in-out}
.by-dir-ramme img.paa{opacity:1}
.by-dir-stor{aspect-ratio:5/4;border-radius:26px;
  box-shadow:0 34px 70px -28px rgba(8,31,92,.55)}
.by-dir-lille{position:absolute;right:0;bottom:0;width:42%;aspect-ratio:1/1;
  border-radius:20px;border:7px solid #fff;box-shadow:0 20px 44px -18px rgba(8,31,92,.42)}
/* Et lille mærke på det store billede. Det fortæller, at billederne er vores
   egne boliger og ikke købt et sted. */
.by-dir-stempel{position:absolute;left:20px;top:20px;z-index:2;background:rgba(255,255,255,.94);
  color:#081F5C;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;box-shadow:0 2px 10px rgba(8,31,92,.18)}
@media (max-width:860px){
  .by-dir-hero{grid-template-columns:1fr}
  .by-dir-visning{order:-1;padding:0 6% 8% 0}
  .by-dir-lille{width:46%}
}
/* Den, der har bedt om ro, skal have ro. Så står billedet stille. */
@media (prefers-reduced-motion:reduce){
  .by-dir-ramme img{transition:none}
}

/* Lige meget luft over og under knapperne: 60 px begge veje.
   Bemærk .by-direkte foran: uden den taber reglen til .by-direkte p, som
   nulstiller margener længere oppe i filen. Det var derfor finteksten
   klistrede sig til knapperne, uanset hvilket tal der stod her. */
.by-direkte .by-dir-knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:60px}
.by-dir-knapper.midt{justify-content:center}
.by-dir-knap{display:inline-block;background:#081F5C;color:#fff;text-decoration:none;
  border-radius:999px;padding:15px 30px;font-size:15.5px;font-weight:600;
  transition:background .15s,transform .15s}
.by-dir-knap:hover{background:#213C85;color:#fff;transform:translateY(-1px)}
.by-dir-knap.lys{background:#fff;color:#081F5C;border:1.5px solid #D1DAE5}
.by-dir-knap.lys:hover{background:#E7F6FF;border-color:#687DB3;color:#081F5C}
.by-direkte .by-dir-fine{margin-top:60px;font-size:13.5px;color:#687DB3;line-height:1.6}

.by-dir-trin{padding:clamp(30px,4vw,52px) 0}
.by-dir-trin h2{font-size:clamp(23px,2.6vw,32px);margin-bottom:26px}
.by-dir-trin ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2vw,30px)}
.by-dir-trin li{display:flex;flex-direction:column;gap:7px}
.by-dir-nr{width:34px;height:34px;border-radius:50%;background:#081F5C;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;
  margin-bottom:5px}
.by-dir-trin b{font-size:17px;color:#0F172A}
.by-dir-trin li span:last-child{font-size:14.5px;line-height:1.65;color:#364151}

.by-dir-fordele{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:14px;padding-bottom:clamp(30px,4vw,52px)}
.by-dir-kort{background:#F7F9FC;border:1px solid #D1DAE5;border-radius:16px;
  padding:24px 24px 26px;display:flex;flex-direction:column;gap:8px}
.by-dir-kort b{font-size:16.5px;color:#081F5C}
.by-dir-kort span{font-size:14.5px;line-height:1.65;color:#364151}

/* Det ærlige afsnit står på BY-blå. Det er det, man skal huske bagefter. */
.by-dir-aerligt{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(24px,3vw,48px);align-items:center;background:#081F5C;color:#fff;
  border-radius:24px;padding:clamp(30px,4.4vw,58px);margin-bottom:0}
.by-dir-maerke.lys{background:rgba(255,255,255,.14);color:#fff;margin-bottom:14px}
.by-dir-aerligt h2{color:#fff;font-size:clamp(22px,2.4vw,30px);margin-bottom:16px}
.by-dir-aerligt p{color:rgba(255,255,255,.84);font-size:15.5px;line-height:1.75;max-width:56ch}
.by-dir-aerligt p + p{margin-top:14px}
.by-dir-aerligt img{width:100%;height:100%;max-height:300px;object-fit:cover;border-radius:16px}
@media (max-width:860px){
  .by-dir-aerligt{grid-template-columns:1fr}
  .by-dir-aerligt img{max-height:220px}
}

/* Står tilmeldingen på samme side lige under, skal der være luft imellem —
   ellers klistrer det blå afsnit sig til formularens kant. */
.by-direkte + .by-tilmeld,.by-direkte ~ .by-tilmeld{margin-top:60px}

/* Det grå kort: en annonce, der ikke er skrevet endnu.
   Stiplet ramme og ingen farve — det skal kunne ses, at der ikke er en bolig
   her, men også at der kan komme en. */
/* Begge klasser nævnes med vilje.
   .by-kort står længere nede i filen med display:block, og med kun .by-tilfoej
   vandt den — kortet var aldrig flex, og derfor gjorde gap ingenting, uanset
   hvor stor luften blev sat. Samme fælde som i listevisningen. */
.by-kort.by-tilfoej{border:2px dashed #C9D2E0;background:#F7F9FC;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:60px;padding:34px 26px;
  cursor:pointer;font:inherit;color:inherit;min-height:280px;transition:border-color .15s,background .15s}
.by-kort.by-tilfoej:hover{border-color:#687DB3;background:#F1F5FA}
.by-tilfoej-krop{display:block;max-width:34ch}
.by-tilfoej-krop b{display:block;font-size:17px;color:#0F172A;margin-bottom:6px}
.by-tilfoej-krop span{display:block;font-size:14px;line-height:1.6;color:#6B7280}
.by-tilfoej-knapdel{display:inline-block;font-style:normal;font-weight:600;flex:0 0 auto;
  white-space:nowrap;font-size:14px;color:#fff;background:#081F5C;
  border-radius:999px;padding:11px 24px}
.by-kort.by-tilfoej:hover .by-tilfoej-knapdel{background:#213C85}

/* Listevisning: knappen til venstre i samme spalte som fotoet på de rigtige
   kort, teksten til højre hvor adressen står. Så falder rækken i hak med dem
   over og under i stedet for at have sin egen opbygning.
   Reglen skal nævne begge klasser: .by-kort får display:grid længere nede i
   filen, og med kun .by-tilfoej ville den vinde og strække knappen ud over
   hele anden spalte. */
.by-gitter.liste .by-kort.by-tilfoej{display:grid;min-height:0;
  grid-template-columns:clamp(180px,26%,320px) 1fr;align-items:center;gap:0;padding:26px 30px}
.by-gitter.liste .by-tilfoej-knapdel{order:1;justify-self:center}
.by-gitter.liste .by-tilfoej-krop{order:2;text-align:left;max-width:62ch}

/* Vinduet, hvor boligen sendes ind. */
.by-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;
  justify-content:center;padding:clamp(12px,4vh,56px) 14px;overflow:auto}
.by-modal[hidden]{display:none}
/* Sløret bag vinduet er næsten ikke der. En mørk flade gør siden til en anden
   side, og man mister fornemmelsen af, hvor man var — vinduets skygge er nok
   til at løfte det fri. */
.by-modal-baggrund{position:fixed;inset:0;background:rgba(15,23,42,.10)}
.by-modal-kort{position:relative;background:#fff;border-radius:18px;width:100%;max-width:640px;
  padding:32px clamp(20px,4vw,38px) 30px;box-shadow:0 24px 60px rgba(8,31,92,.22),
  0 0 0 1px rgba(8,31,92,.06)}
/* Krydset midt i sin egen cirkel. Med line-height og font-size alene sad
   glyffen en anelse for højt — flex er det eneste, der centrerer et tegn,
   uanset hvilken skrift browseren finder. */
.by-modal-luk{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;
  border:0;background:#F1F4F9;color:#364151;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.by-modal-luk:hover{background:#E4E9F2;color:#081F5C}
/* Overskriften må ikke løbe ind under krydset. */
.by-modal-kort h2{padding-right:44px}

/* Adresseforslagene fra Dataforsyningen. */
.by-adressefelt{position:relative}
.by-adresseliste{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;
  border:1px solid #E0E6F0;border-radius:10px;box-shadow:0 12px 28px rgba(8,31,92,.14);
  max-height:230px;overflow:auto;padding:4px}
.by-adresseliste button{display:block;width:100%;text-align:left;border:0;background:none;
  border-radius:7px;padding:9px 11px;font:inherit;font-size:14px;color:#0F172A;cursor:pointer}
.by-adresseliste button:hover,.by-adresseliste button.valgt{background:#EEF3FB}
.by-modal-kort h2{margin:0 0 8px;font-size:24px;color:#0F172A;line-height:1.25}
.by-modal-manchet{font-size:15px;line-height:1.6;color:#6B7280;margin:0 0 22px;max-width:52ch}
.by-modal-raekke{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.by-modal-raekke.tre{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.by-modal-raekke,.by-modal-raekke.tre{grid-template-columns:1fr}}
.by-modal-kort .by-felt span i{font-style:normal;color:#9AA3B2;font-weight:400}
.by-filfelt{margin-top:14px;display:block}
.by-filfelt > span{display:block;font-size:13px;color:#364151;margin-bottom:6px}
/* Den indbyggede filknap kan ikke stiles, og teksten på den kommer fra
   browseren. Feltet gemmes væk, og denne etiket bliver knappen. */
.by-filknap{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px dashed #C2CCDC;background:#F7F9FC;color:#081F5C;border-radius:10px;
  padding:11px 18px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s}
.by-filknap:hover{border-color:#081F5C;background:#EEF3FB}
.by-filknap svg{width:17px;height:17px}
.by-filliste{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.by-fil{position:relative;width:74px;height:74px;border-radius:10px;
  border:1px solid #D1DAE5;background:#F1F4F9}
.by-fil > img{width:100%;height:100%;object-fit:cover;display:block;border-radius:9px}
/* Miniaturen er for lille til at se, hvad billedet forestiller. Ved at holde
   musen over folder en større udgave sig ud oven over — den ligger uden for
   rækken, så resten ikke flytter sig. */
.by-fil-stor{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.96);
  width:210px;height:158px;object-fit:cover;border-radius:10px;border:2px solid #fff;
  box-shadow:0 10px 30px rgba(8,31,92,.28);opacity:0;pointer-events:none;z-index:20;
  transition:opacity .13s,transform .13s}
.by-fil:hover .by-fil-stor{opacity:1;transform:translateX(-50%) scale(1)}
@media (hover:none){.by-fil-stor{display:none}}
.by-fil-navn{position:absolute;left:0;right:0;bottom:0;background:rgba(15,23,42,.72);color:#fff;
  font-size:9.5px;line-height:1.3;padding:3px 4px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;opacity:0;transition:opacity .15s}
.by-fil:hover .by-fil-navn{opacity:1}
.by-fil-slet{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(15,23,42,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 1px 4px rgba(15,23,42,.3)}
.by-fil-slet:hover{background:#D14343}
.by-filnote{display:block;font-size:12.5px;color:#6B7280;font-style:normal;margin-top:8px}
/* Honningkrukken skal være usynlig uden at være display:none — nogle robotter
   springer skjulte felter over, men ikke felter der bare er flyttet væk. */
.by-honning{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.by-modal-kort .by-samtykke{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;
  line-height:1.55;color:#364151;cursor:pointer;margin-top:20px;border-radius:10px;
  padding:12px 14px;background:#F7F9FC}
.by-modal-kort .by-samtykke input{width:19px;height:19px;flex:none;margin-top:1px;
  accent-color:#081F5C;cursor:pointer}
/* Mangler samtykket, markeres selve fluebenet. En linje nederst finder ingen. */
.by-modal-kort .by-samtykke.fejl{background:#FDF2F2;border:1px solid #F0B4B4}
.by-modal-kort .by-samtykke.fejl span{color:#8C2A2A}
.by-modal-kort .by-samtykke.fejl input{accent-color:#D14343;outline:2px solid #D14343;
  outline-offset:2px;border-radius:4px}
.by-modal-bund{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
.by-modal-svar{font-size:13.5px;color:#6B7280}
/* BY-mærket, der tænker. Samme puls som i panelet, så det er den samme
   fornemmelse begge steder: der sker noget, og det er os, der arbejder. */
.by-arbejder{display:none;align-items:center;gap:10px;font-size:13.5px;
  color:#364151;margin:0}
.by-arbejder:not([hidden]){display:inline-flex}
.by-arbejder-midt{justify-content:center;width:100%;margin-top:12px}
/* Mens Stripe åbner, står mærket sammen med beskeden i selve kvitteringen. */
.by-kvittering-arbejder{display:flex;align-items:center;gap:13px;text-align:left;line-height:1.6}
.by-mark{width:26px;height:26px;border-radius:7px;background:#081F5C;color:#fff;
  font-weight:800;font-size:11px;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;letter-spacing:.5px;flex:0 0 auto;
  box-shadow:0 2px 6px rgba(8,31,92,.28);animation:byMaerke 1.05s ease-in-out infinite}
@keyframes byMaerke{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.14);opacity:1}}
.by-modal-svar.fejl{color:#D14343;font-weight:500}

/* Kortvisning: samme tre knapper som på booking-siden.
   Højden er sat i vh, så kortet fylder skærmen uden at skubbe resten af siden
   væk — et kort, man skal rulle i for at se, er ikke et overblik. */
/* Kortet ved siden af listen, som på booking-siden.
   Et kort, der fylder hele siden, viser prikker uden boliger — og man skal
   rulle et andet sted hen for at se, hvad prikken er. Her står de to ting
   ved siden af hinanden, og kortet følger med, når man ruller. */
.by-indhold.med-kort{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(14px,1.6vw,24px);align-items:start}
.by-indhold.med-kort .by-gitter{grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr))}
.by-indhold.med-kort .by-kortvisning{position:sticky;top:16px}
@media (max-width:900px){
  .by-indhold.med-kort{grid-template-columns:1fr}
  .by-indhold.med-kort .by-kortvisning{position:static;order:-1}
  .by-indhold.med-kort #by-kortlaerred{height:52vh}
}
.by-kortvisning{position:relative;border:1px solid #D1DAE5;border-radius:14px;overflow:hidden;
  background:#EAF0F6}
#by-kortlaerred{height:clamp(420px,74vh,820px);width:100%}

.by-kort-tom{padding:44px 20px;text-align:center;color:#6B7280;font-size:15px;margin:0}
.by-kortnote{margin:10px 2px 0;font-size:13px;color:#6B7280}
/* Prisnålen. Hvid pille med skygge, som på booking-siden — den skal kunne
   læses oven på både by og vand. */
.by-naal-ydre{background:none;border:0}
.by-naal{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;
  background:#fff;color:#081F5C;font-weight:700;font-size:13.5px;line-height:1;
  padding:8px 13px;border-radius:999px;box-shadow:0 2px 8px rgba(8,31,92,.28);
  border:1px solid rgba(8,31,92,.08)}
.by-naal:hover{background:#081F5C;color:#fff;border-color:#081F5C;z-index:500}
.by-naal.udlejet{background:#F1F3F7;color:#8A93A6;text-decoration:line-through}
/* Kun VORES kort. Arket ligger nu på hele sitet, og uden prefiks ville de
   her regler også ramme et Leaflet-kort fra et hvilket som helst andet
   plugin på en helt anden side. */
.by-kortvisning .leaflet-popup-content-wrapper,
.by-kortlag .leaflet-popup-content-wrapper{border-radius:14px;padding:0;overflow:hidden}
.by-kortvisning .leaflet-popup-content,
.by-kortlag .leaflet-popup-content{margin:0;width:auto !important}
.by-kortboble{display:block;text-decoration:none;color:inherit;width:210px}
.by-kortboble img{width:100%;height:118px;object-fit:cover;display:block}
.by-kortboble-krop{display:block;padding:11px 13px 13px}
.by-kortboble-krop b{display:block;font-size:14.5px;color:#0F172A;line-height:1.35}
.by-kortboble-krop em{display:block;font-style:normal;font-size:12.5px;color:#6B7280;margin-top:2px}
.by-kortboble-pris{display:block;margin-top:7px;font-weight:700;color:#081F5C;font-size:15px}
.by-kortboble-ca{display:block;margin-top:3px;font-size:11.5px;color:#8A93A6}

/* Listevisning: samme kort, lagt på række. */
.by-gitter.liste{grid-template-columns:1fr}
.by-gitter.liste .by-kort{display:grid;grid-template-columns:clamp(180px,26%,320px) 1fr;align-items:stretch}
.by-gitter.liste .by-foto{aspect-ratio:auto}
@media (max-width:640px){ .by-gitter.liste .by-kort{grid-template-columns:1fr} }
.by-antal{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #D1DAE5;margin-bottom:18px;font-size:15px;font-weight:500;color:#6B7280}
.by-antal b{color:#0F172A;font-weight:600}
/* Kortene fylder rummet ud, uanset hvor bredt det er. Ved 1400 giver det
   fire spalter, på en tablet to, på en telefon én — uden brudpunkter at
   holde ved lige. */
.by-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:clamp(14px,1.6vw,24px)}
.by-gitter[hidden]{display:none}
.by-kort{border:1px solid #D1DAE5;border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;display:block}
.by-kort:hover{border-color:#687DB3}
.by-foto{position:relative;aspect-ratio:4/3;background:#E7F6FF}
.by-foto img{width:100%;height:100%;object-fit:cover;display:block}
.by-badge{position:absolute;top:12px;left:12px;background:#fff;border-radius:8px;padding:7px 11px;font-size:12px;line-height:1.35}
.by-badge b{color:#081F5C;font-weight:500;display:block}
.by-badge span{color:#364151;font-size:11px}
.by-ny{position:absolute;top:12px;right:12px;background:#081F5C;color:#fff;font-size:11px;padding:4px 11px;border-radius:999px}
/* Mærkaterne står i en søjle i hjørnet, så de ikke lægger sig oven i hinanden. */
.by-maerkater{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;
  align-items:flex-end;gap:6px;z-index:2}
.by-status{font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:999px;
  letter-spacing:.02em;box-shadow:0 2px 8px rgba(15,23,42,.12)}
/* Ny og Delevenlig er det, der skal fange øjet — derfor lidt større. */
/* BY-blå, ikke grøn. Mærkatet skal se ud, som om det hører til huset. */
.by-status.ny{background:#081F5C;color:#fff;font-size:13px;padding:7px 16px}
.by-status.delevenlig{background:#E7F6FF;color:#081F5C;font-size:13px;padding:7px 16px}
.by-status.udlejet{background:#364151;color:#fff}
.by-status.reserveret{background:#fff;border:1px solid #687DB3;color:#213C85}
.by-status.kommer-snart{background:#E7F6FF;border:1px solid #687DB3;color:#081F5C}
.by-kort.er-udlejet .by-foto img{filter:grayscale(.85);opacity:.75}
.by-pladser{position:absolute;bottom:12px;right:12px;background:#fff;border:1px solid #D1DAE5;color:#213C85;font-size:11px;padding:4px 11px;border-radius:999px}

/* Kortknappen på billedet. Nede i venstre hjørne, hvor der ikke i forvejen
   står mærkater — og hvor tommelfingeren når den på en telefon. */
.by-kortpin{position:absolute;bottom:12px;left:12px;z-index:3;width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.94);color:#081F5C;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(15,23,42,.18);transition:background .15s,transform .12s}
.by-kortpin svg{width:19px;height:19px;display:block}
.by-kortpin:hover{background:#081F5C;color:#fff;transform:translateY(-1px)}
.by-kortpin:focus-visible{outline:2px solid #081F5C;outline-offset:2px}
/* Selve laget over billedet. */
.by-kortlag{position:absolute;inset:0;z-index:4;background:#EAF0F6;cursor:default}
.by-kortlag-laerred{position:absolute;inset:0}
.by-kortlag-luk{position:absolute;top:10px;right:10px;z-index:1200;width:30px;height:30px;
  border-radius:50%;background:rgba(255,255,255,.95);color:#364151;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
  box-shadow:0 2px 8px rgba(15,23,42,.2)}
.by-kortlag-luk:hover{background:#fff;color:#081F5C}
.by-kortlag-ca{position:absolute;left:10px;bottom:10px;z-index:1200;background:rgba(255,255,255,.95);
  color:#364151;font-size:11px;padding:4px 10px;border-radius:999px}
.by-kortlag-fejl{margin:0;padding:40px 16px;text-align:center;font-size:13px;color:#6B7280}
/* Prikken. Rød, fordi den skal ses på et kort i mange farver — og fordi det
   er dét, alle er vant til fra boligportalerne. */
.by-punkt{display:block;width:15px;height:15px;border-radius:50%;background:#E23B3B;
  border:2.5px solid #fff;box-shadow:0 2px 6px rgba(15,23,42,.35);
  transform:translate(-50%,-50%)}
.by-krop{padding:14px 16px 16px}
.by-adr{font-size:16px;font-weight:500;color:#0F172A;margin:0}
.by-post{font-size:13px;color:#687DB3;margin:2px 0 10px}
.by-noegletal{font-size:13px;color:#364151;padding:9px 0;border-top:1px solid #D1DAE5;border-bottom:1px solid #D1DAE5}
.by-pris{display:flex;align-items:baseline;gap:8px;margin-top:11px}
.by-pris b{font-size:19px;font-weight:500;color:#081F5C}
.by-pris span{font-size:13px;color:#364151}
.by-depositum{font-size:12px;color:#687DB3;margin-top:3px}
.by-ledig{display:inline-block;margin-top:12px;background:#E7F6FF;color:#081F5C;font-size:12px;padding:5px 11px;border-radius:8px}
.by-ledig.optaget{background:#F1F5F9;color:#364151}
.by-detalje{max-width:var(--by-bredde);margin:0 auto}
.by-hero{position:relative;background:#081F5C;color:#fff;padding:26px 28px;border-radius:14px 14px 0 0}
/* Udlejet og reserveret: synligt hele vejen ned, ikke kun i en enkelt sætning. */
.by-hero-maerke{position:absolute;top:20px;right:24px;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 13px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff}
.by-baand{display:flex;flex-direction:column;gap:3px;padding:15px 20px;
  background:#E7F6FF;border-left:4px solid #687DB3;margin:0 0 4px;font-size:14.5px}
.by-baand strong{color:#081F5C;font-size:15px}
.by-baand span{color:#364151}
.by-detalje.er-udlejet .by-galleri img{filter:grayscale(.7);opacity:.82}
.by-detalje.er-udlejet .by-hero{background:#364151}
.by-detalje.er-udlejet .by-fakta .by-total td{color:#364151}
.by-hero h1{color:#fff;font-size:26px;font-weight:500;margin:0 0 4px}
.by-hero p{color:#687DB3;margin:0;font-size:15px}
.by-galleri{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:18px 0}
.by-galleri img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.by-plantegning{margin:26px 0}
.by-plantegning h2{font-size:18px;margin:0 0 10px}
.by-plantegning img{width:100%;height:auto;max-height:640px;object-fit:contain;background:#f8fafc;border:1px solid #d1dae5;border-radius:10px;display:block}
.by-plan-note{font-size:13px;color:#687db3;margin:8px 0 0}
.by-plan-link{margin:10px 0 0;text-align:center;font-size:13.5px}
.by-plan-link a{color:#081F5C;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.by-plan-link a:hover{color:#213C85}
.by-kortfelt{margin:22px 0;border:1px solid #D1DAE5;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#E7F6FF}
.by-kortfelt iframe{width:100%;height:100%;border:0;display:block}
.by-fakta{width:100%;border-collapse:collapse;font-size:15px;margin:22px 0}
.by-fakta td{padding:11px 0;border-bottom:1px solid #D1DAE5}
.by-fakta td:first-child{color:#364151}
.by-fakta td:last-child{text-align:right;font-weight:500}
.by-fakta tr.by-total td{color:#081F5C;font-size:17px}
.by-bjaelke{position:sticky;bottom:0;background:#fff;border-top:1px solid #D1DAE5;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;z-index:5}
.by-knap{background:#081F5C;color:#fff;border:0;border-radius:999px;padding:13px 28px;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block}
.by-form{border:1px solid #D1DAE5;border-radius:12px;padding:20px;margin:24px 0}
.by-form h3{margin:0 0 14px;font-size:18px;font-weight:500}
.by-form label{display:block;font-size:13px;color:#364151;margin-bottom:12px}
.by-form input,.by-form select,.by-form textarea{width:100%;border:1px solid #D1DAE5;border-radius:8px;padding:10px 12px;font:inherit;font-size:15px;margin-top:4px;box-sizing:border-box}
.by-samtykke{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#364151}
/* Abonnementsboksen skal se ud som noget, man vælger til — ikke som en
   afkrydsning mellem to andre. Derfor mørk bund og eget mærke. */
.by-plan{position:relative;background:#081F5C;border-radius:14px;
  padding:20px 22px 18px;margin:10px 0 18px;color:#fff;
  box-shadow:0 8px 26px rgba(8,31,92,.22)}
.by-plan-maerke{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
  border-radius:999px;padding:5px 12px;margin-bottom:13px}
.by-plan .by-samtykke{font-size:14.5px;color:rgba(255,255,255,.86);line-height:1.6}
.by-plan .by-samtykke b{font-size:17px;color:#fff;display:inline-block;margin-bottom:5px}
.by-plan .by-samtykke input{width:19px;height:19px;margin-top:3px;accent-color:#fff}
.by-plan-note{font-size:12.5px;color:rgba(255,255,255,.62);margin:14px 0 0;line-height:1.6;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.18)}

/* Pop-uppen. Samme udtryk som abonnementsboksen, så det føles som ét tilbud. */
.by-popup{position:fixed;inset:0;z-index:99998;display:flex;align-items:center;
  justify-content:center;background:rgba(8,15,35,.55);padding:20px;
  opacity:0;transition:opacity .2s}
/* Uden denne linje er siden låst.
   Browserens egen regel for [hidden] er display:none, men enhver display i
   vores eget stilark vinder over den. Så lå overlayet altid over siden —
   usynligt med opacity 0, men det opfangede hvert eneste klik. */
.by-popup[hidden]{display:none}
/* Anden sikring: så længe den ikke er åben, går mus og fingre igennem. */
.by-popup{pointer-events:none}
.by-popup.inde{opacity:1;pointer-events:auto}
.by-popup-boks{position:relative;background:#081F5C;color:#fff;border-radius:18px;
  padding:32px 34px 28px;max-width:470px;width:100%;box-shadow:0 24px 60px rgba(8,31,92,.42);
  transform:translateY(10px);transition:transform .22s}
.by-popup.inde .by-popup-boks{transform:none}
/*
   Fanen, pop-uppen lægger sig i.
   Midt i bunden, hvor tommelfingeren er på en telefon og hvor øjet er vant
   til at finde en notifikation. Den ligger over alt andet, men fylder kun
   det, den skal, og forsvinder helt, når pop-uppen er åben.
*/
.by-popup-fane{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);
  z-index:99997;display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;
  background:#081F5C;color:#fff;border-radius:999px;padding:13px 24px;
  font:600 14.5px/1 inherit;font-family:inherit;
  box-shadow:0 10px 34px rgba(8,31,92,.34);
  opacity:0;transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .2s}
.by-popup-fane.inde{transform:translate(-50%,0);opacity:1}
.by-popup-fane[hidden]{display:none}
.by-popup-fane:hover{background:#213C85;color:#fff}
/* Den lille lysende prik gør fanen til en besked frem for en knap mere. */
.by-popup-fane-prik{width:8px;height:8px;border-radius:50%;background:#7FE3A8;
  box-shadow:0 0 0 3px rgba(127,227,168,.25);flex:none}
@media (max-width:520px){
  .by-popup-fane{bottom:16px;padding:12px 20px;font-size:14px;max-width:calc(100vw - 32px)}
}

/*
   Krydset skal være en cirkel, ikke en pille.
   Temaets knapstil giver alle button-elementer vandret polstring, og den
   lagde sig oven i de 32 px — knappen blev dobbelt så bred som høj, og ×'et
   sad til venstre i den. min-width og padding:0 lukker begge huller, og
   aspect-ratio holder den rund, hvis nogen senere ændrer højden.
*/
.by-popup .by-popup-luk{width:34px;min-width:34px;max-width:34px;height:34px;aspect-ratio:1;
  padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  line-height:1;font-size:21px;font-family:Helvetica,Arial,sans-serif;border-radius:50%}
.by-popup-luk{position:absolute;top:14px;right:14px;width:32px;height:32px;border:0;
  border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:20px;
  line-height:1;cursor:pointer}
.by-popup-luk:hover{background:rgba(255,255,255,.26)}
.by-popup-maerke{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
  border-radius:999px;padding:5px 12px}
.by-popup-boks h3{color:#fff;font-size:23px;font-weight:600;margin:14px 0 10px;line-height:1.25}
.by-popup-tekst{font-size:15px;line-height:1.65;color:rgba(255,255,255,.88);margin:0}
.by-popup-fine{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.6);margin:14px 0 0;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.18)}
.by-popup-knapper{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.by-popup-cta{background:#fff;color:#081F5C;border-radius:999px;padding:13px 26px;
  font-size:15px;font-weight:600;text-decoration:none}
.by-popup-cta:hover{background:#E7F6FF;color:#081F5C}
.by-popup-mere{color:rgba(255,255,255,.78);font-size:14px;text-decoration:underline}
.by-popup-mere:hover{color:#fff}
@media (max-width:520px){ .by-popup-boks{padding:26px 22px 22px} }
.by-samtykke input{width:auto;margin-top:3px}
/* --- Tilmelding til boliglisten ---------------------------------------
   Ét kort, luft mellem grupperne, og felter der er lige høje.
   Sidens indtryk kommer af tre ting: én kolonnebredde, ét sæt afstande, og
   at intet felt er sit eget lille designforsøg.
*/
.by-tilmeld{--r:14px;--luft:22px;max-width:760px;margin:0 auto;
  padding:clamp(20px,4vw,56px) var(--by-gutter,20px)}
.by-tilmeld-kort{background:#fff;border:1px solid #E8ECF3;border-radius:24px;
  padding:clamp(26px,3.6vw,44px);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 40px rgba(15,23,42,.06)}

.by-tilmeld-maerke{display:inline-flex;align-items:center;gap:7px;font-size:11px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#081F5C;
  background:#E7F6FF;padding:7px 14px;border-radius:999px}
.by-tilmeld-kort h2{font-size:clamp(26px,3.2vw,36px);font-weight:600;color:#081F5C;
  margin:18px 0 10px;letter-spacing:-.025em;line-height:1.15}
.by-tilmeld-manchet{font-size:16px;line-height:1.6;color:#364151;margin:0 0 30px}

.by-tilmeld-form{display:flex;flex-direction:column;gap:var(--luft)}
.by-gruppe{display:flex;flex-direction:column;gap:12px}
.by-gruppe-titel{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#687DB3}
.by-raekke{display:grid;gap:12px}
.by-raekke.to{grid-template-columns:repeat(2,minmax(0,1fr))}
.by-raekke.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:620px){ .by-raekke.to,.by-raekke.tre{grid-template-columns:1fr} }

/* Ét felt: etiket over, kontrol under. Samme højde uanset type. */
.by-felt{display:flex;flex-direction:column;gap:7px;min-width:0}
.by-felt > span{font-size:13px;font-weight:600;color:#0F172A}
.by-tilmeld input[type=text],.by-tilmeld input[type=email],.by-tilmeld input[type=tel],
.by-tilmeld input[type=number],.by-tilmeld input[type=date],
.by-tilmeld select,.by-tilmeld textarea{
  width:100%;box-sizing:border-box;height:52px;border:1px solid #DDE3EC;border-radius:var(--r);
  padding:0 15px;font:inherit;font-size:15.5px;color:#0F172A;background:#fff;
  appearance:none;-webkit-appearance:none;transition:border-color .15s,box-shadow .15s}
.by-tilmeld textarea{height:auto;padding:13px 15px;line-height:1.55;resize:vertical}
.by-tilmeld input::placeholder,.by-tilmeld textarea::placeholder{color:#9AA5B8}
.by-tilmeld input:focus,.by-tilmeld select:focus,.by-tilmeld textarea:focus{
  outline:none;border-color:#081F5C;box-shadow:0 0 0 3px rgba(8,31,92,.10)}
.by-tilmeld input[aria-invalid=true]{border-color:#D14343;box-shadow:0 0 0 3px rgba(209,67,67,.10)}
.by-feltfejl{font-size:12.5px;color:#D14343;font-weight:500}
/* Forslaget til en rettet adresse er en knap, fordi den kan trykkes — men den
   skal se ud som en del af sætningen, ikke som en handling man skal tage
   stilling til. */
.by-mente{background:none;border:0;padding:0;font:inherit;color:#081F5C;
	font-weight:600;text-decoration:underline;cursor:pointer}

/* Rullelisten skal have sin egen pil, når appearance er slået fra. */
.by-vaelg{position:relative}
.by-vaelg::after{content:'';position:absolute;right:17px;top:50%;width:8px;height:8px;
  margin-top:-6px;border-right:2px solid #687DB3;border-bottom:2px solid #687DB3;
  transform:rotate(45deg);pointer-events:none}
.by-vaelg select{padding-right:40px;cursor:pointer}

/* Beløb med enhed inde i feltet. */
.by-beloeb{position:relative}
.by-beloeb input{padding-right:52px;font-variant-numeric:tabular-nums}
.by-beloeb::after{content:'kr.';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:14.5px;color:#687DB3;pointer-events:none}

/* --- Postnumre ------------------------------------------------------- */
.by-postnr{position:relative}
.by-brikker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:9px}
.by-brikker:empty{display:none}
.by-brik{display:inline-flex;align-items:center;gap:9px;background:#F1F4F9;color:#0F172A;
  border:1px solid #E2E8F2;border-radius:999px;padding:8px 9px 8px 16px;font-size:14.5px;
  font-weight:600;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.by-brik:hover{background:#E9EEF7;border-color:#CFDAEA}
.by-brik em{font-style:normal;font-weight:400;color:#687DB3;margin-left:-4px}
.by-brik button{background:transparent;border:0;color:#687DB3;width:22px;height:22px;
  border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;
  align-items:center;justify-content:center;padding:0;font-family:inherit;
  opacity:0;transition:opacity .15s,background .15s,color .15s}
.by-brik:hover button,.by-brik:focus-within button{opacity:1}
.by-brik button:hover{background:#081F5C;color:#fff}
@media (hover:none){ .by-brik button{opacity:1} }

/* Forslagslisten under feltet. */
.by-forslag{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;
  background:#fff;border:1px solid #DDE3EC;border-radius:var(--r);overflow:hidden;
  box-shadow:0 14px 40px rgba(15,23,42,.14);max-height:236px;overflow-y:auto}
.by-forslag:empty,.by-forslag[hidden]{display:none}
.by-forslag button{display:flex;width:100%;gap:10px;align-items:baseline;background:none;
  border:0;text-align:left;padding:12px 16px;font:inherit;font-size:15px;cursor:pointer;
  color:#0F172A}
.by-forslag button:hover,.by-forslag button.aktiv{background:#E7F6FF}
.by-forslag b{font-variant-numeric:tabular-nums;min-width:44px}
.by-forslag span{color:#687DB3;font-size:14px}
.by-hjaelp{font-size:12.5px;color:#687DB3;line-height:1.5}

/* --- Indflytning ------------------------------------------------------ */
.by-flueben{display:flex;align-items:center;gap:11px;height:52px;font-size:15px;
  color:#0F172A;cursor:pointer;margin:0}
.by-felt .by-flueben > span{font-weight:400}
.by-flueben input{width:20px;height:20px;flex:none;accent-color:#081F5C;cursor:pointer}
@media (max-width:620px){ .by-flueben{height:auto;padding:4px 0} }

/* --- Planen ----------------------------------------------------------- */
.by-plan{display:flex;gap:14px;align-items:flex-start;background:#E7F6FF;
  border:1px solid #D5E2F4;border-radius:18px;padding:18px 20px;cursor:pointer;
  transition:border-color .15s}
.by-plan:hover{border-color:#687DB3}
.by-plan input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:#081F5C;
  cursor:pointer}
.by-plan-tekst{font-size:14.5px;line-height:1.55;color:#364151}
.by-plan-tekst b{display:block;color:#081F5C;font-size:15.5px;margin-bottom:4px;
  font-weight:600}

/* --- Bunden ----------------------------------------------------------- */
.by-bund{display:flex;flex-direction:column;gap:16px;padding-top:4px;
  border-top:1px solid #EDF1F7}
/* Et felt, der ikke kan bruges lige nu, skal se sådan ud — ellers tror man,
   man har ramt forbi. */
.by-tilmeld .by-felt.slukket span{opacity:.5}
.by-tilmeld input:disabled{background:#F4F6FA;color:#9AA3B2;cursor:not-allowed}
.by-tilmeld .by-samtykke{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;
  line-height:1.55;color:#364151;cursor:pointer;margin-top:20px}
.by-tilmeld .by-samtykke input{width:19px;height:19px;flex:none;margin-top:1px;
  accent-color:#081F5C;cursor:pointer}
.by-tilmeld-knap{width:100%;background:#081F5C;color:#fff;border:0;border-radius:var(--r);
  padding:17px 24px;font:inherit;font-size:16.5px;font-weight:600;cursor:pointer;
  transition:background .15s,transform .1s}
.by-tilmeld-knap:hover{background:#213C85}
.by-tilmeld-knap:active{transform:translateY(1px)}
.by-tilmeld-knap:disabled{opacity:.55;cursor:default;transform:none}
.by-tilmeld-fine{font-size:12.5px;line-height:1.55;color:#687DB3;margin:0;text-align:center}
.by-tilmeld-svar{font-size:14px;color:#364151;text-align:center}
.by-tilmeld-svar:empty{display:none}
.by-tilmeld-svar.fejl{color:#D14343;font-weight:600}

/* Samtykket er ikke et vilkårligt felt: uden det må vi ikke gemme noget.
   Derfor markeres det som et felt med fejl og ikke bare med en linje tekst
   nederst, som man skal lede efter. */
.by-tilmeld .by-samtykke.fejl{background:#FDF2F2;border:1px solid #F0B4B4;
  border-radius:12px;padding:14px 16px;margin-left:-16px;margin-right:-16px}
.by-tilmeld .by-samtykke.fejl span{color:#8C2A2A}
.by-tilmeld .by-samtykke.fejl input{accent-color:#D14343;outline:2px solid #D14343;
  outline-offset:2px;border-radius:4px}

/* --- Kvitteringen ------------------------------------------------------ */
.by-kvit{text-align:left}
.by-kvit-ikon{width:52px;height:52px;border-radius:50%;background:#E7F6FF;
  color:#081F5C;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;margin-bottom:20px}
.by-kvit h2{font-size:clamp(23px,2.8vw,30px);font-weight:600;color:#081F5C;
  margin:0 0 10px;letter-spacing:-.02em;line-height:1.2}
.by-kvit-manchet{font-size:16px;line-height:1.6;color:#364151;margin:0 0 22px;max-width:52ch}
/* Samme boks som i velkomstmailen, så de to bekræftelser ligner hinanden. */
.by-kvit-kriterier{background:#E7F6FF;color:#081F5C;border-radius:12px;
	padding:14px 18px;margin:0 0 26px;font-size:15px;line-height:1.65;max-width:52ch}
.by-kvit-kriterier b{display:block;margin-bottom:2px}
.by-kvit-liste{list-style:none;margin:0 0 26px;padding:0;display:flex;
  flex-direction:column;gap:2px}
.by-kvit-liste li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;
  border-top:1px solid #EDF1F7;font-size:15px;line-height:1.55;color:#364151}
.by-kvit-liste li:last-child{border-bottom:1px solid #EDF1F7}
.by-kvit-liste b{display:block;color:#0F172A;font-weight:600;margin-bottom:2px}
.by-kvit-nr{flex:none;width:26px;height:26px;border-radius:50%;background:#E7F6FF;
  color:#081F5C;font-size:13px;font-weight:700;display:flex;align-items:center;
  justify-content:center;margin-top:1px;font-variant-numeric:tabular-nums}
.by-kvit-knapper{display:flex;flex-wrap:wrap;gap:10px}
.by-kvit-knap{display:inline-flex;align-items:center;justify-content:center;
  background:#081F5C;color:#fff;border-radius:14px;padding:15px 26px;
  font-size:15.5px;font-weight:600;text-decoration:none}
.by-kvit-knap:hover{background:#213C85;color:#fff}
.by-kvit-knap.sekundaer{background:#fff;color:#081F5C;border:1px solid #DDE3EC}
.by-kvit-knap.sekundaer:hover{background:#E7F6FF;color:#081F5C}
.by-kvit-fine{font-size:12.5px;color:#687DB3;line-height:1.55;margin:22px 0 0}
.by-afbrudt{background:#FFF8E8;border:1px solid #F0DCA8;border-radius:14px;
  padding:15px 18px;font-size:14.5px;line-height:1.55;color:#6B4E12;margin:0 0 24px}

.by-kvittering{background:#E7F6FF;color:#081F5C;border-radius:10px;padding:14px 16px;font-size:15px}
.by-finetekst{font-size:13px;color:#687DB3;margin:10px 0 0;line-height:1.5}

/* Tidsbånd. Et halvt kvarter er et valg, ikke en tekst man skriver. */
.by-slots{margin:0 0 18px}
.by-slots-titel{display:block;font-size:13px;font-weight:600;color:#364151;
  margin-bottom:8px;letter-spacing:.02em}
.by-slots-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
/*
   .by-form label sætter display:block og vandt over .by-slot, fordi to
   klasser slår én. Derfor står formularen med foran her — ellers lagde
   klokkeslættet og teksten sig på samme linje uden mellemrum.
*/
.by-form .by-slot{display:flex;flex-direction:column;gap:3px;border:1px solid #D1DAE5;
  border-radius:10px;padding:12px 14px;cursor:pointer;background:#fff;margin-bottom:0;
  transition:border-color .15s,background .15s}
.by-form .by-slot:hover{border-color:#687DB3}
.by-form .by-slot input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.by-slot-tid{font-size:15px;font-weight:600;color:#081F5C;line-height:1.3}
.by-slot-plads{font-size:12.5px;color:#687DB3;line-height:1.3}
.by-form .by-slot:has(input:checked){border-color:#081F5C;background:#E7F6FF;
  box-shadow:inset 0 0 0 1px #081F5C}
.by-form .by-slot.fuldt{cursor:not-allowed;opacity:.5;background:#F6F7FA}
.by-form .by-slot.fuldt:hover{border-color:#D1DAE5}
.by-tom{color:#687DB3;text-align:center;padding:40px 0}

/* =========================================================================
   BOLIGSIDEN
   Bygget som en rigtig boligannonce: billederne fylder hele skærmens bredde,
   adresse og pris står stort under dem, og alt det, man skal bruge for at
   beslutte sig, ligger samlet i en kasse, der følger med ned ad siden.
   ====================================================================== */

/* Temaet lægger en spalte om indholdet og en lys baggrund bagved. På en
   boligside skal der ikke være nogen ramme — siden går fra kant til kant, og
   alt bagved er hvidt. Derfor bryder hele boligsiden ud, ikke kun billederne. */
/*
   ÉN BREDDE, ÉT STED.

   Bredden lå før fire steder med tre forskellige tal: 1240 i .by-indre, 960 i
   .by-detalje, 100vw på boligsiden og temaets egen spalte på oversigten. Det
   gav en kant, der flyttede sig, alt efter hvor på sitet man var.

   Nu står den som en variabel på den yderste kasse, og alt indeni arver den.
   Skal den ændres, ændres den her — ikke ni steder.

   Rendemarginen vokser med skærmen i stedet for at være et fast tal: 16 px på
   en telefon, 40 px på en stor skærm, og alt derimellem uden knæk.
*/
:root{--by-bredde:1400px}
/* Springene mellem forklaringen og tilmeldingen sker paa samme side. */
/* Blød rulning kun på sider, hvor pluginnet faktisk står. Reglen lå før på
   html og fulgte med arket ud på HELE sitet — og så opførte alle temaets egne
   ankerlinks sig pludselig anderledes, uden at nogen havde rørt temaet. */
html:has(.by-side),html:has(.by-oversigt),html:has(.by-tilmeld),html:has(.by-direkte){scroll-behavior:smooth}
#by-direkte-top,#by-tilmeld-liste{scroll-margin-top:24px}
body.single-lejemaal{background:#fff}

.by-side,.by-oversigt,.by-direkte{
  --by-gutter:clamp(16px,4vw,40px);
  width:100%;max-width:var(--by-bredde);margin-inline:auto;box-sizing:border-box}

/* Bryd ud af temaets spalte, men kun ud til vores egen bredde — ikke til
   kanten af skærmen. translateX bruges frem for margin-left:-50vw, fordi den
   negative margen ikke kan begrænses af max-width. */
.single-lejemaal .by-side,
.by-direkte.by-bryd,
.by-oversigt.by-bryd{position:relative;left:50%;transform:translateX(-50%);
  width:min(100vw,var(--by-bredde));max-width:var(--by-bredde);background:#fff}

/* Fuldbredde inde i rammen: billedbånd, hero og området går ud til de 1400,
   ikke længere. */
.by-fuld{width:100%;position:relative;max-width:100%}
.by-indre{max-width:var(--by-bredde);margin:0 auto;
  padding-inline:var(--by-gutter);box-sizing:border-box}

/* Temaets forfatter- og datolinje hører til blogindlæg, ikke til en bolig. */
.single-lejemaal .elementor-post-info,
.single-lejemaal .elementor-widget-post-info,
.single-lejemaal .entry-meta,
.single-lejemaal .post-meta,
.single-lejemaal .posted-on,
.single-lejemaal .byline,
.single-lejemaal .author-meta{display:none !important}

/* --- Hero: boligen fylder skærmen -------------------------------------- */
/*
   Det første, man møder, skal være boligen — ikke en overskrift med et
   frimærke ved siden af. Billedet går til alle fire kanter, og striben i
   bunden antyder, at der er mere at se, uden at tage plads fra hovedbilledet.
*/
.by-hero-billeder{position:relative;height:min(88vh,900px);background:#081F5C;overflow:hidden}
.by-hero-stor{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.by-hero-billeder:hover .by-hero-stor{transform:scale(1.02)}
/* En blød mørkning i bunden, så knapperne kan læses uanset billedet. */
.by-hero-billeder::after{content:'';position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to top,rgba(6,12,30,.55),transparent);pointer-events:none}

.by-hero-stribe{position:absolute;right:0;bottom:0;display:flex;gap:4px;z-index:2;
  padding:0;max-width:62%}
.by-hero-stribe figure{margin:0;position:relative;width:230px;height:170px;overflow:hidden;
  background:#E7F6FF}
.by-hero-stribe img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.by-hero-stribe figure:hover img{transform:scale(1.06)}
.by-hero-stribe figure.flere::before{content:'';position:absolute;inset:0;
  background:rgba(8,15,35,.55);z-index:1}
.by-hero-flere-tal{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:15px;font-weight:600;pointer-events:none}

/*
   Adressen står på billedet. Uden den er det første, man ser, en flot stue
   uden svar på det eneste spørgsmål, man kom med: hvor ligger den.
*/
.by-hero-titel{position:absolute;left:28px;bottom:98px;z-index:3;max-width:min(640px,70%);
  color:#fff;text-shadow:0 2px 20px rgba(6,12,30,.5)}
.by-hero-adresse{font-size:clamp(25px,3.2vw,42px);font-weight:500;margin:0 0 6px;
  letter-spacing:-.02em;line-height:1.12;color:#fff}
.by-hero-under{margin:0;font-size:clamp(14px,1.25vw,17px);color:rgba(255,255,255,.92);
  font-weight:400}
.by-hero-status{display:inline-block;margin-bottom:13px;padding:6px 14px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(255,255,255,.94);color:#081F5C;text-shadow:none}

.by-hero-vaerktoej{position:absolute;left:26px;bottom:26px;display:flex;gap:8px;z-index:3;
  flex-wrap:wrap}
.by-hero-vaerktoej button,.by-hero-vaerktoej a{background:rgba(255,255,255,.94);
  color:#081F5C;border:0;border-radius:999px;padding:12px 22px;font-size:14.5px;
  font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;
  box-shadow:0 6px 22px rgba(6,12,30,.28);display:inline-flex;align-items:center;gap:9px;
  backdrop-filter:blur(6px);transition:transform .15s,background .15s}
.by-hero-vaerktoej button:hover,.by-hero-vaerktoej a:hover{background:#fff;
  transform:translateY(-2px);color:#081F5C}

/* --- Billedbånd mellem afsnittene -------------------------------------- */
.by-baand-billede{margin:44px 0;overflow:hidden}
.by-baand-billede img{width:100%;height:clamp(220px,42vw,520px);object-fit:cover;display:block}

/* --- Området ----------------------------------------------------------- */
.by-omraade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;margin-top:20px;background:#F4F6FA}
.by-omraade-tekst{padding:64px clamp(28px,5vw,86px);display:flex;flex-direction:column;
  justify-content:center}
.by-omraade-tekst h2{font-size:clamp(26px,2.6vw,34px);font-weight:500;color:#081F5C;
  margin:0 0 18px;letter-spacing:-.015em;line-height:1.2}
.by-omraade-tekst p{font-size:16.5px;line-height:1.8;color:#364151;margin:0 0 14px}
.by-omraade-note{font-size:13.5px !important;color:#687DB3 !important;margin-top:8px !important}
.by-omraade-kort{min-height:520px;background:#E7F6FF}
.by-omraade-kort iframe{width:100%;height:100%;border:0;display:block;min-height:520px}

@media (max-width:900px){
  .by-hero-billeder{height:62vh}
  .by-hero-stribe{max-width:100%;left:0;right:0}
  .by-hero-stribe figure{width:33.33%;height:104px}
  .by-hero-titel{left:16px;right:16px;max-width:none;bottom:186px}
  .by-hero-vaerktoej{left:14px;bottom:120px}
  .by-hero-vaerktoej button,.by-hero-vaerktoej a{padding:10px 16px;font-size:13.5px}
  .by-baand-billede{margin:30px 0}
  .by-baand-billede img{height:38vh}
  .by-omraade{grid-template-columns:1fr}
  .by-omraade-tekst{padding:40px 20px}
  .by-omraade-kort,.by-omraade-kort iframe{min-height:340px}
}

/* --- Tilbage til oversigten ------------------------------------------- */
.by-tilbage{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;font-size:14.5px;
  font-weight:600;color:#213C85;text-decoration:none;padding:9px 17px;border-radius:999px;
  border:1px solid #D1DAE5;background:#fff;transition:background .15s,border-color .15s}
.by-tilbage:hover{background:#E7F6FF;border-color:#687DB3;color:#081F5C}
.by-tilbage span{transition:transform .15s}
.by-tilbage:hover span{transform:translateX(-3px)}

/* --- Titelblokken ----------------------------------------------------- */
.by-titelrum{padding:26px 0;border-bottom:1px solid #D1DAE5}
.by-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.by-top h1{font-size:clamp(28px,3.4vw,42px);font-weight:500;margin:0 0 8px;
  color:#081F5C;line-height:1.14;letter-spacing:-.015em}
.by-undertitel{color:#364151;font-size:16.5px;margin:0}
.by-pris{text-align:right;white-space:nowrap}
/* Prisen skal træde frem, men ikke råbe. Den var større end adressen — nu
   ligger den lige under, så øjet stadig går til den først. */
.by-pris b{display:block;font-size:clamp(23px,2.3vw,29px);font-weight:600;color:#081F5C;
  line-height:1.15;letter-spacing:-.02em}
.by-pris span{font-size:14px;color:#364151;display:block;margin-top:5px}

.by-maerke{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin:0 0 14px}
.by-maerke::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.by-maerke.ledig{background:#DCFCE7;color:#166534}
.by-maerke.udlejet{background:#364151;color:#fff}
.by-maerke.reserveret{background:#FFF7ED;color:#9A3412}
.by-maerke.kommer-snart{background:#E7F6FF;color:#081F5C}
.by-maerke.intern{background:#FEF3C7;color:#92400E}

/* --- To spalter ------------------------------------------------------- */
.by-spalter{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:56px;
  align-items:start;padding:36px 0 60px}
.by-hoejre{position:sticky;top:22px;display:flex;flex-direction:column;gap:16px}

.by-kasse{border:1px solid #D1DAE5;border-radius:18px;padding:26px;background:#fff;
  box-shadow:0 6px 28px rgba(15,23,42,.06)}
.by-kasse h3{margin:0 0 4px;font-size:17px;font-weight:600;color:#081F5C;letter-spacing:-.01em}
.by-kasse h3 + .by-linje{margin-top:12px}
.by-linje{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:15px;
  border-bottom:1px solid #EDF1F7}
.by-linje:last-of-type{border-bottom:0}
.by-linje span{color:#364151}
.by-linje b{font-weight:500;color:#0F172A;font-variant-numeric:tabular-nums}
.by-linje.tung{border-top:2px solid #081F5C;border-bottom:0;margin-top:6px;padding-top:14px}
.by-linje.tung span,.by-linje.tung b{color:#081F5C;font-size:17px;font-weight:600}

/* Datoerne. En liste, fordi der kan være flere — og fordi de skal kunne
   skimmes, ikke læses. */
.by-fremvisningsliste{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.by-fremvisningsliste li{font-size:15px;color:#0F172A;font-weight:600;
  padding-left:16px;position:relative}
.by-fremvisningsliste li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:#081F5C}
/* Dagvælgeren i formularen ligner tidsbåndene, for det er samme slags valg. */
.by-dage{margin-bottom:14px}
.by-kasse p a{color:#081F5C;font-weight:600;text-decoration:underline;
  text-underline-offset:2px;word-break:break-word}
.by-kasse p a:hover{color:#213C85}
.by-cta{display:block;width:100%;text-align:center;background:#081F5C;color:#fff;border:0;
  border-radius:999px;padding:15px 22px;font-size:15.5px;font-weight:600;cursor:pointer;
  text-decoration:none;font-family:inherit;margin-top:16px;box-sizing:border-box;
  transition:background .15s,transform .15s}
.by-cta:hover{background:#213C85;color:#fff;transform:translateY(-1px)}
.by-cta.sekundaer{background:#fff;color:#081F5C;border:1.5px solid #687DB3;margin-top:10px}
.by-cta.sekundaer:hover{background:#E7F6FF;color:#081F5C}
/* Lige meget luft over og under knappen. Var der 18 px over og 11 under,
   hang den fast i teksten nedenunder og så skæv ud. */
.by-cta-note{font-size:13px;color:#364151;text-align:center;margin:16px 0 0;line-height:1.55}
.by-kasse p{font-size:15px;color:#364151;line-height:1.65;margin:0}

/* --- Nøgletal --------------------------------------------------------- */
/* Fliserne har hver sin ramme. Før lå de i et gitter, hvor baggrunden
   dannede stregerne — og gik rækken ikke op, stod der en grå, tom kasse
   tilbage. Nu findes tomme felter simpelthen ikke. */
.by-fliser{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;
  margin:0 0 40px}
.by-flise{background:#fff;padding:20px 22px;border:1px solid #D1DAE5;border-radius:14px}
.by-flise b{display:block;font-size:22px;font-weight:600;color:#081F5C;line-height:1.2;
  letter-spacing:-.015em;margin-bottom:5px}
.by-flise span{font-size:12px;color:#364151;text-transform:uppercase;letter-spacing:.07em;font-weight:600}

/* --- Afsnit ----------------------------------------------------------- */
.by-afsnit{margin:0 0 44px}
.by-afsnit h2{font-size:23px;font-weight:500;color:#081F5C;margin:0 0 18px;
  letter-spacing:-.015em;position:relative;padding-left:16px}
.by-afsnit h2::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  border-radius:2px;background:#081F5C}
.by-afsnit p{margin:0 0 15px;line-height:1.8;font-size:16.5px;color:#364151}
.by-beskrivelse p:first-of-type{font-size:18px;color:#0F172A}

/* Boligoplysninger som opslagsliste, ikke som regneark. */
.by-data{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0 44px;margin:0}
.by-data div{display:flex;justify-content:space-between;gap:18px;padding:14px 0;
  border-bottom:1px solid #EDF1F7;font-size:15.5px}
.by-data dt,.by-data .n{color:#364151;margin:0}
.by-data dd,.by-data .v{margin:0;font-weight:500;color:#0F172A;text-align:right}

.by-fac{display:flex;flex-wrap:wrap;gap:9px}
.by-fac span{background:#E7F6FF;color:#081F5C;border-radius:999px;padding:9px 17px;
  font-size:14px;font-weight:500}

.by-plantegning{margin:0 0 44px}
.by-plantegning h2{font-size:23px;font-weight:500;margin:0 0 18px;color:#081F5C;
  letter-spacing:-.015em;position:relative;padding-left:16px}
.by-plantegning h2::before{content:'';position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  border-radius:2px;background:#081F5C}
.by-plantegning img{width:100%;height:auto;max-height:720px;object-fit:contain;background:#fff;
  border:1px solid #D1DAE5;border-radius:16px;display:block;padding:14px;box-sizing:border-box}
.by-plan-note{font-size:13.5px;color:#364151;margin:10px 0 0}

.by-baand{display:flex;flex-direction:column;gap:4px;padding:18px 24px;background:#E7F6FF;
  border-left:4px solid #081F5C;border-radius:0 12px 12px 0;margin:26px 0 0;font-size:15.5px}
.by-baand strong{color:#081F5C;font-size:16.5px}
.by-baand span{color:#364151}

@media (max-width:1060px){
  .by-spalter{grid-template-columns:1fr;gap:34px;padding-top:28px}
  .by-hoejre{position:static}
  .by-mosaik{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .by-mosaik figure:first-child{grid-column:auto}
  .by-mosaik figure:not(:first-child){display:none}
  .by-mosaik img{aspect-ratio:4/3;height:auto}
  .by-mosaik-vaerktoej{right:14px;bottom:14px}
  .by-indre{padding-inline:var(--by-gutter)}
  .by-top{align-items:flex-start;gap:18px}
  .by-pris{text-align:left}
  .by-titelrum{padding:24px 0 20px}
}

/* --- Lysbordet -------------------------------------------------------- */
.by-lys{position:fixed;inset:0;background:rgba(6,12,30,.96);z-index:99999;display:none;
  align-items:center;justify-content:center}
.by-lys.aaben{display:flex}
.by-lys img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:4px}
/* Sprogvælgeren ligger øverst i z-rækken og bliver hængende hen over
   lysbordet. Den skal ud, så længe man kigger på billeder. */
body.by-lys-aaben .gtranslate_wrapper,
body.by-lys-aaben .gt_container--93jfrr,
body.by-lys-aaben #gtranslate_wrapper,
body.by-lys-aaben .gt_float_switcher,
body.by-lys-aaben .weglot-container,
body.by-lys-aaben #weglot-switcher,
body.by-lys-aaben .trp-language-switcher-container{display:none !important}

/*
   Tegnene ×, ‹ og › har hver deres skævhed i skrifttypens firkant. Uden flex
   sidder de en anelse for højt og for langt til venstre i den runde knap.
   Flex centrerer linjeboksen, og line-height:1 fjerner den ekstra
   linjeafstand, der ellers skubber tegnet nedad.

   Alt står i én regel med vilje. Delt op i to blokke vandt den nederste over
   den øverste på font-size, og så var tegnene pludselig mindre end tiltænkt
   uden at nogen havde ændret dem.
*/
.by-lys-luk,.by-lys-frem,.by-lys-tilbage{position:absolute;background:rgba(255,255,255,.12);
  color:#fff;border:0;border-radius:999px;cursor:pointer;line-height:1;
  width:50px;height:50px;padding:0;transition:background .15s;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:Helvetica,Arial,sans-serif}
.by-lys-luk{top:24px;right:24px;font-size:28px}
/* Pilene er smallere tegn og tåler at fylde mere. De optiske par korrigeres
   hver sin vej, fordi ‹ og › ikke sidder ens i deres firkant. */
.by-lys-tilbage{left:20px;font-size:32px;padding-right:3px}
.by-lys-frem{right:20px;font-size:32px;padding-left:3px}
.by-lys-luk:hover,.by-lys-frem:hover,.by-lys-tilbage:hover{background:rgba(255,255,255,.3)}
.by-lys-tael{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;
  font-size:14px;background:rgba(0,0,0,.5);padding:8px 18px;border-radius:999px}

/* --- Optaget bolig ---------------------------------------------------- */
.by-side.optaget .by-mosaik img{filter:grayscale(.8);opacity:.86}
.by-side.optaget .by-pris b{color:#364151}

.by-side.optaget .by-mosaik::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(54,65,81,.12),rgba(54,65,81,.28))}

/* --- Flere ledige boliger i området ------------------------------------
   Intern viderestilling nederst på annoncen. Samme kortsprog som resten:
   hvid bund, tynd linje, BY-blå ved hover. */
.by-lignende{margin:34px auto 10px;padding-bottom:26px}
.by-lignende h2{font-size:20px;color:#081F5C;margin:0 0 14px;letter-spacing:-.01em}
.by-lignende ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.by-lignende a{display:block;border:1px solid #D1DAE5;border-radius:12px;
  padding:13px 16px;text-decoration:none;color:#0F172A;font-size:14.5px;line-height:1.5;
  transition:border-color .15s}
.by-lignende a:hover{border-color:#687DB3}
.by-lignende b{color:#081F5C;display:block;font-weight:600}
.by-lignende span{color:#364151;font-size:13.5px}