:root {
  color-scheme: light dark;
  /* Mursten-palette. Værdierne er appens egne — se Color.brandOrange og
     Color.appBackground i FIndHome/ContentView.swift. Holdes i sync, så
     site og app læses som ét mærke. ALDRIG grøn accent. */
  --bg: #F5F4F2;
  --fg: #2B2A27;
  --muted: #6C6A64;
  --card: #FFFFFF;
  --line: #E7E4DD;
  --accent: #A82438;
  --accent-soft: rgba(168, 36, 56, 0.09);
  --muted-surface: #EDECEA;
}

/* Mørke værdier ét sted, brugt to gange: når systemet siger mørk og
   brugeren ikke har valgt lys, og når brugeren selv vælger mørk. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161618;
    --fg: #ECE9E3;
    --muted: #A6A39C;
    --card: #212123;
    --line: #323235;
    --accent: #C93A4C;
    --accent-soft: rgba(201, 58, 76, 0.15);
    --muted-surface: #323236;
  }
}

:root[data-theme="dark"] {
  --bg: #161618;
  --fg: #ECE9E3;
  --muted: #A6A39C;
  --card: #212123;
  --line: #323235;
  --accent: #C93A4C;
  --accent-soft: rgba(201, 58, 76, 0.15);
  --muted-surface: #323236;
}

* { box-sizing: border-box; }

/* Skal stå FØR alt der sætter display. Ellers vinder fx .grid { display: grid }
   over hidden-attributten, og et "skjult" element bliver stående. */
[hidden] { display: none !important; }

/* Synlig fokus-markering på ALT der kan nås med tastatur.
   Flere steder i arket står "outline: none" på et inputfelt, fordi rammen
   ligger på beholderen. Uden dette kan en tastaturbruger ikke se, hvor de
   er — og det gælder også hvis nogen senere fjerner en outline et nyt sted. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16.5px/1.7 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) 0 80px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 6px;
  font-size: clamp(30px, 6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

h2 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

p { margin: 0 0 9px; color: var(--fg); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); font-weight: 500; text-underline-offset: 2px; }

section {
  margin: 14px 0;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* Intro/opdateret-dato lige efter h1 står frit, ikke i et kort */
main > p { color: var(--muted); }

main:not(.site) > nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 28px 0 8px;
}

main:not(.site) > nav a {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
  background: var(--card);
}

main:not(.site) > nav a:hover { border-color: var(--accent); color: var(--accent); }

/* Diskret tilbage-til-oversigt-link i toppen af hvert dokument */
.back {
  display: inline-block;
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
}
.back:hover { color: var(--accent); }



/* ═══════════════════════════════════════════════════════════════════════
   FORSIDEN

   Alt herunder er scoped til .site, så de juridiske dokumenter ovenfor
   er urørt. Farverne kommer fra de samme tokens, så en ændring i
   paletten rammer begge.

   Ingen JavaScript. Content-Security-Policy forbyder scripts helt, og
   alt herunder kan gøres i CSS alene — inklusive scroll-animationer og
   FAQ-udfoldning (<details>).
   ═══════════════════════════════════════════════════════════════════════ */

.site {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.wrap {
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
}
.wrap--narrow { width: min(760px, calc(100% - 44px)); }

/* Søgesiden er et arbejdsredskab, ikke en tekstside: listen og kortet skal
   have hele skærmen. En spalte på 1120 px midt på en bred skærm giver to
   annoncer ved siden af hinanden og et kort så smalt, at man kun ser én
   bydel ad gangen. Læsesiderne beholder deres målte bredde. */
body[data-page="search"] .wrap {
  width: calc(100% - clamp(32px, 5vw, 96px));
  max-width: 2100px;
}

/* Topbjælken er ramme, ikke tekst: mærket hører til i skærmens venstre
   hjørne og skal stå samme sted på alle sider — ikke rykke ind, fordi
   indholdet under den er en smal læsespalte. */
.topbar > .wrap {
  width: calc(100% - clamp(32px, 5vw, 96px));
  max-width: 2100px;
}

/* Forsidens boligrækker følger samme kant som mærket. Rullebare rækker
   skal bruge skærmen; det er læseteksten der har gavn af en smal spalte. */
body[data-page="home"] .hero > .wrap,
body[data-page="home"] .city-row > .wrap {
  width: calc(100% - clamp(32px, 5vw, 96px));
  max-width: 2100px;
}



/* ── Min profil ──────────────────────────────────────────────────────── */

.profile-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
}
.profile-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 30px;
  font-weight: 680;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-meta .detail-h1 { margin: 0 0 4px; }
.profile-meta .listing-where { margin: 0; }
.profile-warn { margin: 6px 0 0; font-size: 13.5px; color: var(--accent); }
.profile-warn-row { margin: 4px 0 0; }
.profile-warn-row .login-link { font-size: 13.5px; color: var(--muted); }

.profile-section { margin-bottom: 38px; }
.profile-h {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.profile-section .grid { margin-top: 0; }

/* ── Topbjælkens menu ────────────────────────────────────────────────── */

.topbar-link {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-link:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }

.menu { position: relative; }

.menu-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.menu-btn:hover { box-shadow: 0 2px 10px -4px rgb(0 0 0 / 0.35); }
.menu-btn[aria-expanded="true"] { border-color: var(--accent); }
.menu-btn svg { width: 17px; height: 17px; }

.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: 286px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: 0 18px 44px -18px rgb(0 0 0 / 0.45);
  animation: menu-in 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }

.menu-panel hr {
  height: 1px;
  margin: 7px 6px;
  border: 0;
  background: var(--line);
}

.menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }

.menu-item--rich { padding: 11px 12px; }
.mi-title { display: block; font-weight: 640; }
.mi-sub {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
}

