/* =========================================================
   estato.dk — genopbygget stylesheet
   Alle farver, skrifttyper, mål og afstande er aflæst direkte
   fra det oprindelige estato.dk website via getComputedStyle()
   og getBoundingClientRect() ved 1440px og 390px viewport.
   ========================================================= */

/* ---------- CSS custom properties (fra originalen) ---------- */
:root {
  --color-primary: #2c4d3a;       /* rgb(44,77,58) - primær grøn (tekst, footer-bund) */
  --color-primary-dark: #2c4d3c;  /* rgb(44,77,60) - hero-overlay boks */
  --color-cream: #f7f5e8;         /* rgb(247,245,232) - baggrund header/hero, hero-tekst */
  --color-white: #ffffff;
  --color-text-dark: #212121;     /* rgb(33,33,33) - brødtekst på ejendomssiden */
  --color-gold: #edc661;          /* rgb(237,198,97) - formularkant og knap på ejendomssiden */
  --color-gold-text: #262833;     /* rgb(38,40,51) - tekst på guld knap */
  --color-placeholder: #979797;   /* rgb(151,151,151) */

  /* Hele sitet bruger Lato Light (300) - aflæst fra originalen ved 1440px */
  --font-heading: 'Lato', Arial, sans-serif;
  --font-body: 'Lato', Arial, sans-serif;
  --font-weight-light: 300;

  --container-width: 1200px;
  --container-pad: 35px;

  --header-height: 130px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, p, a, ul, li, form, label, input, textarea, select, button, img { margin: 0; padding: 0; border: 0; font: inherit; }
html { -webkit-text-size-adjust: 100%; }
/* Body er en lodret flexbox, så bundmenuen altid ligger nederst:
   på korte sider skubbes den ned til bunden af browservinduet
   (margin-top: auto), på lange sider ligger den efter indholdet. */
body {
  background: var(--color-cream);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
  font-size: 15px;
  line-height: 1.5;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
b, strong { font-weight: 700; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* Indholdsbredden er 1200px på desktop (aflæst fra originalen), og
   35px sidemargen på mobil (390 - 70 = 320px, som originalen). */
.container {
  max-width: calc(var(--container-width) + 2 * var(--container-pad));
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header {
  background: var(--color-cream);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  flex-wrap: wrap;
  padding-top: 15px;
  padding-bottom: 15px;
}
.site-header__logo img {
  width: 187px;
  height: 59px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.site-nav a,
.site-nav .accordion-heading-text {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 300;
  color: var(--color-primary);
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav .accordion-heading-container:hover .accordion-heading-text {
  text-decoration: underline;
}

/* Dropdown-menu ("Information til lejere") */
.nav-accordion {
  position: relative;
}
.accordion-heading-container {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}
.accordion-trigger {
  width: 12px;
  height: 12px;
  background: url("../icons/icon_arrow.svg") no-repeat center / 11px 11px;
  opacity: 0.75;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.accordion-heading-container:hover .accordion-trigger { opacity: 1; }
.accordion-heading-container[aria-expanded="true"] .accordion-trigger {
  transform: rotate(180deg);
  opacity: 1;
}

/* Højden styres af en CSS-variabel, som JavaScript sætter ved åbning/lukning.
   På desktop er højden auto, så variablen kun bruges til mobil-udfoldningen. */
.accordion-desc-text {
  display: block;
  overflow: hidden;
  height: var(--acc-h, 0px);
  transition: height 0.3s ease;
}
.accordion-desc-text a {
  display: block;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 300;
  color: var(--color-primary);
  padding: 6px 0;
}

@media (min-width: 768px) {
  /* Dropdown som et lille kort med skygge, afrundede hjørner og pil op
     mod menupunktet - i sitets egne farver. */
  .nav-accordion .accordion-desc-text {
    position: absolute;
    top: calc(100% + 14px);
    right: -18px;
    z-index: 30;
    min-width: 252px;
    height: auto;
    overflow: visible;
    padding: 8px 0;
    background: var(--color-white);
    border: 1px solid rgba(44, 77, 58, 0.10);
    border-radius: 4px;
    box-shadow: 0 14px 30px rgba(44, 77, 58, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;   /* den lukkede menu kan aldrig opfange klik */
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  /* Usynlig "bro", så musen kan bevæge sig fra menupunktet ned i menuen */
  .nav-accordion .accordion-desc-text::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }
  /* Pilen op mod menupunktet */
  .nav-accordion .accordion-desc-text::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;      /* centreret under pilen i menupunktet */
    width: 11px;
    height: 11px;
    background: var(--color-white);
    border-left: 1px solid rgba(44, 77, 58, 0.10);
    border-top: 1px solid rgba(44, 77, 58, 0.10);
    transform: rotate(45deg);
  }
  .nav-accordion .accordion-heading-container[aria-expanded="true"] + .accordion-desc-text,
  .nav-accordion:focus-within .accordion-desc-text {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-accordion .accordion-desc-text a {
    padding: 9px 22px;
    font-size: 16px;
    white-space: nowrap;
    transition: background-color 0.15s ease, padding-left 0.15s ease;
  }
  .nav-accordion .accordion-desc-text a:hover {
    background: rgba(44, 77, 58, 0.07);
    padding-left: 26px;
    text-decoration: none;
  }
}

/* Åbner også ved mus-over, men kun på enheder med rigtig mus */
@media (min-width: 768px) and (hover: hover) {
  .nav-accordion:hover .accordion-desc-text {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  background: var(--color-cream);
}
.hero .container {
  padding-top: 0;
  padding-bottom: 40px;
}
.hero__frame {
  position: relative;
}
.hero__photo {
  width: 100%;
  aspect-ratio: 1200 / 765;
  object-fit: cover;
  border-radius: 4px;
}
/* Den grønne bar under billedet: 4px buede hjørner (aflæst fra originalen).
   Det hvide logo ligger som flex-element INDE i baren, højrestillet og
   lodret centreret - præcis som på estato.dk. */
.hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  height: 76px;
  background: var(--color-primary-dark);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 2;
}
.hero__heading {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.3;
  color: var(--color-cream);
  margin: 0;
}
.hero__whitelogo {
  width: 102px;
  height: 33px;
  flex-shrink: 0;
  margin-left: 30px;
}
.hero__heading b { font-weight: 700; }

/* =========================================================
   CONTENT SECTIONS (fælles for alle undersider)
   ========================================================= */
.page-section {
  padding: 50px 0;
}
.page-section + .page-section { padding-top: 0; }

.page-section h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.4;
  color: var(--color-primary);
  margin-bottom: 24px;
}
.page-section h2 b { font-weight: 700; }
.page-section h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 20px;
  color: var(--color-primary);
  margin: 30px 0 16px;
}
.page-section p,
.intro-text {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.page-section a.inline-link { text-decoration: underline; }
.legal-text {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-primary);
  max-width: 800px;
}
.legal-text b { font-weight: 700; }
.spacer { height: 30px; }
.spacer--lg { height: 60px; }

/* =========================================================
   INDHOLDSSIDER (kontakt, information, FAQ, opsigelse, lejekontrakt)
   Opsætning aflæst fra originalen: tekstspalte 566px til venstre,
   grønne paneler 560px til højre, 74px imellem = 1200px i alt.
   ========================================================= */
.content-page { padding: 0 0 40px; }
.content-cols {
  display: flex;
  align-items: flex-start;
  gap: 74px;
}
.content-main { flex: 0 0 566px; min-width: 0; }
.content-side { flex: 0 0 560px; min-width: 0; }
/* Kontaktpanel under teksten i venstre spalte (kontakt/opsigelse/lejekontrakt) */
.content-main > .panel--contact { margin-top: 35px; }

.content-title {
  font-size: 30px;
  font-weight: 300;
  line-height: 39px;
  color: var(--color-text-dark);
  margin: 28px 0 0;
}
.content-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 26px;
  color: var(--color-text-dark);
  margin: 20px 0 0;
}
.content-text + .content-text { margin-top: 27px; }
.content-subheading + .content-text { margin-top: 16px; }
.content-text--tight { margin-top: 16px; }
.content-text b { font-weight: 700; }
.content-text a { text-decoration: underline; }
.content-subheading {
  font-size: 13px;
  font-weight: 700;
  line-height: 26px;
  color: var(--color-text-dark);
  margin: 20px 0 0;
}

/* Grønne paneler */
.panel {
  background: var(--color-primary);
  border-radius: 4px;
  color: var(--color-white);
  padding: 23px 42px 30px;
}
.panel--form { padding: 30px 43px 30px; }
.panel + .panel { margin-top: 10px; }
.panel__heading {
  font-size: 28px;
  font-weight: 300;
  line-height: 36px;
  color: var(--color-white);
  margin: 0 0 6px;
}
.panel__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-white);
  margin: 0;
}
.panel__text {
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
  color: var(--color-white);
  margin: 8px 0 0;
}
.panel__text--spaced { margin-top: 30px; }
.panel__text--note { margin-top: 14px; }
.panel-row {
  display: flex;
  gap: 26px;
  margin-top: 8px;
}
.panel__text + .panel-row { margin-top: 15px; }
.panel-row .fa {
  width: 27px;
  flex-shrink: 0;
  text-align: center;
  font-size: 18px;
  line-height: 20px;
}
.panel-row p {
  font-size: 13px;
  font-weight: 300;
  line-height: 24px;
  color: var(--color-white);
  margin: 0;
}
.panel-row p b { font-weight: 700; }
.panel-note { margin-left: 22px; }

/* =========================================================
   FORMULARER
   ========================================================= */
.contact-form {
  margin-top: 20px;
}
.form-info-text {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-primary);
  margin-bottom: 14px;
}
.form-info-text b { font-weight: 700; }
.form-row { margin-bottom: 18px; }
.form-row--check {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-form label {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 300;
  color: var(--color-primary);
  margin-bottom: 6px;
}
.form-row--check label { margin-bottom: 0; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="date"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #c9c4ad;
  background: var(--color-white);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 15px;
  color: var(--color-primary);
}
.contact-form ::placeholder { font-family: var(--font-heading); font-weight: 300; }
.contact-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.form-submit {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 30px;
  border-radius: 4px;
  transition: opacity 0.2s;
}
.form-submit:hover { opacity: 0.88; }

/* Honeypot mod spam-robotter - usynligt for mennesker */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Skjulte labels (originalen viser kun placeholder-teksten,
   men labels bevares for skærmlæsere) */
.form-label-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Formular i grønt panel: guldkant og guld knap (som originalen) */
.contact-form--panel { margin-top: 0; padding-top: 8px; }
.contact-form--panel .form-info-text { margin-bottom: 21px; }
.contact-form--panel .form-info-text { color: var(--color-white); font-size: 13px; }
.contact-form--panel .form-info-text b { font-weight: 700; }
.contact-form--panel .form-row { margin-bottom: 16px; }
.contact-form--panel input[type="text"],
.contact-form--panel input[type="email"],
.contact-form--panel input[type="tel"],
.contact-form--panel input[type="date"],
.contact-form--panel select,
.contact-form--panel textarea {
  height: 35px;
  padding: 0 10px;
  border: 1px solid var(--color-gold);
  border-radius: 4px;
  font-size: 13px;
  color: #282828;
}
.contact-form--panel textarea {
  height: 100px;
  min-height: 100px;
  padding: 10px;
}
/* Henvendelsesformularerne har et højere beskedfelt (som originalen) */
.contact-form--tall textarea { height: 200px; min-height: 200px; }
.contact-form--panel ::placeholder { color: var(--color-placeholder); font-size: 13px; }
.contact-form--panel input:focus,
.contact-form--panel textarea:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}
/* Knappen i et grønt panel er altid guld (grøn på grøn ville forsvinde) */
.form-submit--gold,
.contact-form--panel .form-submit {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 10px;
  background: var(--color-gold);
  color: var(--color-gold-text);
  border-radius: 2px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: center;
}

/* =========================================================
   EJENDOM (property) — alle mål aflæst fra originalen
   ========================================================= */
.property { padding: 0 0 24px; }
.property-details { padding: 0 0 40px; }

/* Overskrift til venstre, sags-nr./opdateret til højre */
.property-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}
.page-section .property-address {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-text-dark);
  max-width: 600px;
  margin: 0;
}
.property-ref { text-align: right; flex-shrink: 0; margin-top: 7px; }
.page-section .property-case {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-dark);
  margin: 0;
}
.page-section .property-updated {
  font-size: 10px;
  line-height: 1.3;
  color: var(--color-text-dark);
  margin: 0;
}