.menu-label {
  margin: 8px 0 4px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu-panel .themetoggle,
.menu-panel .langtoggle { margin: 0 6px 6px; }

/* Beskeden om at login sker i appen */
.sheet--note { width: min(460px, calc(100% - 32px)); }
.note-body { padding: clamp(22px, 4vw, 30px); }
.note-body h2 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 660;
  letter-spacing: -0.02em;
}
.note-body p { margin: 0 0 20px; color: var(--muted); line-height: 1.6; }
.note-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.note-actions .btn {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.note-actions .btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

@media (max-width: 560px) {
  .topbar-link { display: none; }
}

/* ── Topbjælke ───────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--bg); }
}

.topbar > .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.brand svg { width: 24px; height: 24px; color: var(--accent); }

.topbar .spacer { flex: 1; }

.topbar .pill {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 9vw, 104px) 0 clamp(20px, 4vw, 40px);
}

/* Brand-skær bag mærket. Samme greb som rolleskiftet i appen, så de to
   flader føles beslægtede. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto 50%;
  translate: -50% 0;
  width: min(900px, 130%);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 42%,
              color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%);
  pointer-events: none;
}

.hero > .wrap { position: relative; }

.hero-copy {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(40px, 8.5vw, 78px);
  font-weight: 680;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero .lede {
  max-width: 32ch;
  margin: 0 auto;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}


.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
}

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 620;
  font-size: 16px;
}
.badge-soon svg { width: 17px; height: 17px; }

.actions small { color: var(--muted); font-size: 13.5px; }

/* ── Telefonen ───────────────────────────────────────────────────────── */

.device {
  position: relative;
  width: min(330px, 78vw);
  margin: clamp(32px, 6vw, 56px) auto 0;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--fg) 22%, transparent),
              color-mix(in srgb, var(--fg) 8%, transparent));
  box-shadow: 0 32px 70px -28px color-mix(in srgb, var(--fg) 55%, transparent),
              0 2px 8px color-mix(in srgb, var(--fg) 12%, transparent);
}

.device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
}

/* ── Sektioner ───────────────────────────────────────────────────────── */

.band { padding: clamp(56px, 9vw, 104px) 0; }
.band--tint { background: var(--card); border-block: 1px solid var(--line); }

.eyebrow-c {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 680;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Kun sektionsoverskrifter — ikke enhver h2 inde i båndet. Boligkortenes
   titel er også en h2 (af hensyn til overskrifts-rækkefølgen), og den blev
   tegnet i 40 px, fordi .band h2 vandt på specificitet. Samme fælde som
   .detail-price. Vælgeren peger nu på de overskrifter, der faktisk er
   sektionens egne. */
.band > .wrap > h2,
.band > .wrap > .row-head > h2 {
  margin: 0 0 14px;
  font-size: clamp(27px, 4.4vw, 40px);
  font-weight: 660;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.band > .wrap > .row-head > h2 { margin: 0; }

/* Kun afsnit UDEN egen klasse. Reglen ramte før alt i et bånd og vandt på
   specificitet over fx .detail-price, så prisen blev tegnet dæmpet grå i
   stedet for i brandfarven. */
.band > .wrap > p:not([class]) {
  max-width: 56ch;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--muted);
}

/* Trinnene */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 30px 34px;
  margin-top: 44px;
  counter-reset: step;
}

.step { counter-increment: step; }

.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin: 0 0 6px;
  font-size: 18.5px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.step p { margin: 0; color: var(--muted); line-height: 1.6; }

/* De to roller */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 44px;
}

.card {
  padding: clamp(24px, 3.4vw, 34px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.band--tint .card { background: var(--bg); }

.card h3 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.card > p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }

.ticks { margin: 0; padding: 0; list-style: none; }

.ticks li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 9px;
  line-height: 1.5;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  rotate: -45deg;
  border-radius: 1px;
}

.note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}
.note strong { color: var(--fg); }

/* Sikkerhedsafsnittet skal veje mere end de andre — det er det eneste
   sted på siden hvor en læser kan tabe penge. */
.warn {
  margin-top: 34px;
  padding: clamp(24px, 3.4vw, 36px);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 20px;
}
.warn p { margin: 0 0 12px; line-height: 1.62; }
.warn p:last-child { margin-bottom: 0; }
.warn strong { color: var(--accent); }

/* FAQ — <details> klarer udfoldningen uden en linje JavaScript */
.faq { margin-top: 34px; border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 2px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  rotate: 45deg;
  transition: rotate 0.2s;
}
.faq details[open] summary::after { rotate: -135deg; }
.faq summary:hover { color: var(--accent); }

.faq .answer { padding: 0 2px 20px; color: var(--muted); line-height: 1.62; }
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ── Bund ────────────────────────────────────────────────────────────── */

.site-footer {
  padding: clamp(40px, 6vw, 64px) 0 48px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--muted);
}

.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0 0 22px;
}
.site-footer .links a { color: var(--fg); text-decoration: none; font-weight: 500; }
.site-footer .links a:hover { color: var(--accent); }
.site-footer p { margin: 0 0 5px; }

/* ── Bevægelse ───────────────────────────────────────────────────────────
   Indhold toner op når det kommer i syne. animation-timeline: view() er
   CSS alene — ingen IntersectionObserver, intet script. Browsere uden
   understøttelse springer animationen over og viser indholdet med det
   samme, hvilket er den rigtige fallback.
   ──────────────────────────────────────────────────────────────────────── */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes reveal {
      from { opacity: 0; translate: 0 22px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOLIGSØGNING (/boliger)
   ═══════════════════════════════════════════════════════════════════════ */

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.band--search { padding-top: clamp(30px, 5vw, 52px); }

.search-h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5.2vw, 46px);
  font-weight: 670;
  letter-spacing: -0.03em;
}

.search-lede {
  max-width: 54ch;
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.searchbar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  height: 54px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.searchbar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.searchbar svg { flex: none; width: 19px; height: 19px; color: var(--muted); }

.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 16.5px;
}
.searchbar input:focus { outline: none; }
.searchbar input::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.5); }