/* Hovedbillede med "Udlejet"-mærkat i venstre side */
.property-hero {
  position: relative;
  margin-top: 27px;
}
.property-hero img {
  width: 100%;
  aspect-ratio: 1200 / 800;
  object-fit: cover;
  border-radius: 4px;
}
.property-badge {
  position: absolute;
  top: 26px;
  left: 0;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 17px;
  background: var(--color-primary);
  border-radius: 0 4px 4px 0;
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

/* Miniaturebilleder: 8 pr. række på desktop */
.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  margin-top: 17px;
}
.gallery a { display: block; overflow: hidden; border-radius: 4px; }
.gallery img { width: 100%; aspect-ratio: 145 / 95; object-fit: cover; }

/* Tekst til venstre, formularpanel til højre */
.property-cols {
  display: flex;
  align-items: flex-start;
  gap: 39px;
}
.property-info { flex: 0 1 600px; min-width: 0; }
.page-section .property-info .property-address { margin: 28px 0 0; }

.stat-list { margin: 18px 0 0; }
.stat-row {
  display: grid;
  grid-template-columns: 33px 96px 1fr;
  align-items: center;
  height: 30px;
}
.stat-row img { width: 23px; height: 23px; }
.stat-row .stat-label,
.stat-row .stat-value {
  font-size: 15px;
  font-weight: 300;
  line-height: 19.5px;
  color: var(--color-text-dark);
}
.property-divider {
  width: 300px;
  max-width: 100%;
  height: 2px;
  background: rgba(44, 77, 58, 0.43);
  margin: 19px 0 0;
}
.page-section .property-desc {
  max-width: 566px;
  margin: 23px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 26px;
  color: var(--color-text-dark);
}
.property-desc b { font-weight: 700; }

.property-panel {
  flex: 0 0 561px;
  max-width: 561px;
  background: var(--color-primary);
  border-radius: 4px;
  padding: 30px 44px 19px 41px;
}
.page-section .property-panel__heading {
  font-size: 28px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--color-white);
  margin: 0 0 2px;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 42px 0 30px;
  margin-top: auto;   /* låser bundmenuen til bunden af vinduet på korte sider */
}
/* Kolonnebredderne svarer til originalens placeringer ved 1200px indhold:
   logo 0, adresse 545, Administration 720, Udlejning 889, sponsor 1117. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 545fr) minmax(0, 175fr) minmax(0, 169fr) minmax(0, 228fr) minmax(0, 83fr);
  align-items: start;
}
.footer-col {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-white);
}
.footer-col--logo img { margin: 0; }

/* Alle tekstlinjer i bundmenuen ligger på det samme 24px linjegitter,
   så adresse, overskrifter og mail/telefon står ud for hinanden
   (aflæst fra originalen: alle kolonner starter på samme linje). */
.footer-line {
  display: flex;
  align-items: center;
  gap: 17px;      /* teksten starter 32px efter kolonnens kant (15px ikon + 17px) */
  height: 24px;
  line-height: 24px;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}
.footer-line--heading { font-weight: 700; }
.footer-icon { width: 15px; height: 15px; flex-shrink: 0; }
.footer-col--logo img { margin-top: -4px; }   /* logoets top ligger 4px over tekstlinjerne */
/* Sponsor-kolonne: OB-logo og tekst centreret på samme akse (som originalen) */
.footer-sponsor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: end;
  width: 113px;
}
.footer-sponsor img { margin: 3px 0 5px; }
.footer-sponsor .footer-sponsor-text {
  text-align: center;
  font-size: 9px;
  margin: 0;
  width: 100%;
}
.footer-links {
  margin-top: 20px;
  font-size: 9px;
  line-height: 1.7;
}
.footer-links a { display: inline-block; margin-right: 43px; }
.footer-links a:last-child { margin-right: 0; }
.footer-links a:hover { text-decoration: underline; }
.footer-copyright {
  font-size: 9px;
  margin-top: 8px;
  opacity: 0.9;
}