.search-status {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.listing {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.listing:hover { border-color: var(--accent); transform: translateY(-2px); }
.listing:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.listing-media {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Uden billede skal kortet ikke kollapse — mærket står i stedet */
.listing-media--empty {
  background:
    radial-gradient(circle at 50% 46%,
      color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    color-mix(in srgb, var(--fg) 6%, transparent);
}

.listing-body { padding: 15px 17px 18px; }

.listing-price {
  margin: 0 0 4px;
  font-size: 18.5px;
  font-weight: 660;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.listing-price span { font-size: 14px; font-weight: 500; color: var(--muted); }

.listing-title {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 580;
  letter-spacing: -0.005em;
  /* Annoncetitler er brugerskrevne og kan være lange — to linjer, så
     kortene i rækken beholder samme højde. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.listing-where,
.listing-meta {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.listing-where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-meta { margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ── Detalje-arket ───────────────────────────────────────────────────── */

.sheet {
  width: min(1000px, calc(100% - 28px));
  max-height: min(88vh, 940px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.sheet::backdrop { background: rgb(0 0 0 / 0.45); backdrop-filter: blur(3px); }

.sheet-inner { position: relative; max-height: inherit; overflow-y: auto; }

.sheet-close {
  position: sticky;
  top: 12px;
  left: calc(100% - 54px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(8px);
  color: var(--fg);
  cursor: pointer;
}
.sheet-close svg { width: 16px; height: 16px; }

.sheet-body { padding: 0 clamp(18px, 3.6vw, 28px) clamp(22px, 3.6vw, 30px); }

.gallery {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * clamp(18px, 3.6vw, 28px)) 20px;
  padding: 0 clamp(18px, 3.6vw, 28px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.gallery img {
  flex: none;
  width: min(300px, 78%);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  scroll-snap-align: start;
}

.sheet-head { margin-bottom: 20px; }
.sheet-body > .detail-h1 { padding-top: 26px; }
.sheet-head .listing-price { font-size: 24px; }
.sheet-head h2 {
  margin: 4px 0 4px;
  font-size: 23px;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: 0 0 20px;
  border-top: 1px solid var(--line);
}
.facts dt,
.facts dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.facts dt { color: var(--muted); padding-right: 22px; }
.facts dd { text-align: right; font-weight: 520; }

.sheet-desc {
  margin: 0 0 20px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.sheet-cta {
  margin: 0;
  padding: 15px 17px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg);
}

.pill--link { text-decoration: none; transition: color 0.15s, border-color 0.15s; }
.pill--link:hover { color: var(--accent); border-color: var(--accent); }

.ghost {
  margin-top: 4px;
  color: var(--accent);
  font-weight: 560;
  font-size: 15.5px;
  text-decoration: none;
}
.ghost:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Filtre på søgesiden ─────────────────────────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin-top: 14px;
}

.field { display: flex; flex-direction: column; gap: 5px; }

.field > span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding-left: 2px;
}

.field select {
  appearance: none;
  padding: 10px 34px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  /* Pilen tegnes i baggrunden, så vi ikke behøver et ikon-element. Farven
     er hårdkodet grå, fordi en data-URI ikke kan læse CSS-variabler — den
     fungerer på både lys og mørk flade. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a8781' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
}
.field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.clear {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 550;
  cursor: pointer;
}
.clear:hover { border-color: var(--accent); color: var(--accent); }

.search-count {
  margin: 22px 0 0;
  font-size: 14.5px;
  font-weight: 550;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.search-count + .search-status { margin-top: 10px; }

/* ── Sociale links i bunden ──────────────────────────────────────────── */

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 20px;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 550;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.social a:hover { border-color: var(--accent); color: var(--accent); }
.social svg { width: 17px; height: 17px; flex: none; }

/* ═══════════════════════════════════════════════════════════════════════
   FORSIDEN, SØGE-FØRST

   Det første man møder er en søgning og rigtige boliger — ikke en
   app-knap. Derfor er heltemotivet lavere, venstrestillet og tættere på
   indholdet under det.
   ═══════════════════════════════════════════════════════════════════════ */





.save-search.is-done { border-color: var(--accent); color: var(--accent); }

/* ── Skriv til udlejeren ─────────────────────────────────────────────── */

.contact {
  margin: 34px 0 0;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}
.contact .profile-h { margin-bottom: 8px; }
.contact .sheet-desc { margin-bottom: 16px; }
.contact textarea {
  width: 100%;
  min-height: 104px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
}
.contact textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact .login-cta { max-width: 220px; margin-top: 12px; }

/* ── Gem en bolig ────────────────────────────────────────────────────── */

.listing-media { position: relative; }

.heart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 82%, transparent);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.heart:hover { transform: scale(1.08); background: #fff; }
.heart svg {
  width: 19px;
  height: 19px;
  /* Ufyldt: en ren kontur. Fyldt: mærkefarven. Formen er den samme, så den
     ikke hopper, når man trykker. */
  fill: none;
  stroke: #23211e;
  stroke-width: 1.8;
}
.heart.is-on svg { fill: var(--accent); stroke: var(--accent); }
.heart.is-busy { opacity: 0.6; }

/* På boligens egen side står hjertet ved siden af prisen og har en tekst */
.detail-actions { margin-top: 12px; }
.heart--big {
  position: static;
  width: auto;
  height: 44px;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  backdrop-filter: none;
}
.heart--big::after {
  content: attr(aria-label);
}
.heart--big:hover { transform: none; border-color: var(--accent); }
.heart--big svg { stroke: currentColor; }

/* ── Byforslag under søgefeltet ──────────────────────────────────────── */

.ta-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 46px -20px rgb(0 0 0 / 0.45);
  max-height: 320px;
  overflow-y: auto;
}

.ta-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border-radius: 10px;
  cursor: pointer;
}
.ta-item.is-active,
.ta-item:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }

.ta-navn { font-size: 15.5px; font-weight: 560; color: var(--fg); }
.ta-post { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── Forsidens billede ───────────────────────────────────────────────────
   Et foto bag overskriften, som på de boligsider folk kender. Teksten SKAL
   kunne læses uanset hvad billedet viser, så der ligger et mørkt slør
   ovenpå — ellers forsvinder en hvid overskrift i en lys væg. */

.hero--photo {
  position: relative;
  isolation: isolate;
  min-height: clamp(440px, 64vh, 660px);
  display: flex;
  align-items: center;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
  /* Farven bag billedet, så siden ikke blinker hvid mens det hentes */
  background: #6f6255;
}

.hero--photo .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Udsnittet skubbes ned, så parret sidder OVER overskriften og teksten
     lander på den rolige flade nedenfor. Med ansigterne midt i motivet lå
     overskriften hen over dem, og begge dele tabte. */
  object-position: 50% 64%;
  z-index: -2;
}

.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgb(20 16 12 / 0.78) 0%, rgb(20 16 12 / 0.55) 38%,
                    rgb(20 16 12 / 0.12) 72%, rgb(20 16 12 / 0.05) 100%),
    linear-gradient(to top, rgb(20 16 12 / 0.45), transparent 46%);
}

/* Brand-skæret hører til den gamle, billedløse udgave */
.hero--photo::before { display: none; }

.hero--photo h1,
.hero--photo .lede { color: #fff; }
.hero--photo h1 { text-shadow: 0 2px 24px rgb(0 0 0 / 0.45); max-width: 18ch; }
.hero--photo .lede {
  color: rgb(255 255 255 / 0.88);
  max-width: 46ch;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.3);
}

/* Søgefeltet skal stå som et hvidt kort oven på billedet — også i mørkt tema */
.hero--photo .hero-search {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 18px 50px -22px rgb(0 0 0 / 0.7);
}
.hero--photo .hero-search input { color: #23211e; }
.hero--photo .hero-search input::placeholder { color: #8a857d; }
.hero--photo .hero-search > svg { color: #8a857d; }

/* Byknapperne: hvide konturer på foto, ikke sidens dæmpede linjefarve */
.hero--photo .cities a {
  border-color: rgb(255 255 255 / 0.38);
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero--photo .cities a:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.22);
  color: #fff;
}


/* Indholdet midt i billedet, som på de boligsider folk kender. Overskrift
   og ét søgefelt — intet andet. Alt hvad der står under feltet, konkurrerer
   med det ene, brugeren kom for. */
.hero-center { text-align: center; }
.hero--photo .hero-center h1 {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: 26px;
  font-size: clamp(38px, 6.4vw, 66px);
}
.hero--photo .hero-center .hero-search {
  margin-inline: auto;
  max-width: 780px;
  padding: 8px 8px 8px 24px;
  text-align: left;
  border-radius: 999px;
}
.hero--photo .hero-center .hero-search input { height: 56px; font-size: 17.5px; }
.hero--photo .hero-center .hero-search button { height: 56px; padding: 0 34px; font-size: 16.5px; }
.hero--photo .hero-center .hero-search > svg { width: 21px; height: 21px; }
/* Uden undertekst og byknapper er sløret det eneste, der holder overskriften
   læsbar — så det skal være jævnt fordelt i stedet for skråt. */
.hero--photo::after {
  background:
    /* Et blødt, mørkt bælte lige dér hvor teksten står — ikke et jævnt slør
       over hele fladen. Så bliver overskriften læsbar uden at billedet
       bliver gråt. */
    radial-gradient(120% 70% at 50% 62%, rgb(16 12 10 / 0.62) 0%,
                    rgb(16 12 10 / 0.34) 55%, rgb(16 12 10 / 0.12) 100%),
    linear-gradient(to bottom, rgb(16 12 10 / 0.34) 0%, rgb(16 12 10 / 0.1) 34%,
                    rgb(16 12 10 / 0.42) 100%);
}

@media (max-width: 520px) {
  /* Pladsholderen skal kunne stå helt: "Hvor vil du gerne bo?" blev klippet
     midt i ordet, fordi knappen tog bredden. 16px er bunden — under det
     zoomer iOS ind, når feltet får fokus. */
  .hero--photo .hero-center .hero-search { padding: 6px 6px 6px 16px; gap: 6px; }
  .hero--photo .hero-center .hero-search input { font-size: 16px; height: 52px; }
  .hero--photo .hero-center .hero-search button { height: 52px; padding: 0 20px; font-size: 15.5px; }
  .hero--photo .hero-center .hero-search > svg { width: 18px; height: 18px; }
}

@media (max-width: 700px) {
  /* På en telefon fylder teksten mere af fladen, så sløret skal være kraftigere */
  .hero--photo::after {
    background:
      linear-gradient(to top, rgb(20 16 12 / 0.8), rgb(20 16 12 / 0.45) 55%,
                      rgb(20 16 12 / 0.35) 100%);
  }
  .hero--photo { min-height: clamp(380px, 70vh, 560px); }
}

.hero--search { padding: clamp(34px, 6vw, 76px) 0 clamp(24px, 3.4vw, 40px); }

.hero--search h1 {
  max-width: 16ch;
  margin: 0 0 14px;
  font-size: clamp(36px, 6.6vw, 62px);
  font-weight: 680;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.hero--search .lede {
  max-width: 48ch;
  margin: 0 0 26px;
  font-size: clamp(16.5px, 2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}

.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 620px;
  padding: 6px 6px 6px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--fg) 70%, transparent);
}
.hero-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft),
              0 10px 30px -22px color-mix(in srgb, var(--fg) 70%, transparent);
}
.hero-search > svg { flex: none; width: 20px; height: 20px; color: var(--muted); }

.hero-search input {
  flex: 1;
  min-width: 0;
  height: 50px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 17px;
}
.hero-search input:focus { outline: none; }

.hero-search button {
  flex: none;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 620;
  cursor: pointer;
}
.hero-search button:hover { filter: brightness(1.08); }

.cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 9px;
  margin-top: 18px;
}
.cities a {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 520;
  text-decoration: none;
}
.cities a:hover { border-color: var(--accent); color: var(--accent); }

/* Boligrækken skal ligge tæt på søgningen — den er sidens indhold */
.band--flush { padding-top: clamp(18px, 2.6vw, 30px); }

.row-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 4px;
}
.row-head h2 { margin: 0; font-size: clamp(21px, 3vw, 27px); }
.row-head .ghost { margin-left: auto; white-space: nowrap; }

.empty-note {
  max-width: 54ch;
  margin: 18px 0 0;
  padding: 20px 22px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 16px;
  line-height: 1.6;
  color: var(--fg);
}

/* App-afsnittet nederst: tekst og telefon side om side */
.band--app { border-top: 1px solid var(--line); }

.app-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.app-split .device { margin: 0; width: min(290px, 82%); }

/* Tre enheder i ét billede. Det er bredt, så det får hele sin spalte —
   og på en smal skærm hele bredden, hvor det stadig kan læses. */
.devices { margin: 0; }
.devices img { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  /* Billedet bærer afsnittet, så det må gerne fylde mere end teksten */
  .band--app .app-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.app-split h2 { margin-bottom: 14px; }
.app-note { margin: 18px 0 16px; font-size: 14.5px; color: var(--muted); }
.band--app .badge-soon { margin: 0; }

/* Bunden: selskabet skal stå tydeligt adskilt fra produktet. Kara
   Technologies driver flere tjenester; Mursten er én af dem. */
.site-footer .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.site-footer .legal strong { color: var(--fg); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   KORT
   ═══════════════════════════════════════════════════════════════════════ */

.viewbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.viewbar .search-count { margin: 0; }

.viewtoggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.viewtoggle button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  font-weight: 560;
  cursor: pointer;
}
.viewtoggle button svg { width: 16px; height: 16px; }
.viewtoggle button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.mapview {
  height: clamp(420px, 62vh, 720px);
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
}
.mapview.map-failed {
  display: grid;
  place-items: center;
  padding: 24px;
  height: auto;
  min-height: 180px;
  color: var(--muted);
  text-align: center;
}

/* Prisen som markør. Et tal er mere brugbart end en nål, når man leder
   efter noget man har råd til. */
/* Hvid pille med mørk tekst. En farvet nål forsvinder i kortets grønne og
   blå flader; den hvide løfter sig fra alt, og den fremhævede bliver mørk. */
.pin {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgb(0 0 0 / 0.08);
  background: #fff;
  color: #1c1c1e;
  font-size: 13px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 4px 12px -4px rgb(0 0 0 / 0.3);
  cursor: pointer;
}
.pin:hover { transform: scale(1.06); }
.pin--dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 3px solid #fff;
}

.sheet-map {
  height: 230px;
  margin: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
}

.map-note {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Sprogvælger i topbjælken */
.langtoggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-right: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.langtoggle button {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 660;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.langtoggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ── Genereret boligside ─────────────────────────────────────────────── */

.band--listing { padding-top: clamp(22px, 4vw, 40px); }


/* Tilbage til søgningen fra en bolig */
.back-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: var(--bg);
}
.back-top:hover { border-color: color-mix(in srgb, var(--fg) 28%, transparent); }
.back-top svg { width: 16px; height: 16px; }

.crumbs {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs span { margin: 0 4px; }

.band--listing h1 {
  margin: 0 0 6px;
  font-size: clamp(27px, 4.4vw, 38px);
  font-weight: 660;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}
.band--listing .listing-where {
  margin: 0 0 14px;
  font-size: 16.5px;
  white-space: normal;
}

.detail-price {
  margin: 0 0 26px;
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 680;
  letter-spacing: -0.02em;
  /* Prisen står i tekstens egen farve. Rødt læses som en advarsel — det
     er den forkerte følelse at give en husleje. Mærkefarven bruges til
     det man kan trykke på, ikke til tal. */
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.gallery--page { margin: 0 0 28px; padding: 0; }
.gallery--page img { width: min(360px, 84%); }

.band--listing h2 {
  margin: 30px 0 12px;
  font-size: 20px;
  font-weight: 640;
  letter-spacing: -0.015em;
}

.band--listing .ticks { margin-bottom: 8px; }

.back-link { margin: 30px 0 0; font-size: 15px; }
.back-link a { color: var(--accent); text-decoration: none; font-weight: 550; }
.back-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Kortene er links — fjern standardstilen, behold semantikken */
a.listing { text-decoration: none; color: inherit; }

.sheet-h {
  margin: 26px 0 10px;
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.sheet-body .ticks { margin-bottom: 6px; }
.sheet-body .back-link { margin: 24px 0 20px; }

/* "Ny" på en annonce lagt op inden for tre dage */
.listing-media { position: relative; }
.badge-new {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.22);
}


:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Tilstandsvælger i topbjælken */
.themetoggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  margin-right: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.themetoggle button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.themetoggle button svg { width: 15px; height: 15px; }
.themetoggle button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Et fritstående note-afsnit uden for et kort */
.note--standalone {
  max-width: 60ch;
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
  font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SØGERESULTATER: liste og kort side om side

   På en bred skærm er der plads til begge, og det er langt hurtigere at
   lede efter bolig, når man kan se hvor de ligger mens man scroller.
   På en smal skærm er der ikke — dér skifter man mellem dem.
   ═══════════════════════════════════════════════════════════════════════ */

.results { margin-top: 26px; }

@media (min-width: 1000px) {
  /* Kortet løber ud til skærmens højre kant, mens listen bliver stående i
     indholdets spalte. Det er kortet man læser byen i — det skal have
     pladsen, og en spalte på under 600 px viser kun én bydel ad gangen. */
  .results {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(520px, 1fr);
    gap: 28px;
    align-items: start;
  }
  /* Kortet skal stå stille, mens man ruller i boligerne — som i et rigtigt
     boligkort. Hele resultatfeltet klæber til skærmen i sin fulde højde,
     og det er listen indeni der ruller. Så flytter kortet sig aldrig. */
  .results {
    position: sticky;
    top: 78px;
    height: calc(100svh - 90px);
    margin-top: 26px;
  }
  .results-list {
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    /* Rullningen må ikke smitte af på siden, når listen er i bund */
    overscroll-behavior: contain;
    /* Rullebjælken mellem listen og kortet er en streg midt i designet.
       Den skjules, men rulningen bliver — også med tastatur og hjul. */
    scrollbar-width: none;
    padding-right: 6px;
  }
  .results-list::-webkit-scrollbar { width: 0; height: 0; }
  .results-list .grid { margin-top: 0; }
  .results-map { height: 100%; }
  .results-map .mapview { height: 100%; margin-top: 0; }
  /* Kortet er altid fremme på en bred skærm — skifteren hører til smalle. */
  .viewtoggle { display: none; }
  /* To kolonner i listen, så kortene ikke bliver for brede ved siden af kortet */
  .results-list .grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
}

@media (max-width: 999px) {
  .results-map { display: block; }
  .results-map[hidden] { display: none !important; }
  /* På en smal skærm fylder kortet allerede hele bredden */
  .map-expand, .map-zoom { display: none; }
  .results-map { position: relative; }
}

/* ── Kortet foldet ud ──────────────────────────────────────────────────
   Listen glider væk, og kortet får hele bredden — ud over indholdets
   maksimumbredde, så det er kortet man er i, ikke en spalte ved siden af. */
.map-expand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  box-shadow: 0 2px 10px -4px rgb(0 0 0 / 0.4);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.map-expand:hover { transform: scale(1.06); }

/* Zoom ligger under udfold-knappen og deler dens form: samme bredde,
   samme kant, samme skygge — to knapper i én søjle. */
.map-zoom {
  position: absolute;
  top: 56px;
  right: 12px;
  z-index: 3;
  display: grid;
  width: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 2px 10px -4px rgb(0 0 0 / 0.4);
}
.map-zoom button {
  display: grid;
  place-items: center;
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-zoom button:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.map-zoom svg { width: 16px; height: 16px; }
.map-expand svg { width: 17px; height: 17px; }
.map-expand .i-close { display: none; }
.results.map-full .map-expand .i-open { display: none; }
.results.map-full .map-expand .i-close { display: block; }

@media (min-width: 1000px) {
  .results {
    transition: grid-template-columns 0.42s cubic-bezier(0.32, 0.72, 0, 1),
                gap 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .results-list {
    transition: opacity 0.22s ease;
  }
  .results.map-full {
    grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
    gap: 0;
  }
  .results.map-full .results-list {
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .results.map-full .results-map { height: 100%; }
  .results.map-full .mapview { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .results, .results-list { transition: none; }
}

/* Musen over en annonce → markøren på kortet løfter sig.
   Omvendt: musen over en markør → kortet i listen løfter sig. */
.listing.is-active {
  border-color: var(--accent);
  box-shadow: 0 6px 22px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}

.pin.is-active {
  background: #1c1c1e;
  border-color: #1c1c1e;
  color: #fff;
  transform: scale(1.12);
  z-index: 2;
}
.pin { transition: transform 0.14s ease, background-color 0.14s ease; }



/* ═══════════════════════════════════════════════════════════════════════
   LOGIN
   Samme fire veje ind som i appen: e-mail, telefon, Apple, Google.
   ══════════════════════════════════════════════════════════════════════ */

.login {
  width: min(420px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--fg);
  overflow: visible;
}
.login::backdrop { background: rgb(0 0 0 / 0.5); backdrop-filter: blur(3px); }

.login-body { position: relative; padding: 34px 28px 26px; }

.login .sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
}

.login-back {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.login-back svg { width: 17px; height: 17px; }
.login-back:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }

.login-mark {
  display: grid;
  place-items: center;
  margin: 4px auto 14px;
  width: 46px;
  color: var(--accent);
}
.login-mark svg { width: 100%; height: auto; }

.login-h {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 660;
  letter-spacing: -0.02em;
  text-align: center;
}
.login-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}
.login-h + .login-field { margin-top: 18px; }

.login-field { display: block; margin-bottom: 10px; }
.login-field span {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.login-field input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 16px;   /* under 16px zoomer iOS ind ved fokus */
}
.login-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-cta {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 640;
  cursor: pointer;
}
.login-cta:hover { filter: brightness(1.08); }
.login-cta:disabled { opacity: 0.6; cursor: default; }

.login-error {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #c0392b 14%, transparent);
  color: #c0392b;
  font-size: 13.5px;
}

.login-or {
  position: relative;
  margin: 20px 0 16px;
  text-align: center;
}
.login-or::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--line);
}
.login-or span {
  position: relative;
  padding: 0 12px;
  background: var(--bg);
  font-size: 13px;
  color: var(--muted);
}

.login-providers { display: grid; gap: 10px; }
.login-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  font-weight: 620;
  cursor: pointer;
}
.login-provider:hover { border-color: color-mix(in srgb, var(--fg) 28%, transparent); }
.login-provider:disabled { opacity: 0.6; cursor: default; }
.login-provider svg { width: 18px; height: 18px; }

.login-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.login-row select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
}
.login-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-hide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.login-hide input { margin-top: 2px; accent-color: var(--accent); }
.login-hide-text { font-size: 14.5px; line-height: 1.45; }
.login-hide-text strong { display: block; font-weight: 620; }
.login-hide-preview { color: var(--muted); font-size: 13px; }

.login-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  text-align: center;
}
.login-link {
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.login-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* Glemt adgangskode: et rigtigt trykfelt, ikke en tynd linje. Den skal kunne
   rammes med en tommelfinger — 44 px er den mindste, man kan forvente at
   ramme uden at sigte. */
.login-forgot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  text-decoration: none;
}
.login-forgot span { text-decoration: underline; text-underline-offset: 3px; }
.login-forgot:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 6%, transparent); }

/* Mens mailen sendes: en lille snurrende ring foran teksten */
.login-forgot.is-working::before,
.login-forgot.is-done::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
}
.login-forgot.is-working::before {
  border: 2px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-top-color: var(--fg);
  border-radius: 999px;
  animation: forgot-spin 0.7s linear infinite;
}
@keyframes forgot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .login-forgot.is-working::before { animation-duration: 2.4s; }
}

/* Sendt: et grønt flueben, og teksten holder op med at ligne et link */
.login-forgot.is-done { color: var(--ok, #2e7d52); }
.login-forgot.is-done span { text-decoration: none; }
.login-forgot.is-done::before {
  background: var(--ok, #2e7d52);
  border-radius: 999px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/13px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/13px no-repeat;
}

.login-note {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.login-legal {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.login-legal a { color: var(--muted); }

/* reCAPTCHA-boksen til SMS er usynlig, men skal findes i siden */
#recaptcha-host { position: fixed; bottom: 0; left: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   POP-OP PÅ KORTET
   Et klik på en nål viser boligen uden at forlade kortudsnittet. Først
   når man trykker på selve kortet, åbner hele annoncen.
   ══════════════════════════════════════════════════════════════════════ */

.map-callout {
  position: relative;
  width: 268px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 34px -10px rgb(0 0 0 / 0.45);
  cursor: pointer;
  animation: callout-in 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes callout-in {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .map-callout { animation: none; }
}

.callout-media {
  aspect-ratio: 16 / 10;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.callout-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.callout-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--fg);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.callout-close:hover { background: var(--bg); }

.callout-body { padding: 11px 13px 13px; }
.callout-body .listing-price { font-size: 16.5px; margin-bottom: 3px; }
.callout-title {
  margin: 0 0 3px;
  font-size: 14.5px;
  font-weight: 580;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.callout-body .listing-meta { margin-top: 2px; font-size: 13px; }

/* MapKits egen boble skal ikke tegne en hvid kasse bag vores kort */
.mk-callout, .mk-standard-callout { background: none !important; box-shadow: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   BILLEDMOSAIK PÅ EN BOLIG
   ══════════════════════════════════════════════════════════════════════ */

.detail-h1 {
  margin: 0 0 14px;
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 660;
  letter-spacing: -0.02em;
}

.mosaic {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  /* Faste rækker og et fast forhold: så er mosaikken en blok, ikke en
     trappe der hænger forskelligt alt efter hvor mange billeder der er. */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 2 / 1;
  border-radius: 18px;
  overflow: hidden;
}
.mosaic .shot {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
}
.mosaic .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), filter 0.2s;
}
.mosaic .shot:hover img { transform: scale(1.04); filter: brightness(0.94); }

/* Ét stort billede til venstre, resten fordelt så gitteret går op */
.mosaic--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 9; }
.mosaic--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 7; }
.mosaic--3 { grid-template-columns: repeat(3, 1fr); }
.mosaic--3 .shot:first-child,
.mosaic--4 .shot:first-child,
.mosaic--5 .shot:first-child { grid-column: span 2; grid-row: span 2; }
/* Fire billeder: det sidste lægger sig over begge spalter til højre */
.mosaic--4 .shot:last-child { grid-column: span 2; }

.all-photos {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px -4px rgb(0 0 0 / 0.4);
}
.all-photos:hover { transform: translateY(-1px); }

@media (max-width: 620px) {
  .mosaic {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    aspect-ratio: auto !important;
  }
  .mosaic .shot { aspect-ratio: 4 / 3; }
  .mosaic .shot:first-child { grid-column: span 2 !important; grid-row: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LYSBORD
   ══════════════════════════════════════════════════════════════════════ */

.lightbox {
  width: min(1180px, calc(100% - 32px));
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: #0d0d0f;
  color: #fff;
  overflow: hidden;
}
.lightbox::backdrop { background: rgb(0 0 0 / 0.78); backdrop-filter: blur(4px); }
.lb-img {
  display: block;
  width: 100%;
  max-height: 92vh;
  object-fit: contain;
  background: #0d0d0f;
}
.lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lightbox button:hover { background: rgb(255 255 255 / 0.26); }
.lightbox button svg { width: 19px; height: 19px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { top: 50%; left: 14px; transform: translateY(-50%); }
.lb-next { top: 50%; right: 14px; transform: translateY(-50%); }
.lb-count {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   BY-RÆKKER PÅ FORSIDEN

   En vandret række per by, som man ruller igennem. Boliger hører til et
   sted, og en by er den måde folk faktisk leder på — ikke "alle boliger".
   ═══════════════════════════════════════════════════════════════════════ */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(186px, 1fr);
  gap: 18px;
  margin-top: 18px;
  padding-bottom: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* Kortene må gå ud til kanten når man ruller, men starte i indholdet */
  scroll-padding-inline: 2px;
}
.rail > .listing { scroll-snap-align: start; }

/* Kortene i en byrække er mindre end i søgeresultatet: flere boliger ad
   gangen er vigtigere på forsiden end et stort billede. */
.rail > .listing .listing-body { padding: 11px 13px 14px; }
.rail > .listing .listing-price { font-size: 16px; }
.rail > .listing .listing-price span { font-size: 13px; }
.rail > .listing .listing-title { font-size: 14.5px; }
.rail > .listing .listing-where,
.rail > .listing .listing-meta { font-size: 13px; }

/* Med få boliger skal rækken ikke strække et enkelt kort over hele bredden */
@media (min-width: 700px) {
  /* Fast loft på kortbredden: på en bred skærm skal rækken vise flere
     boliger, ikke gøre de samme fire kort større. */
  .rail { grid-auto-columns: minmax(186px, 264px); }
}

.city-row { padding: clamp(22px, 3vw, 34px) 0 0; }
.city-row:last-child { padding-bottom: clamp(26px, 4vw, 44px); }

.city-row .row-head h2 a {
  color: inherit;
  text-decoration: none;
}
.city-row .row-head h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.city-row .row-head h2 .chev {
  margin-left: 6px;
  font-weight: 500;
  display: inline-block;
  transition: transform 0.15s ease;
}
.city-row .row-head h2 a:hover .chev { transform: translateX(3px); }

.city-row .row-head h2 {
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* ── Anmeld annoncen ─────────────────────────────────────────────────────── */
/* Samme ark som login-dialogen: den er allerede den flade, folk kender til
   "noget vigtigt sker nu". Kun listen af valg er ny. */
.report-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 26px 0 0;
  color: var(--muted);
}
.report-flag svg { width: 15px; height: 15px; display: block; }
.report-line .login-link { font-size: 14px; color: var(--muted); }

.report-body { padding-top: 42px; }
.report-list {
  display: grid;
  gap: 6px;
  margin: 16px 0 4px;
  max-height: min(46vh, 380px);
  overflow-y: auto;
  /* Rullelisten må ikke få en synlig bjælke midt i arket */
  scrollbar-width: none;
}
.report-list::-webkit-scrollbar { display: none; }

.report-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.report-opt:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.report-opt[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.report-opt-text { display: block; flex: 1; }
.report-opt-title { display: block; font-size: 14.5px; font-weight: 560; }
.report-opt-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.report-dot {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border: 1.6px solid var(--line);
  border-radius: 50%;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.report-opt[aria-pressed="true"] .report-dot {
  border-color: var(--accent);
  background: var(--accent);
  /* Ringen indeni er sidens egen farve, så prikken ser udstanset ud —
     samme radioknap som alle andre steder, ikke et nyt symbol. */
  box-shadow: inset 0 0 0 3px var(--bg);
}

.report .login-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  resize: vertical;
}
.report .login-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.report .login-provider { margin-top: 14px; justify-content: center; }

.report-check {
  width: 54px;
  height: 54px;
  margin: 4px auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ok, #2e7d52);
}
.report-check svg { width: 26px; height: 26px; }
.report-body .report-check + .login-h,
.report-body .report-check ~ .login-sub { text-align: center; }

/* ── Kontoindstillinger ──────────────────────────────────────────────────── */
/* Samme kort-i-rækker som appens indstillinger: label til venstre, værdi
   til højre. Felterne ligner tekst indtil man klikker — man skal kunne se
   hvad der står, uden at siden ligner en formular. */
.info-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}
.info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  min-height: 48px;
}
.info-row + .info-row { border-top: 1px solid var(--line); }
.info-label { flex: none; min-width: 104px; font-size: 14.5px; }
.info-read {
  flex: 1;
  text-align: right;
  font-size: 14.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info-link { text-align: left; color: inherit; text-decoration: none; }
.info-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.info-input {
  flex: 1;
  min-width: 0;
  text-align: right;
  border: none;
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--muted);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.info-input:focus {
  outline: none;
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.info-hide { margin-top: 12px; }
.info-note {
  margin: 8px 2px 0;
  font-size: 12.5px;
  color: var(--muted);
}
.profile-section .save-search { margin-top: 14px; }

.profile-danger { margin-top: 44px; }
.danger-btn {
  margin-top: 12px;
  padding: 10px 18px;
  border: 1px solid color-mix(in srgb, #c0392b 45%, transparent);
  border-radius: 999px;
  background: none;
  color: #c0392b;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
  transition: background-color 0.14s ease;
}
.danger-btn:hover { background: color-mix(in srgb, #c0392b 9%, transparent); }
.danger-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Indbakke ────────────────────────────────────────────────────────────── */
/* To spalter på en skærm der har plads: listen står stille, samtalen ruller.
   På en telefon er det én skærm ad gangen, og tilbage-pilen skifter — det er
   den samme rejse som i appen, ikke en anden. */
.inbox {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  height: min(72vh, 720px);
  background: var(--card);
}
.inbox-list {
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: none;
}
.inbox-list::-webkit-scrollbar { display: none; }
.inbox .inbox-h {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 8px 10px 12px;
}

.conv {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.conv:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.conv.is-active { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.conv-mid { flex: 1; min-width: 0; }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-name {
  flex: 1;
  font-size: 14.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-when { flex: none; font-size: 12px; color: var(--muted); }
.conv-listing,
.conv-last {
  margin: 1px 0 0;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-listing { font-size: 12.5px; opacity: 0.85; }
.conv-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.chat-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  font-size: 15px;
  font-weight: 600;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.inbox-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.inbox-thread .empty-note { margin: auto; padding: 0 24px; text-align: center; }

.thread-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.thread-back {
  display: none;
  flex: none;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.thread-back svg { width: 18px; height: 18px; }
.thread-back:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.thread-who { min-width: 0; }
.thread-name { margin: 0; font-size: 15px; font-weight: 620; }
.thread-listing {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: none;
}
.thread-log::-webkit-scrollbar { display: none; }
.thread-day {
  align-self: center;
  margin: 14px 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.bubble-row { display: flex; }
.bubble-row.is-own { justify-content: flex-end; }
.bubble {
  max-width: min(72%, 460px);
  padding: 9px 13px 7px;
  border-radius: 17px;
  background: var(--muted-surface);
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble-row.is-own .bubble { background: var(--accent); color: #fff; }
.bubble.is-deleted { font-style: italic; color: var(--muted); }
.bubble-time {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.65;
  text-align: right;
}
.bubble-img {
  display: block;
  width: 100%;
  border-radius: 11px;
  margin-bottom: 5px;
}

.thread-form {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.thread-form textarea {
  flex: 1;
  resize: none;
  max-height: 150px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
}
.thread-form textarea:focus { outline: none; border-color: var(--accent); }
.thread-send {
  flex: none;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.thread-send svg { width: 18px; height: 18px; }
.thread-send:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 860px) {
  .inbox {
    grid-template-columns: 1fr;
    height: min(78vh, 680px);
  }
  .inbox-thread { display: none; }
  .inbox.show-thread .inbox-list { display: none; }
  .inbox.show-thread .inbox-thread { display: flex; }
  .thread-back { display: grid; }
}

/* ── Fremvisninger ───────────────────────────────────────────────────────── */
.viewings { margin-top: 34px; }
.viewings .profile-h { margin-bottom: 10px; }
.viewings .sheet-desc { margin-bottom: 14px; }
.slot { gap: 12px; }
.slot-when { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.slot-day { font-size: 14.5px; font-weight: 580; }
.slot-time { font-size: 14px; color: var(--muted); }
.slot-left {
  font-size: 12.5px;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.slot .save-search { margin: 0; flex: none; }
.slot-error { margin: 0; font-size: 12.5px; }

/* Fortryd-knappen ved egne bobler. Den ligger uden for boblen, så den ikke
   dækker teksten, og den er usynlig indtil man er ved beskeden. */
.bubble-row { align-items: center; gap: 6px; }
.bubble-del {
  order: -1;
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, background-color 0.14s ease;
}
.bubble-del svg { width: 15px; height: 15px; }
.bubble-row:hover .bubble-del,
.bubble-del:focus-visible { opacity: 1; }
.bubble-del:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.bubble-del:disabled { opacity: 0.4; cursor: default; }
/* På en touchskærm findes hover ikke — dér skal knappen bare stå der */
@media (hover: none) {
  .bubble-del { opacity: 0.55; }
}

/* Vedhæft et billede i chatten */
.thread-attach {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}
.thread-attach:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); }
.thread-attach svg { width: 19px; height: 19px; }
.thread-attach:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.thread-preview {
  position: relative;
  align-self: flex-start;
  margin: 0 16px;
  padding: 8px 0 0;
}
.thread-preview img {
  max-height: 92px;
  border-radius: 10px;
  display: block;
}
.preview-x {
  position: absolute;
  top: 2px;
  right: -9px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.bubble-img { cursor: zoom-in; }

/* ── Flere filtre ────────────────────────────────────────────────────────── */
.more-filters.is-on {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 560;
}

.filters-sheet { max-width: 520px; }
.filters-body { padding: 30px 0 0; display: flex; flex-direction: column; max-height: 86vh; }
.filters-body .login-h { padding: 0 28px; margin-bottom: 4px; }
.filters-body .sheet-close { top: 14px; right: 14px; }
.filters-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 28px 4px;
  scrollbar-width: none;
}
.filters-scroll::-webkit-scrollbar { display: none; }

.fsec { padding: 14px 0; border-top: 1px solid var(--line); }
.fsec:first-child { border-top: none; padding-top: 4px; }
.fsec-h { margin: 0 0 10px; font-size: 14px; font-weight: 620; letter-spacing: -0.01em; }
.fsec-sub { font-size: 14px; color: var(--muted); }

.frange { display: flex; align-items: center; gap: 8px; }
.fdash { color: var(--muted); }
.funit { font-size: 13.5px; color: var(--muted); }
.fnum {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 14.5px;
}
.fnum:focus { outline: none; border-color: var(--accent); }
.fdate { width: auto; }
.fnote { margin: 7px 0 0; font-size: 12px; color: var(--muted); }
.frow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.fcheck { margin: 0; }

.fchips { display: flex; flex-wrap: wrap; gap: 7px; }
.fchip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}
.fchip:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.fchip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 560;
}

.filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 28px 20px;
  border-top: 1px solid var(--line);
}
.filters-foot .login-cta { margin: 0; max-width: 220px; }

/* ── Opret annonce ───────────────────────────────────────────────────────── */
.opret-head { max-width: 620px; margin: 0 auto 26px; }
.opret-head .eyebrow-c { margin-bottom: 6px; }
.opret-bar {
  height: 4px;
  margin-top: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  overflow: hidden;
}
.opret-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.opret-body { max-width: 620px; margin: 0 auto; }
.opret-body .login-field { margin-bottom: 16px; }
.opret-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 15px;
}
.opret-input:focus { outline: none; border-color: var(--accent); }
textarea.opret-input { resize: vertical; line-height: 1.5; }

.opret-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
}
.stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}
.stepper-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.stepper-btn:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.stepper-val { min-width: 52px; text-align: center; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.opret-toggle { margin: 4px 0 10px; }

.dawa-list {
  margin: -10px 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  background: var(--card);
}
.dawa-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.dawa-item + .dawa-item { border-top: 1px solid var(--line); }
.dawa-item:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.opret-chosen {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 14px;
}

.opret-drop {
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 34px 20px;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.opret-drop:hover, .opret-drop.is-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.opret-drop-t { font-size: 15px; font-weight: 600; }
.opret-drop-s { font-size: 13px; color: var(--muted); }

.opret-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.opret-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  overflow: hidden;
  background: var(--muted-surface);
}
.opret-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opret-photo .preview-x { top: 6px; right: 6px; }
.opret-cover {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 600;
}
.opret-move {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--fg);
  color: var(--bg);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.opret-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.opret-foot .login-cta { margin: 0; max-width: 240px; }

.hero-cta-row { margin-top: 22px; }
.hero-cta {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 13px 30px;
  text-decoration: none;
}

/* ── Mine annoncer ───────────────────────────────────────────────────────── */
.mine-item { display: flex; flex-direction: column; }
.mine-item .listing { margin-bottom: 8px; }
.mine-item .listing.is-off img { filter: grayscale(0.85) brightness(0.96); }
.mine-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 0 2px 4px;
}
.mine-bar .login-link { font-size: 13px; color: var(--muted); }
.mine-badge {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.mine-badge.is-active { border-color: var(--accent); color: var(--accent); }
.mine-error { flex-basis: 100%; margin: 0; font-size: 12.5px; }