/* =========================================================
   RESPONSIVE — mobil (samme opdeling estato.dk selv bruger: 763/768px)
   ========================================================= */
@media (max-width: 767px) {
  :root { --container-pad: 35px; }

  .site-header .container {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .site-header__logo img { width: 140px; height: 43px; }
  .site-nav {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .site-nav a,
  .site-nav .accordion-heading-text { font-size: 15px; }
  /* På mobil står "Kontakt" før "Information til lejere" (som originalen) */
  .site-nav__link--kontakt { order: 1; }
  .nav-accordion { order: 2; }
  /* Mobil: menuen folder sig ud under punktet, centreret som resten af navigationen */
  .nav-accordion { width: 100%; }
  .accordion-heading-container { justify-content: center; }
  .nav-accordion .accordion-desc-text {
    position: static;
    text-align: center;
  }
  .nav-accordion .accordion-desc-text a {
    font-size: 15px;
    padding: 7px 0;
    color: rgba(44, 77, 58, 0.85);
  }
  .nav-accordion .accordion-desc-text a:first-child { padding-top: 10px; }

  .hero .container { padding-bottom: 0; display: flex; flex-direction: column; }
  .hero__frame { order: 2; }
  .hero__overlay {
    order: 1;
    position: static;
    height: auto;
    padding: 16px 20px;
    margin-bottom: 8px;
    justify-content: center;
  }
  .hero__heading { font-size: 18px; text-align: center; }
  .hero__whitelogo { display: none; }

  .page-section { padding: 34px 0; }
  .page-section h2 { font-size: 20px; }

  /* Indholdssider på mobil: tekst, derefter formular, derefter kontaktpanel
     - samme rækkefølge som originalen */
  /* display:contents lader venstre spaltes indhold blive selvstændige
     flex-elementer, så formularen kan lægge sig mellem tekst og kontaktpanel */
  .content-cols { flex-direction: column; gap: 0; }
  .content-main { display: contents; }
  .content-main > * { order: 1; }
  .content-side { order: 2; margin-top: 26px; }
  .content-main > .panel--contact { order: 3; margin-top: 10px; }
  .content-title { font-size: 25px; line-height: 32px; margin-top: 10px; }
  .content-text, .content-subheading { font-size: 12px; line-height: 24px; }
  .panel { padding: 20px 18px 24px; }
  .panel--form { padding: 20px 18px 24px; }
  .panel__heading { font-size: 22px; line-height: 28px; }
  .panel-row { gap: 18px; }
  .panel-note { display: block; margin-left: 0; }

  /* --- Ejendomsside på mobil (mål aflæst fra originalen ved 390px) --- */
  .property-head { display: block; }
  .property-address { font-size: 20px; line-height: 26px; }
  .property-ref { text-align: right; margin-top: 10px; }
  .property-updated { display: none; }
  .property-hero { margin-top: 18px; }
  .property-hero img { aspect-ratio: 320 / 213; }
  .property-badge {
    top: 12px;
    height: 35px;
    padding: 0 17px;
    font-size: 17px;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
    margin-top: 16px;
  }
  .gallery img { aspect-ratio: 150 / 100; }

  .property-cols { flex-direction: column; gap: 0; }
  .property-info { flex: 1 1 auto; width: 100%; }
  .property-info .property-address { margin-top: 10px; }
  .stat-list { margin-top: 30px; }
  .stat-row { grid-template-columns: 23px 90px 1fr; height: 25px; }
  .property-desc { margin-top: 18px; }
  .property-panel {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin-top: 30px;
    padding: 20px;
  }
  .property-panel__heading { font-size: 25px; text-align: center; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
  }
  .footer-col { font-size: 10px; }
  .footer-line { font-size: 10px; height: 20px; line-height: 20px; }
  /* Mobil: linkene står under hinanden, som på originalen */
  .footer-links a { display: block; margin: 0 0 12px; }
  .footer-links a:last-child { margin-bottom: 0; }
  /* Mobil: logo og tekst side om side (aflæst fra originalen) */
  .footer-sponsor {
    flex-direction: row;
    align-items: center;
    justify-self: start;
    width: auto;
    gap: 12px;
  }
  .footer-sponsor img { margin: 0; width: 35px; height: 35px; }
  .footer-sponsor .footer-sponsor-text { text-align: left; width: auto; font-size: 10px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
}