: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-text: var(--accent); /* tekst i accentfarve; lysere i mørk tilstand for kontrast */
  --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-text: #E8677A;
    --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-text: #E8677A;
  --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-text);
}

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-text); font-weight: 500; text-underline-offset: 2px; }

/* Kun de juridiske dokumenter (main uden .site). Reglen stod før på ALLE
   <section>, så hvert bånd på forsiden, /udlejer og /om blev tegnet som et
   hvidt kort med runde hjørner, der klemte mod skærmkanten på en telefon. */
main:not(.site) 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;
  /* Mærket er et <a> nu, da appen er i App Store. Uden dette får pillen
     en understregning tværs over både ikon og tekst. */
  text-decoration: none;
}
.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-text);
}

/* 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;
  overflow: hidden;   /* ellers strækker et højformat-billede kortet */
  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-text);
  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; }

/* ═══════════════════════════════════════════════════════════════════════
   QA-PASS: tilgængelighed, berøringsflader og mobil
   Samlet ét sted, så det er let at se, hvad der kom til. Reglerne her
   retter fejl, der sad i specificitet og rækkefølge længere oppe.
   ═══════════════════════════════════════════════════════════════════════ */

/* iOS må ikke selv forstørre teksten, når telefonen vendes på tværs */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* "Gå til indholdet" — usynlig, indtil man tabber ind på siden */
.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 620;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s;
}
.skip:focus { transform: none; }
#main:focus { outline: none; }

/* Sidefodens links: den side, man står på, er markeret */
.site-footer .links a[aria-current="page"] { color: var(--accent); }

/* Bybåndenes overskrift. .band > .wrap > .row-head > h2 vandt over den
   tilsigtede størrelse, så hver by stod i 40 px — større end sektionerne. */
.band.city-row > .wrap > .row-head > h2 {
  font-size: clamp(21px, 2.8vw, 27px);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.row-head { gap: 12px; }
.row-head .ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0;
}

/* "Appen"-båndets overskrift ligger i en kolonne, ikke direkte i .wrap, og
   faldt derfor tilbage til 17 px brødtekst. */
.band .app-split 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;
}

/* 404: overskriften er sidens h1, links som tydelige knapper */
.band > .wrap > .nf-h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 660;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.nf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}
.nf-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font-weight: 560;
  text-decoration: none;
}
.nf-links a:first-child { border-color: transparent; background: var(--accent); color: #fff; }
.nf-links a:hover { border-color: var(--accent); }

/* Dialoger må aldrig blive højere end skærmen — på en telefon på tværs
   forsvandt Apple/Google-knapperne under kanten uden mulighed for at rulle.
   dialog.login: skal vinde over .login { overflow: visible } længere nede. */
dialog.login {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet { max-height: min(88dvh, 940px); }

/* Menuen: kan rulle, hvis skærmen er lav (telefon på tværs) */
.menu-panel {
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Tema og sprog som rigtige segmenter i fuld bredde — ikke tre små ikoner
   i venstre side af en lang tom pille. */
.menu-panel .themetoggle,
.menu-panel .langtoggle { padding: 3px; }
.menu-panel .themetoggle button,
.menu-panel .langtoggle button {
  flex: 1;
  width: auto;
  height: 36px;
}
.menu-panel .themetoggle button svg { width: 17px; height: 17px; }
.themetoggle button:hover:not([aria-pressed="true"]),
.langtoggle button:hover:not([aria-pressed="true"]) {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg);
}

/* Luk/tilbage i dialogerne: 40 px er mindstemålet for en knap uden tekst */
.sheet-close, .login .login-back { width: 40px; height: 40px; }
.sheet-close:hover { background: color-mix(in srgb, var(--fg) 9%, var(--bg)); }

/* Mærket i topbjælken er et link — giv det en flade, der kan rammes */
.brand { min-height: 44px; }

/* ── Berøringsskærme: mindst 44 × 44 px (WCAG 2.5.8 / Apples HIG) ───── */
@media (pointer: coarse) {
  .menu-btn { width: 44px; height: 44px; }
  .menu-panel .themetoggle button,
  .menu-panel .langtoggle button { height: 42px; }
  .sheet-close, .login .login-back { width: 44px; height: 44px; }
  .social a { min-height: 44px; }
  .site-footer .links { gap: 0 18px; }
  .site-footer .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .back-top { min-height: 44px; }
  .viewtoggle button { min-height: 40px; }
  .clear { min-height: 44px; }
  main:not(.site) > nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .back { display: inline-flex; align-items: center; min-height: 44px; }
  .heart:not(.heart--big) { top: 8px; right: 8px; width: 40px; height: 40px; }
}

/* ── Søgesidens filtre på en telefon ──────────────────────────────────
   Felterne stod i ujævne rækker med forskellig bredde. To lige brede
   kolonner læses som én formular. 16 px i felterne: under det zoomer iOS
   ind, når man trykker på en vælger. */
@media (max-width: 999px) {
  .field select { font-size: 16px; }
}
@media (max-width: 560px) {
  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  .filters .field select { width: 100%; min-height: 44px; }
  .filters .clear { width: 100%; }
}

/* Mindre bevægelse: ingen glid og fades, når brugeren har bedt om det */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .menu-panel { animation: 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; }

/* Kortet er en <article> med ét link og hjertet ved siden af — ikke inde i
   det. Hjertet placeres over billedet af kortet selv. */
.listing { position: relative; }
.listing-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
}
.listing-link:focus-visible { outline: none; }
.listing:has(.listing-link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.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. Vælgeren skal
     være skarpere end grundreglerne længere nede (display: grid), ellers
     vinder de på rækkefølgen, og knapperne svævede ned over bunden. */
  .results-map .map-expand, .results-map .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; }

/* ── Forsiden: udlejer-båndet ────────────────────────────────────────────
   Kompakt og lige efter boligerne. Det er udlejerne, der fylder siden. */
body[data-page="home"] .invite-band > .wrap {
  width: calc(100% - clamp(32px, 5vw, 96px));
  max-width: 2100px;
}
.invite-band { padding-bottom: clamp(26px, 4vw, 44px); }
.invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 18px 22px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 16px;
}
.invite p {
  flex: 1 1 320px;
  margin: 0;
  line-height: 1.55;
  color: var(--fg);
}
.invite-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 640;
  text-decoration: none;
}
.invite-btn:hover { filter: brightness(1.08); }
.invite-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Søgesiden uden en eneste bolig ──────────────────────────────────────
   Så er kortet en tom, grå kasse ved siden af beskeden — beskeden står alene. */
@media (min-width: 1000px) {
  .results.is-empty {
    display: block;
    position: static;
    height: auto;
  }
  .results.is-empty .results-map { display: none; }
}

/* ── En bolig der ikke længere er ledig ────────────────────────────────── */
.gone-note {
  margin: 0 0 18px;
  padding: 16px 20px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 14px;
  line-height: 1.55;
}
.gone-note p { margin: 0 0 6px; }
.gone-note .gone-h { font-weight: 660; font-size: 17px; }
.gone-note a { color: var(--accent); font-weight: 560; text-decoration: none; }
.gone-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
body.is-gone .mosaic img { filter: grayscale(0.8); }
body.is-gone .detail-price { text-decoration: line-through; color: var(--muted); }

/* ── Login-forsiden: som de store apps — stor overskrift, tekst i feltet,
   og Google/Apple som to kvadratiske ikon-knapper side om side ─────────── */
.login-h { font-size: 26px; font-weight: 700; margin-bottom: 10px; }
.login-field--inline input { height: 56px; padding: 0 16px; }
.login-field--inline + .login-error + .login-cta,
.login-field--inline ~ .login-cta { height: 54px; margin-top: 12px; }
.login-providers--icons { display: flex; justify-content: center; gap: 14px; }
.login-provider--icon {
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 16px;
}
.login-provider--icon svg { width: 26px; height: 26px; }

/* ── Logget ind: konto øverst i menuen + avatar på menuknappen ─────────── */
.menu-account {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.menu-account-text { display: grid; min-width: 0; }
.menu-account-label { font-size: 12px; color: var(--muted); }
.menu-account-name { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-account-mail { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-avatar {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 999px; overflow: hidden;
  background: var(--accent); color: #fff; font-weight: 650; font-size: 16px;
}
.menu-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Menuknappen bliver til en pille med ☰ + avatar, som hos de store apps */
.menu-btn.menu-btn--user { width: auto; gap: 8px; padding: 4px 4px 4px 12px; display: inline-flex; align-items: center; }
.menu-btn--user .menu-avatar { width: 30px; height: 30px; font-size: 13px; }

/* "Udlej din bolig" står kun ét sted: i toppen på bred skærm, i menuen på
   mobil (hvor toplinket er skjult). Før stod det begge steder. */
@media (min-width: 561px) {
  .menu-panel .menu-item--rich[href="/udlejer"] { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   DATOVÆLGER (datepicker.js)
   Som appens grafiske DatePicker: "oktober 2026 ›" til venstre, ‹ › til
   højre, ugedage, et roligt gitter. Valgt dag = fyldt accent-cirkel med hvidt
   tal, i dag = tallet i accent. Ingen tunge kanter. Knapperne som appens ark:
   Annullér · titel · Vælg. Dagene er mindst 44×44 — på en computer 52.
   ══════════════════════════════════════════════════════════════════════ */

.dp {
  width: min(460px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.45), 0 2px 10px rgb(0 0 0 / 0.08);
  overflow: auto;
}
.dp::backdrop, .cf-sheet::backdrop { background: rgb(0 0 0 / 0.42); backdrop-filter: blur(4px); }
.dp[open], .cf-sheet[open] { animation: dp-in 0.2s cubic-bezier(.2,.8,.2,1); }
@keyframes dp-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .dp[open], .cf-sheet[open] { animation: none; } }

/* Arkets topbjælke: Annullér · titel · handling */
.dp-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 4px;
}
.dp-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-align: center;
}
.dp-bar-btn {
  justify-self: start;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.dp-bar-btn--primary { justify-self: end; font-weight: 650; }
.dp-bar-btn:hover:not(:disabled) { background: var(--accent-soft); }
.dp-bar-btn:disabled { color: var(--muted); opacity: 0.5; cursor: default; }

.dp-body { padding: 6px 20px 22px; }

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 8px;
}
.dp-month {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 8px;
  margin-left: -8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dp-month:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.dp-month-chev { display: grid; color: var(--accent-text, var(--accent)); transition: transform 0.2s ease; }
.dp-month-chev svg { width: 15px; height: 15px; }
.dp-month[aria-expanded="true"] .dp-month-chev { transform: rotate(90deg); }
.dp-arrows { display: flex; gap: 2px; }
.dp-nav {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--accent-text, var(--accent));
  cursor: pointer;
}
.dp-nav svg { width: 20px; height: 20px; }
.dp-nav:hover:not(:disabled) { background: var(--accent-soft); }
.dp-nav:disabled { color: var(--muted); opacity: 0.35; cursor: default; }

.dp-grid, .dp-days { display: grid; gap: 2px; }
.dp-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.dp-wdc {
  padding: 2px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
}
.dp-cell { display: grid; place-items: center; min-height: 44px; }
.dp-day {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 52px;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 18px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.dp-day:hover:not(:disabled):not(.is-selected) { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.dp-day.is-today { color: var(--accent-text, var(--accent)); font-weight: 650; }
.dp-day.is-selected { background: var(--accent); color: #fff; font-weight: 650; }
.dp-day:disabled { color: var(--muted); opacity: 0.38; cursor: default; }
.dp-day.is-selected:disabled { opacity: 0.55; color: #fff; }
.dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }

/* Månedsvalget (tryk på "oktober 2026 ›") */
.dp-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 0 4px;
}
.dp-mon {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: 15.5px;
  font-weight: 550;
  text-transform: capitalize;
  cursor: pointer;
}
.dp-mon:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.dp-mon.is-current { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-text, var(--accent)); }
.dp-mon.is-selected { background: var(--accent); color: #fff; box-shadow: none; }
.dp-mon:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 560px) {
  .dp-body { padding: 4px 12px 16px; }
  .dp-day { font-size: 17px; }
}

/* Feltet, der åbner vælgeren — ligner et inputfelt, men er en knap */
.dp-field-wrap { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.frow .dp-field-wrap { flex: none; }
.dp-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-align: left;
  cursor: pointer;
}
.opret-input.dp-field { width: 100%; }
.dp-field:hover { border-color: color-mix(in srgb, var(--fg) 28%, transparent); }
.dp-field:focus-visible { outline: none; border-color: var(--accent-text, var(--accent)); box-shadow: 0 0 0 3px var(--accent-soft); }
.dp-field-icon { display: grid; place-items: center; flex: none; color: var(--accent-text, var(--accent)); }
.dp-field-icon svg { width: 19px; height: 19px; }
.dp-field-text { flex: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-field.is-empty .dp-field-text { color: var(--muted); }
.dp-clear {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.dp-clear svg { width: 15px; height: 15px; }
.dp-clear:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }

/* ═══════════════════════════════════════════════════════════════════════
   OPRET ANNONCE (opret.js + opret/*.js)
   Appens flow og ord — kort med foldbare sektioner, runde −/+, kontakter som
   iOS-switches, piller. På en stor skærm to kolonner: formularen til venstre,
   styrke og forhåndsvisning til højre.
   ══════════════════════════════════════════════════════════════════════ */

.cf { --cf-r: 18px; --cf-field: color-mix(in srgb, var(--fg) 4%, var(--card)); padding-bottom: 12px; }
.cf-ic { display: inline-grid; place-items: center; flex: none; }
.cf-ic svg { width: 20px; height: 20px; }
.cf-ic--sm svg { width: 16px; height: 16px; }
.cf-ic--xs svg { width: 14px; height: 14px; }
.cf-accent { color: var(--accent-text, var(--accent)); }
.cf-muted { color: var(--muted); }
.cf-spacer { flex: 1; }
.cf-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cf-hint .cf-ic { vertical-align: -2px; margin-right: 4px; color: var(--fg); }
.cf-link { font-size: 14px; }
.cf-lead { color: var(--muted); font-size: 16px; margin: 0 0 22px; }
.cf-out { max-width: 520px; padding: 20px 0 40px; }
.cf-out .cf-btn { max-width: 300px; }

/* Toppen: tilbage · trin · luk */
.cf-top {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto 14px;
}
.cf--step2 .cf-top, .cf--step3 .cf-top, .cf--step4 .cf-top, .cf--step5 .cf-top { max-width: 1020px; }
@media (max-width: 999px) { .cf--step3 .cf-top, .cf--step4 .cf-top, .cf--step5 .cf-top { max-width: 640px; } }
.cf-circle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
.cf-circle:hover { background: color-mix(in srgb, var(--fg) 5%, var(--card)); }
.cf-circle[hidden] { display: grid !important; visibility: hidden; }
.cf-top > .cf-circle:last-child { justify-self: end; }
.cf-steps { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cf-steps-dots { display: flex; gap: 5px; }
.cf-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 15%, transparent);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.cf-dot.is-on { background: var(--accent); }
.cf-dot.is-current { width: 22px; }
.cf-steps-label { font-size: 12px; font-weight: 650; color: var(--muted); text-align: center; }

.cf .cf-h1 {
  margin: 4px 0 22px;
  font-size: clamp(28px, 4.6vw, 38px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Layout */
.cf-layout { max-width: 640px; margin: 0 auto; }
.cf-layout--aside { max-width: 640px; }
.cf-main { min-width: 0; }
.cf-aside { display: grid; gap: 14px; align-content: start; margin-top: 18px; }
.cf-aside .cf-strength { display: none; }
@media (min-width: 1000px) {
  .cf-layout--aside {
    display: grid;
    grid-template-columns: minmax(0, 640px) 340px;
    gap: 40px;
    max-width: 1020px;
    align-items: start;
  }
  .cf-aside { position: sticky; top: 84px; margin-top: 74px; }
  .cf-aside .cf-strength { display: flex; }
  .cf-only-narrow { display: none !important; }
  .cf--step5 .cf-layout--aside { grid-template-columns: minmax(0, 1fr) 320px; max-width: 1120px; }
  .cf--step5 .cf-layout--aside .cf-main { max-width: none; }
}
@media (max-width: 999px) { .cf-only-wide { display: none !important; } }

/* Knapper */
.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.cf-btn--big { min-height: 52px; font-size: 16.5px; border-radius: 16px; }
.cf-btn--primary { background: var(--accent); color: #fff; }
.cf-btn--primary:hover { filter: brightness(1.07); }
.cf-btn--ghost { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.cf-btn--ghost:hover { background: color-mix(in srgb, var(--fg) 5%, var(--card)); }
.cf-btn--tonal { background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
.cf-btn--danger { background: #c62f2f; color: #fff; }
/* Grå men trykbar: et tryk forklarer, hvad der mangler */
.cf-btn.is-inactive { background: color-mix(in srgb, var(--fg) 22%, transparent); color: var(--bg); filter: none; }
.cf-btn--tonal.is-inactive { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--muted); }
.cf-btn.is-busy { opacity: 0.75; pointer-events: none; }
.cf-btn.is-busy::before {
  content: "";
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: cf-spin 0.8s linear infinite;
}
@keyframes cf-spin { to { transform: rotate(360deg); } }

.cf-actions {
  display: grid;
  gap: 8px;
  margin-top: 26px;
}
.cf-actions:empty { display: none; }
.cf-bar-row { display: flex; gap: 10px; }
.cf-bar-row > .cf-btn--primary { flex: 1; }
.cf-bar-row > .cf-btn--ghost { flex: none; padding: 0 20px; }
@media (max-width: 999px) {
  /* På en telefon står knapperne fast i bunden, som i appen */
  .cf-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 22px -16px 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
}
.cf-need {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.cf-need .cf-ic { margin-top: 1px; }
.cf-need.is-alert, .cf-need--warn { color: #c62f2f; }
:root[data-theme="dark"] .cf-need.is-alert, :root[data-theme="dark"] .cf-need--warn { color: #ff6b6b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cf-need.is-alert,
  :root:not([data-theme="light"]) .cf-need--warn { color: #ff6b6b; }
}

.cf-chip-btn {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cf-chip-btn:hover { background: color-mix(in srgb, var(--fg) 13%, transparent); }
.cf-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.cf-x:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }
.cf-err {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #c62f2f;
}
.cf-err-ic { margin-top: 1px; }

/* Admin-banneret (kun for admins) */
.cf-admin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1020px;
  margin: 0 auto 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--cf-r);
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.cf-admin.is-quiet { border-color: var(--line); background: var(--card); font-size: 14px; color: var(--muted); }
.cf-admin.is-form { display: grid; gap: 10px; }
.cf-admin-av {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-weight: 700;
  text-transform: uppercase;
}
.cf-admin-av img { width: 100%; height: 100%; object-fit: cover; }
.cf-admin-text { display: grid; gap: 1px; flex: 1; min-width: 200px; }
.cf-admin-k { font-size: 12px; font-weight: 650; color: var(--accent-text, var(--accent)); text-transform: uppercase; letter-spacing: 0.04em; }
.cf-admin-meta { font-size: 13px; color: var(--muted); }
.cf-admin-form { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-admin-form .cf-plain { flex: 1; min-width: 220px; }
.cf-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-size: 11.5px;
  font-weight: 650;
  vertical-align: 2px;
}

/* ── Trin 1: udlejertype ─────────────────────────────────────────────── */
.cf-choices { display: grid; gap: 14px; }
.cf-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: var(--cf-r);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cf-choice:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.cf-choice[aria-checked="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.cf-choice-text { display: grid; gap: 6px; flex: 1; }
.cf-choice-text strong { font-size: 17px; }
.cf-choice-text span { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.cf-choice-ic svg { width: 34px; height: 34px; stroke-width: 1.3; }
.cf-choice-check {
  position: absolute;
  top: 10px; right: 10px;
  display: none;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
}
.cf-choice-check svg { width: 22px; height: 22px; stroke-width: 2; }
.cf-choice[aria-checked="true"] .cf-choice-check, .cf-type[aria-checked="true"] .cf-choice-check { display: grid; }
.cf-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 6px;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.cf-meta span + .cf-ic { margin-left: 12px; }
.cf-company { display: grid; gap: 12px; margin-top: 22px; }
.cf-sub-h { margin: 0; font-size: 15px; font-weight: 650; }
.cf-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: 14px;
  background: var(--card);
  cursor: pointer;
}
.cf-logo-row:focus-within { border-color: var(--accent-text, var(--accent)); }
.cf-logo {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 15%, transparent);
}
.cf-logo img { width: 100%; height: 100%; object-fit: cover; }
.cf-logo-text { display: grid; gap: 2px; flex: 1; }
.cf-logo-text strong { font-size: 15px; }
.cf-logo-text span { font-size: 13px; color: var(--muted); }
.cf-plain, .cf-search {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: 14px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
}
.cf-plain:focus { outline: none; border-color: var(--accent-text, var(--accent)); box-shadow: 0 0 0 3px var(--accent-soft); }
.cf-plain-wrap { position: relative; display: flex; align-items: center; }
.cf-plain-wrap .cf-plain { padding-right: 44px; }
.cf-plain-wrap.is-bad .cf-plain { border-color: color-mix(in srgb, #c62f2f 60%, transparent); }
.cf-cvr-ok { position: absolute; right: 14px; color: var(--muted); }

/* ── Trin 2: boligtype ───────────────────────────────────────────────── */
.cf-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .cf-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cf-type {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 116px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: var(--cf-r);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cf-type:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); transform: translateY(-1px); }
.cf-type[aria-checked="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.cf-type-ic svg { width: 28px; height: 28px; stroke-width: 1.5; }
.cf-type-name { font-size: 15px; font-weight: 620; line-height: 1.25; }
.cf-type .cf-choice-check { top: 8px; right: 8px; width: 20px; height: 20px; }
.cf-type .cf-choice-check svg { width: 20px; height: 20px; }

/* ── Trin 3: adresse ─────────────────────────────────────────────────── */
.cf--step2 .cf-layout { max-width: 1020px; }
.cf-loc { display: grid; gap: 16px; }
@media (min-width: 1000px) {
  /* Kortet fylder hele venstre kolonnes højde: fra søgefeltets top til
     knappernes bund — og følger med, når adresse-kortet kommer og går */
  .cf-loc { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: stretch; }
  .cf-loc-panel { order: -1; }
  .cf-loc-map { height: auto; min-height: 460px; }
  .cf--step2 .cf-loc-panel .cf-actions { margin-top: 6px; }
}
.cf-loc-map {
  position: relative;
  height: 260px;
  border-radius: var(--cf-r);
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 6%, var(--card));
  border: 1px solid var(--line);
}
.cf-loc-map.is-off { display: none; }
.cf-loc:has(.cf-loc-map.is-off) { grid-template-columns: minmax(0, 640px); }
@media (min-width: 1000px) { .cf--step2 .cf-actions { max-width: 420px; } }
.cf-map { position: absolute; inset: 0; }
.cf-pin {
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translate(-50%, -19px);
  pointer-events: none;
}
.cf-pin-dot {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.15), 0 4px 12px rgb(0 0 0 / 0.25);
}
.cf-pin-dot::after {
  content: "";
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: inset 0 0 0 7.5px var(--accent), inset 0 0 0 12px #fff;
}
.cf-pin-hint {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.58);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cf-pin-hint.is-on { opacity: 1; }
.cf-zoom {
  position: absolute;
  right: 12px; bottom: 12px;
  display: grid;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.15);
}
.cf-zoom button {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.cf-zoom button + button { border-top: 1px solid var(--line); }
.cf-loc-panel { display: grid; gap: 10px; align-content: start; }
.cf-search { display: flex; align-items: center; gap: 8px; }
.cf-search:focus-within { border-color: var(--accent-text, var(--accent)); box-shadow: 0 0 0 3px var(--accent-soft); }
.cf-search input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
}
.cf-search input:focus { outline: none; }
.cf-search input::-webkit-search-cancel-button { display: none; }
.cf-gps {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 14px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.cf-gps > span:not(.cf-ic) { flex: 1; }
.cf-gps.is-busy { opacity: 0.6; pointer-events: none; }
.cf-addr-list { display: grid; }
.cf-addr {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.cf-addr > span:not(.cf-ic) { flex: 1; }
.cf-addr:hover, .cf-addr.is-active { background: color-mix(in srgb, var(--fg) 5%, transparent); border-radius: 10px; }
.cf-empty { display: flex; align-items: center; gap: 8px; margin: 8px 4px; color: var(--muted); font-size: 14.5px; }
.cf-chosen-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--cf-r);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 6px 24px -12px rgb(0 0 0 / 0.25);
}
.cf-chosen-ic svg { width: 28px; height: 28px; color: var(--accent-text, var(--accent)); }
.cf-chosen-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.cf-chosen-k { font-size: 12px; color: var(--muted); }
.cf-chosen-text strong { font-size: 15.5px; }
.cf-chosen-sub { font-size: 13px; color: var(--muted); }
.cf-apts { display: grid; }
.cf-apt {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 10px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cf-apt:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.cf-apt-text { display: grid; flex: 1; }
.cf-apt-text strong { font-size: 15px; }
.cf-apt-text span { font-size: 13px; color: var(--muted); }

/* ── Trin 4: detaljer ────────────────────────────────────────────────── */
.cf-editing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -8px 0 16px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
}
.cf-strength {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.cf-aside .cf-strength { margin: 0; }
.cf-ring {
  --p: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background:
    radial-gradient(closest-side, var(--card) 79%, transparent 80%),
    conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--fg) 12%, transparent) 0);
  transition: --p 0.5s ease;
}
.cf-ring-n { font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cf-ring-n small { font-size: 8px; font-weight: 750; }
.cf-strength-text { display: grid; gap: 2px; min-width: 0; }
.cf-strength-text strong { font-size: 15px; }
.cf-strength-next { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.cf-aside-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--cf-r); background: var(--card); }
.cf-aside-h { margin: 0 0 10px; font-size: 12.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cf-card-preview .listing { margin: 0; }
.cf-card-preview .listing-link { pointer-events: none; }
@media (max-width: 999px) {
  .cf-aside .cf-aside-card { display: none; }
  .cf--step5 .cf-aside .cf-aside-card { display: block; }
}

.cf-card {
  margin-bottom: 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 11%, transparent);
  border-radius: var(--cf-r);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.cf-card.is-invalid { border-color: color-mix(in srgb, #c62f2f 55%, transparent); box-shadow: 0 0 0 0.5px color-mix(in srgb, #c62f2f 55%, transparent); }
.cf-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cf-card.is-complete .cf-card-head { background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.cf-card-ic { color: var(--accent-text, var(--accent)); }
.cf-card-ic svg { width: 19px; height: 19px; }
.cf-card.is-invalid .cf-card-ic, .cf-card.is-invalid .cf-card-title { color: #c62f2f; }
.cf-card-title { font-size: 15.5px; font-weight: 700; }
.cf-pill {
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}
.cf-card-extra { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-card-done { color: color-mix(in srgb, var(--accent) 70%, transparent); }
.cf-card-done svg { width: 17px; height: 17px; }
.cf-card-chev { color: color-mix(in srgb, var(--fg) 35%, transparent); transition: transform 0.2s ease; }
.cf-card-chev svg { width: 16px; height: 16px; stroke-width: 2.2; }
.cf-card.is-open .cf-card-chev { transform: rotate(180deg); }
.cf-card-body { border-top: 0.5px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.cf-div { height: 0.5px; margin: 0 16px; background: color-mix(in srgb, var(--fg) 8%, transparent); }

.cf-row {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 52px;
  padding: 8px 16px;
}
.cf-row > .cf-label { flex: 1; min-width: 120px; }
.cf-label { font-size: 15px; color: var(--muted); cursor: default; }
.cf-row label.cf-label { cursor: pointer; }
.cf-req { margin-left: 3px; color: var(--accent-text, var(--accent)); font-weight: 750; }
.cf-row--stack { display: grid; gap: 4px; padding-top: 12px; padding-bottom: 12px; }
.cf-row--stack .cf-label { font-size: 13px; }
.cf-row--stack .cf-field { width: 100%; }
.cf-row--stack .cf-input { text-align: left; font-size: 17px; }
.cf-row--addr { font-size: 14.5px; gap: 10px; flex-wrap: nowrap; }
.cf-row--addr span:last-child { flex: 1; }
.cf-field { display: flex; align-items: center; gap: 6px; }
.cf-input {
  width: 100%;
  max-width: 220px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--cf-field);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cf-row--stack .cf-input { max-width: none; }
.cf-input:focus { outline: none; border-color: var(--accent-text, var(--accent)); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--card); }
.cf-input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); font-weight: 500; }
.cf-input--money { max-width: 150px; }
.cf-unit { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--fg) 40%, transparent); }
.cf-row .cf-hint, .cf-row .cf-err { flex-basis: 100%; margin-top: 0; }
.cf-row .cf-err + .cf-hint { display: none; }

.cf-stepper { display: flex; align-items: center; gap: 10px; border-radius: 999px; }
.cf-stepper:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cf-round {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.cf-round svg { width: 17px; height: 17px; stroke-width: 2.6; }
.cf-round:active { transform: scale(0.92); }
.cf-round:disabled { background: color-mix(in srgb, var(--fg) 14%, transparent); color: var(--card); cursor: default; }
.cf-stepper-val { min-width: 64px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* iOS-switch */
.cf-row--switch { cursor: pointer; flex-wrap: nowrap; }
.cf-switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 51px; height: 31px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.16);
  transition: transform 0.22s cubic-bezier(.3,.7,.3,1);
}
.cf-switch:checked { background: var(--accent); }
.cf-switch:checked::after { transform: translateX(20px); }
.cf-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Menu-valg */
.cf-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 0 32px 0 12px;
  min-height: 40px;
  border-radius: 10px;
  background: var(--cf-field);
}
.cf-select:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.cf-select select {
  appearance: none;
  min-width: 0;
  max-width: 240px;
  border: 0;
  background: none;
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  text-overflow: ellipsis;
}
.cf-select select:focus { outline: none; }
.cf-select-chev { position: absolute; right: 10px; color: var(--accent-text, var(--accent)); pointer-events: none; }
.cf-select-chev svg { width: 15px; height: 15px; stroke-width: 2.2; }
.cf-energy-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.cf-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--cf-field); }
.cf-seg-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  cursor: pointer;
}
.cf-seg-btn[aria-checked="true"] { background: var(--card); color: var(--accent-text, var(--accent)); font-weight: 700; box-shadow: 0 1px 4px rgb(0 0 0 / 0.12); }
.cf-datefield {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--cf-field);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
}
.cf-datefield:focus-visible { box-shadow: 0 0 0 2px var(--accent); }

.cf-warnline {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -6px 4px 14px;
  font-size: 12.5px;
  color: #c2410c;
}
.cf-sees {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.cf-sees-h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.cf-sees-row { display: flex; justify-content: space-between; margin: 0; font-size: 14.5px; color: var(--muted); }
.cf-sees-row strong { color: var(--fg); font-variant-numeric: tabular-nums; }
.cf-optional-h { margin: 22px 0 10px 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.cf-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.cf-slot { flex-wrap: nowrap; }
.cf-slot-text { display: grid; gap: 1px; flex: 1; }
.cf-slot-text strong { font-size: 14.5px; }
.cf-slot-text span { font-size: 13px; color: var(--muted); }
.cf-ta-wrap { padding: 12px; }
.cf-textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--cf-field);
  color: var(--fg);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.55;
  resize: vertical;
}
.cf-textarea:focus { outline: none; border-color: var(--accent-text, var(--accent)); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); }
.cf-count.is-short { color: #c2410c; }
.cf-tips { padding: 0 16px 14px; font-size: 13.5px; }
.cf-tips summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-text, var(--accent));
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.cf-tips summary::-webkit-details-marker { display: none; }
.cf-tips ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.6; }
.cf-tips li::marker { color: var(--accent-text, var(--accent)); }

/* ── Ark (fremvisning, rum, billede) og bekræftelser ─────────────────── */
.cf-sheet {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.45);
  overflow: auto;
}
.cf-sheet--wide { width: min(760px, calc(100% - 32px)); }
.cf-sheet-body { padding: 8px 20px 22px; }
@media (max-width: 560px) {
  /* Telefon: et ark fra bunden, som i appen */
  .cf-sheet:not(.cf-confirm) {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
    max-height: 92dvh;
  }
  .cf-sheet:not(.cf-confirm) .cf-sheet-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}
.cf-tiles-sec { margin-top: 18px; }
.cf-tiles-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.cf-tiles { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.cf-tile {
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  width: 58px; height: 64px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.cf-tile.is-on { background: var(--accent); color: #fff; }
.cf-tile-top { font-size: 11px; font-weight: 650; text-transform: capitalize; }
.cf-tile-big { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf-tile--cal { width: 76px; color: var(--accent-text, var(--accent)); }
.cf-tile--cal .cf-tile-top { text-transform: none; }
.cf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-pill-btn {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cf-pill-btn.is-on { background: var(--accent); color: #fff; }
.cf-tiles .cf-pill-btn { min-width: 64px; }
.cf-ends { margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.cf-ends strong { color: var(--fg); }
.cf-tiles-sec .cf-row { padding: 0; }

.cf-confirm { width: min(420px, calc(100% - 32px)); }
.cf-confirm-body { padding: 24px 22px 20px; text-align: center; }
.cf-confirm-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.cf-confirm-msg { margin: 0 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.cf-confirm-acts { display: grid; gap: 8px; }
.cf-confirm-acts .cf-btn { width: 100%; min-height: 50px; }

.cf-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--fg);
  color: var(--bg);
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  transform: translateX(-50%);
  animation: dp-in 0.2s ease;
  transition: opacity 0.4s ease;
}
.cf-toast.is-out { opacity: 0; }

/* ── Trin 5: billeder ────────────────────────────────────────────────── */
.cf-hero {
  position: relative;
  height: 230px;
  margin-bottom: 16px;
  border-radius: 22px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.cf-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-hero-scrim { position: absolute; inset: auto 0 0; height: 96px; background: linear-gradient(transparent, rgb(0 0 0 / 0.62)); }
.cf-hero-text { position: absolute; left: 14px; bottom: 12px; display: grid; gap: 2px; color: #fff; }
.cf-hero-text strong { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; }
.cf-hero-text span { font-size: 12px; opacity: 0.8; }
.cf-hero-btn {
  position: absolute;
  right: 12px; bottom: 12px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.15);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.cf-progress { display: grid; gap: 8px; margin-bottom: 18px; }
.cf-progress-h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 700; }
.cf-progress-h.is-pro { color: var(--accent-text, var(--accent)); }
.cf-progress-h.is-low { color: #c2410c; }
.cf-bar { position: relative; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.cf-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 40%, transparent); transition: width 0.45s ease; }
.cf-bar-fill.is-ok { background: var(--fg); }
.cf-tick { position: absolute; top: -2px; width: 1.5px; height: 10px; border-radius: 1px; background: color-mix(in srgb, var(--fg) 25%, transparent); }
.cf-bar-legend { display: flex; justify-content: space-between; margin: 0; font-size: 11.5px; color: var(--muted); }
.cf-bar-legend span:last-child { margin-right: 22%; }
.cf-bar-legend .is-ok { color: var(--accent-text, var(--accent)); font-weight: 650; }
.cf-tip {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.cf-tip div { display: grid; gap: 2px; }
.cf-tip strong { font-size: 13.5px; }
.cf-tip span { font-size: 13px; color: var(--muted); }
.cf-rooms { display: grid; gap: 18px; }
.cf-room { padding: 4px; margin: -4px; border-radius: 18px; transition: background-color 0.15s ease; }
.cf-room.is-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cf-room-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cf-room-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.cf-count-badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 750;
}
.cf-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .cf-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--fg) 12%, transparent);
  cursor: grab;
}
.cf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf-photo.is-dragging { opacity: 0.4; }
.cf-photo.is-drop { box-shadow: inset 0 0 0 2px var(--accent); }
.cf-photo.is-drop::before {
  content: "";
  position: absolute;
  left: 0; top: 8%; bottom: 8%;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.cf-cover-badge {
  position: absolute;
  top: 6px; left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11px;
  font-weight: 750;
}
.cf-spin {
  position: absolute;
  left: 8px; bottom: 8px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.4);
}
.cf-spin::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 999px;
  animation: cf-spin 0.8s linear infinite;
}
.cf-retry {
  position: absolute;
  left: 6px; bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: rgb(198 47 47 / 0.94);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
}
.cf-photo-x, .cf-photo-menu {
  position: absolute;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.cf-photo-x { top: 6px; right: 6px; }
.cf-photo-menu { right: 6px; bottom: 6px; }
@media (hover: hover) {
  .cf-photo-x, .cf-photo-menu { opacity: 0; transition: opacity 0.15s ease; }
  .cf-photo:hover .cf-photo-x, .cf-photo:hover .cf-photo-menu,
  .cf-photo:focus-within .cf-photo-x, .cf-photo:focus-within .cf-photo-menu { opacity: 1; }
}
.cf-add-tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  aspect-ratio: 1;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.cf-add-tile:hover { background: var(--accent-soft); border-color: var(--accent-text, var(--accent)); }
.cf-add-tile svg { width: 24px; height: 24px; stroke-width: 2.2; }
.cf-more { margin-top: 22px; }
.cf-more-h { margin: 0 0 8px 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.cf-room-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .cf-room-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-room-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 14px 6px;
  border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 14px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  text-align: center;
  cursor: pointer;
}
.cf-room-card:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.cf-room-card.is-drop { background: var(--accent-soft); color: var(--accent-text, var(--accent)); border: 2px dashed var(--accent); }
.cf-room-card span { line-height: 1.2; }
.cf-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.cf-menu-img { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 16px; margin: 6px 0 12px; }
.cf-menu { display: grid; }
.cf-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
}
.cf-menu-item:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.cf-menu-item > span:not(.cf-ic) { flex: 1; }
.cf-menu-item.is-danger { color: #c62f2f; border-bottom: 0; }
.cf-menu-room select {
  max-width: 55%;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: var(--cf-field);
  color: var(--accent-text, var(--accent));
  font: inherit;
  font-weight: 650;
}
.cf-cover-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 10px; font-size: 16px; }
.cf-cover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .cf-cover-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-cover-pick {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.cf-cover-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-cover-check { position: absolute; inset: 0; display: none; place-items: center; color: #fff; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.cf-cover-check svg { width: 30px; height: 30px; stroke-width: 2.2; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.4)); }
.cf-cover-pick.is-on { box-shadow: inset 0 0 0 2.5px var(--accent); }
.cf-cover-pick.is-on .cf-cover-check { display: grid; }

/* ── Forhåndsvisning ─────────────────────────────────────────────────── */
.cf-preview { min-width: 0; }
.cf-preview .detail-h1 { margin-top: 0; }
/* Kontakt og booking giver ingen mening på en annonce, der ikke findes endnu */
.cf-preview .viewings, .cf-preview .contact { pointer-events: none; opacity: 0.6; }
.cf-publish {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--cf-r);
  background: var(--card);
}
.cf-perks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cf-perks li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.cf-perks .cf-ic { color: var(--fg); }
.cf-status { margin: 0; font-size: 14px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════
   RUM PÅ BILLEDERNE (galleri.js) — "3 af 10 · Køkken" som i appen
   ══════════════════════════════════════════════════════════════════════ */
.mosaic .shot { position: relative; }
.shot-cap {
  position: absolute;
  left: 10px; bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.room-chips {
  display: flex;
  gap: 8px;
  margin: 12px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.room-chips::-webkit-scrollbar { display: none; }
.room-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.room-chip:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.room-chip span {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.mosaic .shot:nth-of-type(5) .shot-cap { top: 10px; bottom: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   MINE ANNONCER + ADMIN (mineannoncer.js, admin.js) — appens "Mine annoncer"
   ══════════════════════════════════════════════════════════════════════ */
.mine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mine-head .profile-h { margin: 0; }
.mine-pills { display: flex; gap: 8px; margin: 14px 0 12px; overflow-x: auto; scrollbar-width: none; }
.mine-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  cursor: pointer;
}
.mine-pill span { font-size: 12px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.mine-pill[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: transparent; font-weight: 650; }
.mine-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .mine-list { grid-template-columns: 1fr 1fr; } }
.mine-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 18px;
  background: var(--card);
}
.mine-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: var(--fg); text-decoration: none; }
.mine-main:hover .mine-title { text-decoration: underline; text-underline-offset: 2px; }
.mine-thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.mine-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mine-text { display: grid; gap: 3px; min-width: 0; }
.mine-title, .mine-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-title { font-size: 15px; font-weight: 650; }
.mine-addr { font-size: 13px; color: var(--muted); }
.mine-price { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mine-meta { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.mine-status { display: inline-flex; align-items: center; gap: 5px; }
.mine-status::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--muted); }
.mine-status.is-active::before { background: #2e9d5b; }
.mine-views { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.mine-ring { width: 14px; height: 14px; background:
  radial-gradient(closest-side, var(--card) 62%, transparent 64%),
  conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--fg) 12%, transparent) 0); }
.mine-more { width: 44px; height: 44px; color: var(--fg); }
.mine-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 30px 20px;
  border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 22px;
  background: var(--card);
  text-align: center;
}
.mine-empty-ic svg { width: 40px; height: 40px; stroke-width: 1.1; color: var(--muted); }
.mine .cf-menu-item { text-decoration: none; }

.adm .adm-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 18px 0; }
.adm-field { display: grid; gap: 5px; flex: 1; min-width: 240px; }
.adm-field span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.adm-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 26px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 22px;
  background: var(--card);
}
.adm-logo { width: 64px; height: 64px; font-size: 22px; font-weight: 700; color: var(--fg); }
.adm-text { display: grid; gap: 3px; flex: 1; min-width: 200px; }
.adm-name { font-size: 18px; }
.adm-sub { font-size: 13.5px; color: var(--muted); }
.mine-more svg, .cf-photo-menu svg { stroke-width: 3.2; }
/* Adresse-trinnet: kort ↔ søgning skifter blødt */
.cf-swap-in { animation: cf-swap 0.22s cubic-bezier(.2,.8,.2,1); }
@keyframes cf-swap { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cf-swap-in { animation: none; } }
@media (min-width: 1000px) {
  /* Knapperne står i bunden af venstre kolonne — på linje med kortets bund */
  .cf--step2 .cf-loc-panel { display: flex; flex-direction: column; }
  .cf--step2 .cf-loc-panel .cf-actions { margin-top: auto; padding-top: 6px; }
  .cf--step2 .cf-loc-map { min-height: 420px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PARITET (søgning, kort, boligside, gemte) — appens UdforskView og
   PropertyDetailView på nettet. Samlet her, så det er tydeligt, hvad der
   hører til; reglerne ovenfor er ikke ændret.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kort: klynger, gemt/ny og valgt nål (UdforskView ClusterPin/MapPricePin) */
.pin { position: relative; }
.pin-cluster {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  border: 0.5px solid rgb(0 0 0 / 0.12);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  font-weight: 720;
}
.pin-cluster:hover, .pin-cluster.is-active { transform: scale(1.1); }
.pin-heart {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
}
.pin-heart svg { width: 8px; height: 8px; fill: #d0243a; }
.pin-new {
  position: absolute;
  top: -3px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #c0392b;
  border: 1.5px solid #fff;
}
.pin.is-selected {
  background: #1c1c1e;
  border-color: #1c1c1e;
  color: #fff;
  transform: scale(1.2);
  transform-origin: 50% 100%;
  box-shadow: 0 4px 14px -2px rgb(0 0 0 / 0.45);
  z-index: 3;
}
.pin.is-selected .pin-heart, .pin.is-selected .pin-new { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pin.is-selected { background: #fff; color: #1c1c1e; border-color: #fff; }
}
:root[data-theme="dark"] .pin.is-selected { background: #fff; color: #1c1c1e; border-color: #fff; }
.pin--home {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  background: var(--fg);
  border: 0;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.3);
  cursor: default;
}
.pin--home svg { width: 17px; height: 17px; fill: var(--bg); }
.pin--home:hover { transform: none; }

.cluster-callout { width: min(320px, 86vw); cursor: default; }
.cluster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px 14px;
  border-bottom: 1px solid var(--line);
}
.cluster-head .callout-close { position: static; }
.cluster-title { margin: 0; font-size: 14.5px; font-weight: 680; }
.cluster-list { list-style: none; margin: 0; padding: 4px 0; max-height: 280px; overflow-y: auto; }
.cluster-row {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
}
.cluster-row:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.cluster-thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.cluster-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cluster-text { display: grid; gap: 1px; min-width: 0; }
.cluster-row-title, .cluster-row-where, .cluster-row-meta {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cluster-row-title { font-size: 14px; font-weight: 650; }
.cluster-row-where, .cluster-row-meta { font-size: 12.5px; color: var(--muted); }

/* Opret: fuldskærmsvisning, offline, CVR-opslag, rettelse (tilføjelser) */
.cf-offline {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, #c2410c 12%, var(--card));
  color: #c2410c; font-size: 14px; font-weight: 600;
}
.cf-live { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 18px; }
.cf-bar-row--two > .cf-btn { flex: 1; }
.cf-plain-wrap.is-busy::after {
  content: ""; position: absolute; right: 16px;
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid var(--muted); border-right-color: transparent;
  animation: cf-spin 0.8s linear infinite;
}
.cf-cvr-ok.is-sealed { color: var(--fg); }
.cf-chip-btn.is-danger { color: #c62f2f; }
.cf-chip-btn { display: inline-flex; align-items: center; gap: 6px; }
.cf-chip-btn:disabled { opacity: 0.7; cursor: default; }
.cf-viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: #000; color: #fff;
}
.cf-viewer::backdrop { background: #000; }
.cf-viewer-img { position: absolute; inset: 56px 0 110px; width: 100%; height: calc(100% - 166px); object-fit: contain; touch-action: pan-y; user-select: none; }
.cf-viewer button.cf-viewer-close, .cf-viewer-prev, .cf-viewer-next {
  position: absolute; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / 0.14); color: #fff; cursor: pointer;
}
.cf-viewer-close { top: 12px; right: 12px; }
.cf-viewer-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.cf-viewer-next { right: 12px; top: 50%; transform: translateY(-50%); }
.cf-viewer-count { position: absolute; top: 20px; left: 0; right: 0; margin: 0; text-align: center; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cf-viewer-acts { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.cf-viewer .cf-chip-btn { background: rgb(255 255 255 / 0.14); color: #fff; min-height: 44px; }
.cf-viewer .cf-chip-btn.is-danger { color: #ff8a80; }

/* ═══════════════════════════════════════════════════════════════════════
   UDLEJER-OVERBLIK · MINE ANNONCER-TABEL · FREMVISNINGER
   (udlejer-oversigt.js, mineannoncer.js, udlejer-fremvisning.js — /mine-annoncer)
   Telefon først: appens kort. Stor flade: tabel + dagsorden i højre spalte.
   ══════════════════════════════════════════════════════════════════════ */
.ll-wrap { width: min(1320px, calc(100% - 32px)); }
.ll { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ll-out { max-width: 560px; }
.ll-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ll-greet { margin: 0; font-size: 14.5px; color: var(--muted); }
.ll-h1 { margin: 2px 0 0; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.ll-create-btn { flex: none; }
@media (max-width: 559px) {
  .ll-create-btn { width: 44px; padding: 0; border-radius: 999px; }
  .ll-create-btn span:not(.cf-ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.ll-muted { margin: 0; font-size: 14px; color: var(--muted); }
.ll-chev { color: var(--muted); opacity: 0.7; }

.ll-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .ll-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ll-stat {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 16px;
  border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 22px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ll-stat:hover { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
.ll-stat:active { transform: scale(0.98); }
.ll-stat-ic svg { width: 18px; height: 18px; color: var(--muted); }
.ll-stat-n { font-size: 34px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.ll-stat-l { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ll-nudges { display: grid; gap: 8px; align-content: start; }
.ll-nudges[hidden] { display: none; }
.ll-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px 12px 16px;
  border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 18px;
  background: var(--card);
}
.ll-nudge-ic svg { width: 20px; height: 20px; color: var(--accent-text, var(--accent)); }
.ll-nudge-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ll-nudge-t strong { font-size: 14.5px; }
.ll-nudge-t > span:not(.ll-cap) { font-size: 13px; color: var(--muted); }
.ll-nudge-bar { margin-top: 6px; max-width: 220px; }
.ll-nudge-cta { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; }
.ll-nudge-x { flex: none; width: 36px; height: 36px; }
@media (max-width: 480px) {
  .ll-nudge { flex-wrap: wrap; padding-right: 10px; }
  .ll-nudge-t { flex-basis: calc(100% - 80px); }
  .ll-nudge-cta { margin-left: 32px; }
}
.ll-cap { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
.ll-cap > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

.ll-quick {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 22px;
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
}
.ll-quick-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--accent); color: #fff; }
.ll-quick-t { flex: 1; display: grid; gap: 2px; }
.ll-quick-t strong { font-size: 15px; }
.ll-quick-t span { font-size: 13px; color: var(--muted); }

.ll-side { display: grid; gap: 8px; align-content: start; }
.ll .ll-sec-h { margin: 0 0 0 4px; font-size: 13px; font-weight: 650; letter-spacing: 0; color: var(--muted); }
.ll-rows {
  display: grid;
  border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 22px;
  background: var(--card);
  overflow: hidden;
}
.ll-rowlink {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ll-rows > .ll-rowlink:first-child, .ll-agenda-day + .ll-rowlink { border-top: 0; }
.ll-rowlink:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.ll-rowlink-ic svg { width: 19px; height: 19px; color: var(--muted); }
.ll-rowlink-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ll-rowlink-t strong { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ll-rowlink-t span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-agenda-day { padding: 12px 16px 4px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; }
.ll-agenda > .ll-agenda-day:first-child { border-top: 0; }
.ll-agenda-empty { justify-items: center; gap: 6px; padding: 22px 16px; text-align: center; }
.ll-agenda-empty .mine-empty-ic svg { width: 32px; height: 32px; }
.ll-pill {
  flex: none;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ll-pill.is-zero { color: var(--muted); border-color: color-mix(in srgb, var(--fg) 12%, transparent); }
.ll-more { justify-self: start; }

.ll-tip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 22px;
  background: var(--card);
}
.ll-tip strong { font-size: 14.5px; }
.ll-tip p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.ll-tip-ic svg { width: 22px; height: 22px; }

/* På siden bor "Opret annonce" i sidehovedet — ikke to gange */
.ll .ll-mine .mine-head .cf-btn--primary { display: none; }
.ll .ll-mine { margin-bottom: 0; }
.ll-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ll-ov-link { min-height: 38px; padding: 0 14px; font-size: 14px; }

@media (min-width: 1024px) {
  .ll {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "head   head"
      "stats  side"
      "nudges side"
      "mine   mine"
      "tip    tip";
    column-gap: 24px;
  }
  .ll-headrow { grid-area: head; }
  .ll-stats { grid-area: stats; }
  .ll-nudges { grid-area: nudges; }
  .ll-quick { display: none; }
  .ll-side { grid-area: side; }
  .ll-mine { grid-area: mine; margin-top: 12px; }
  .ll-tip { grid-area: tip; }
}

/* ── Mine annoncer: kort (telefon) → tabel (stor flade) ─────────────── */
.ll-mine { container-type: inline-size; }
.ll-list { display: block; }
.ll-table { display: grid; gap: 12px; }
.ll-thead { display: none; }
.ll-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-areas: "main more" "bk bk";
  align-items: center;
  gap: 0 6px;
}
.ll-row .mine-main { grid-area: main; }
.ll-row .mine-more { grid-area: more; }
.ll-row .ll-sel, .ll-row .ll-td { display: none; }
.mine-bk {
  grid-area: bk;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 4px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}
.mine-bk-t { flex: 1; }
.ll-sel { display: grid; place-items: center; cursor: pointer; }
.ll-sel input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.ll-bulk {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 0 0 1.5px var(--accent), 0 12px 30px -16px rgb(0 0 0 / 0.35);
}
.ll-bulk[hidden] { display: none; }
.ll-bulk strong { margin-right: auto; font-size: 14.5px; }
.ll-bulk .cf-btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.ll-link-btn {
  padding: 4px 8px;
  margin-left: -8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted color-mix(in srgb, var(--fg) 40%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.ll-link-btn:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.ll-str { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
@container (min-width: 620px) and (max-width: 899px) {
  .ll-table { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 900px) {
  .ll-table {
    display: block;
    border: 0.5px solid color-mix(in srgb, var(--fg) 12%, transparent);
    border-radius: 22px;
    background: var(--card);
    overflow: hidden;
  }
  .ll-thead, .ll-row {
    display: grid;
    grid-template-columns: 30px minmax(200px, 2.6fr) 92px 112px 84px 0 88px 84px 0 minmax(120px, 1fr) 44px;
    grid-template-areas: none;
    align-items: center;
    gap: 0 10px;
  }
  .ll-thead { padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
  .ll-row {
    padding: 10px 8px 10px 14px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: none;
  }
  .ll-thead + .ll-row { border-top: 0; }
  .ll-row:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
  .ll-row.is-selected { background: var(--accent-soft); }
  .ll-row .mine-main, .ll-row .mine-more { grid-area: auto; }
  .ll-row .ll-sel, .ll-row .ll-td { display: block; }
  .ll-row .ll-sel { display: grid; }
  .ll-row .ll-narrow { display: none; }
  .ll-row .mine-thumb { width: 56px; height: 56px; border-radius: 12px; }
  .ll-row .mine-main { gap: 12px; }
  .ll-td { min-width: 0; font-size: 14px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ll-c-saves, .ll-c-inquiries { visibility: hidden; overflow: hidden; }
  .ll-th {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 12px 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }
  .ll-th span { overflow: hidden; text-overflow: ellipsis; }
  .ll-th:hover, .ll-th[aria-sort] { color: var(--fg); }
  .ll-th.ll-c-more { cursor: default; }
}
@container (min-width: 1140px) {
  .ll-thead, .ll-row {
    grid-template-columns: 30px minmax(220px, 2.6fr) 92px 112px 84px 66px 88px 84px 104px minmax(130px, 1fr) 44px;
  }
  .ll-c-saves, .ll-c-inquiries { visibility: visible; }
}
.ll-draft .ll-draft-thumb { border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); background: var(--bg); }
.ll-draft-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 13px; font-weight: 650; }
.ll-mine .mine-empty p { max-width: 260px; }

/* Skeletter i kortenes form — føles hurtigere end en spinner */
.ll-skel {
  border-radius: 18px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fg) 5%, transparent) 0%,
    color-mix(in srgb, var(--fg) 9%, transparent) 50%,
    color-mix(in srgb, var(--fg) 5%, transparent) 100%);
  background-size: 200% 100%;
  animation: ll-shimmer 1.3s linear infinite;
}
.ll-skel--row { height: 110px; margin-bottom: 12px; }
.ll-skel--stat { height: 118px; border-radius: 22px; }
.ll-skel--card { height: 96px; }
@keyframes ll-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ll-skel { animation: none; } }

/* ── Fremvisninger og bookinger (arket) ─────────────────────────────── */
.ll-bk-add { display: inline-flex; align-items: center; gap: 4px; }
.ll-bk-sub { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.ll-bk-list { display: grid; gap: 14px; }
@media (min-width: 720px) {
  .cf-sheet.ll-bk { width: min(920px, calc(100% - 32px)); }
  .ll-bk-list { grid-template-columns: 1fr 1fr; align-items: start; }
  .ll-bk-list > .ll-bk-pasth, .ll-bk-list > .ll-bk-empty, .ll-bk-list > .empty-note { grid-column: 1 / -1; }
}
.ll-bk-card { border: 0.5px solid color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 16px; background: var(--card); overflow: hidden; }
.ll-bk-head { display: flex; align-items: center; gap: 8px; padding: 12px; }
.ll-bk-when { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ll-bk-when strong { font-size: 14.5px; }
.ll-bk-when span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ll-bk-card.is-past .ll-bk-when strong { color: var(--muted); }
.ll-bk-count { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ll-bk-count.is-full { color: #c62f2f; }
:root[data-theme="dark"] .ll-bk-count.is-full { color: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ll-bk-count.is-full { color: #ff6b6b; } }
.ll-bk-tag { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.ll-bk-cal { flex: none; width: 36px; height: 36px; }
.ll-bk-card .ll-cap { margin: 0 12px 12px; }
.ll-bk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
button.ll-bk-row:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.ll-bk-row.is-cancelled { color: var(--muted); cursor: default; }
.ll-bk-row.is-cancelled .ll-bk-name { text-decoration: line-through; }
.ll-bk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ll-bk-none { margin: 0; padding: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ll-bk-pasth { margin: 8px 0 0 4px; font-size: 13px; font-weight: 650; color: var(--muted); }
.ll-att { display: grid; justify-items: center; gap: 10px; padding: 8px 4px 4px; text-align: center; }
.ll-att-av { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; background: var(--muted-surface); font-size: 20px; font-weight: 700; }
.ll-att-name { font-size: 20px; }
.ll-att-when { margin: 0 0 6px; font-size: 14.5px; color: var(--muted); }
.ll-att-btn { width: 100%; min-height: 50px; border-radius: 999px; }
.ll-att-cancel { color: #c62f2f; }
:root[data-theme="dark"] .ll-att-cancel { color: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ll-att-cancel { color: #ff6b6b; } }
/* ═══ slut: udlejer-overblik ═══ */
.cf-viewer-count { pointer-events: none; }

/* ═══ Profil, konto, login-opsætning og skal (profil.js, konto.js,
   auth.js, nav.js, toast.js, avatar.js, menubadge.js) ═══ */

/* Toast (toast.js) — appens korte besked nederst */
.m-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 60; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 14px;
  background: var(--fg); color: var(--bg);
  font-size: 14.5px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  transform: translateX(-50%); cursor: pointer;
  animation: m-toast-in 0.2s ease; transition: opacity 0.3s ease;
}
.m-toast--error { background: #b3261e; color: #fff; }
.m-toast.is-out { opacity: 0; }
@keyframes m-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .m-toast { animation: none; } }

/* Bekræftelses-ark (toast.js ask) og "Din konto er slettet" (nav.js) */
.m-ask { width: min(400px, calc(100% - 32px)); }
.m-ask-body { padding: 24px 22px 20px; text-align: center; }
.m-ask-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.m-ask-msg { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.m-ask-acts { display: grid; gap: 8px; margin-top: 18px; }
.m-ask-btn {
  min-height: 48px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.m-ask-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.m-ask-btn--danger { background: #c0392b; border-color: #c0392b; color: #fff; }
.m-ask-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Login: sidst brugte metode, udbyder-skift, trin-mærke, fødselsdag */
.login-last { margin: -2px 0 12px; font-size: 13px; color: var(--muted); text-align: center; }
.login-last::before { content: "✓ "; color: var(--accent-text); font-weight: 700; }
.login-switch {
  margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); text-align: center;
}
.login-switch-q { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; }
.login-switch .login-link { margin-top: 8px; }
.login-eyebrow {
  margin: 0 0 6px; text-align: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text);
}
.login-row--birth { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; }
.login-row--birth .login-field { margin: 0; }
.login-row--birth select { width: 100%; }
.setup-age {
  width: fit-content; margin: 14px auto 0; padding: 6px 14px; border-radius: 999px;
  background: var(--muted-surface); font-size: 14.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.setup-minor { margin-top: 10px; }
.login-links--setup { justify-content: center; margin-top: 14px; }

/* Menu: ulæst-mærke på "Beskeder" og på menuknappen */
.menu-item[data-inbox] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.menu-item[data-inbox][hidden] { display: none; }
.menu-badge, .menu-btn-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.menu-btn { position: relative; }
.menu-btn-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
  font-size: 11px; box-shadow: 0 0 0 2px var(--bg);
}

/* Skal: ingen forbindelse og vedligeholdelse (nav.js) */
.shell-banner {
  position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 10px; padding: 9px 16px; font-size: 13.5px; line-height: 1.4; text-align: center;
  background: var(--fg); color: var(--bg);
}
.shell-banner span { opacity: 0.8; }
.shell-banner--maint { background: var(--accent); color: #fff; }
.shell-wall {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: var(--bg);
}
.shell-wall-box { max-width: 420px; text-align: center; }
.shell-wall-box h1 { margin: 0 0 10px; font-size: 26px; letter-spacing: -0.02em; }
.shell-wall-box p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.shell-locked, .shell-locked body { overflow: hidden; }

/* Profilkortet: billedet er en knap */
.profile-avatar-wrap { position: relative; flex: none; }
.profile-avatar--btn { position: relative; padding: 0; border: 0; cursor: pointer; font: inherit; overflow: visible; }
.profile-avatar--btn img { border-radius: 999px; }
.profile-avatar--btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.profile-avatar--btn.is-busy { opacity: 0.55; cursor: progress; }
.profile-avatar-cam {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 999px; background: var(--fg); color: var(--bg);
  box-shadow: 0 0 0 2px var(--bg);
}
.profile-avatar-cam svg { width: 14px; height: 14px; }
.avatar-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 25; width: 210px; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  box-shadow: 0 18px 44px -18px rgb(0 0 0 / 0.45);
}
.avatar-menu-h { margin: 6px 10px 4px; font-size: 12px; font-weight: 650; color: var(--muted); }
.avatar-menu-item {
  display: block; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: none;
  color: var(--fg); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.avatar-menu-item:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.avatar-menu-item--danger { color: #c0392b; }
.profile-since { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.profile-verified { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ok, #2e7d52); }
.profile-verified::before { content: "✓ "; }

/* "Gør din profil færdig" */
.profile-nudge {
  display: flex; align-items: center; gap: 14px; margin: -14px 0 32px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.profile-nudge-ring {
  flex: none; width: 34px; height: 34px; border-radius: 999px;
  background: conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--muted-surface) 0);
  -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px);
  mask: radial-gradient(circle, transparent 11px, #000 12px);
}
.profile-nudge-text { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; }
.profile-nudge-text span { color: var(--muted); font-size: 13px; }
.profile-nudge-x {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 999px; background: none;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.profile-nudge-x:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
@media (max-width: 520px) {
  .profile-nudge { flex-wrap: wrap; }
  .profile-nudge-text { flex-basis: calc(100% - 100px); }
}

/* Små runde knapper og links i indstillingerne */
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
  padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--fg) 25%, transparent);
  border-radius: 999px; background: none; color: var(--fg); font: inherit; font-size: 13.5px;
  font-weight: 650; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pill-btn:hover { border-color: var(--fg); }
.pill-btn:disabled { opacity: 0.6; cursor: default; }
.profile-section > .pill-btn { margin-top: 12px; }
.profile-group-h {
  margin: 8px 0 18px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.info-seal { flex: none; font-size: 12.5px; font-weight: 650; color: var(--ok, #2e7d52); }
.info-seal::before { content: "✓ "; }
.info-link-row { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.info-link-row::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 18px; }
.info-link-row:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.info-link-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.empty-card {
  display: grid; gap: 4px; padding: 22px 18px; border: 1px solid var(--line); border-radius: 14px;
  text-align: center; font-size: 14px;
}
.empty-card span { color: var(--muted); }
.profile-logout { margin-bottom: 10px; }
.logout-link {
  padding: 8px 6px; border: 0; background: none; color: #c0392b; font: inherit; font-size: 15px; cursor: pointer;
}
.logout-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Blokerede brugere */
.blocked-av {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: var(--muted-surface); font-size: 13px; font-weight: 650;
}
.blocked-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 550; }

/* Notifikationer: kontakter */
.notif-row { cursor: pointer; }
.notif-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.notif-title { font-size: 14.5px; font-weight: 550; }
.notif-sub { font-size: 12.5px; color: var(--muted); }
.switch {
  flex: none; appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px;
  margin: 0; border-radius: 999px; background: var(--muted-surface); cursor: pointer;
  transition: background-color 0.15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.15s ease;
}
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:disabled { opacity: 0.5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* Virksomhed */
.company { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.company-sum {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none;
}
.company-sum::-webkit-details-marker { display: none; }
.company-sum::after { content: "⌄"; margin-left: auto; color: var(--muted); font-size: 18px; transition: transform 0.15s; }
.company[open] .company-sum::after { transform: rotate(180deg); }
.company-sum-text { display: grid; gap: 1px; min-width: 0; }
.company-sum-text strong { font-size: 14.5px; font-weight: 600; }
.company-sum-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-body { display: grid; gap: 12px; padding: 4px 16px 16px; }
.company-top { display: flex; align-items: flex-start; gap: 14px; }
.company-logo {
  position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0;
  border: 0; border-radius: 14px; background: var(--muted-surface); color: var(--muted); cursor: pointer;
}
.company-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.company-logo svg { width: 24px; height: 24px; }
.company-logo-cam {
  position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 15px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg);
}
.company-field { flex: 1; min-width: 0; display: grid; gap: 5px; }
.company-field input {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 11px;
  background: var(--muted-surface); color: var(--fg); font: inherit; font-size: 16px;
}
.company-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.company-hint { font-size: 12px; color: var(--muted); }
.company-cvr { grid-template-columns: 1fr auto; align-items: center; }
.company-seal { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.company-seal.is-verified { color: var(--ok, #2e7d52); }
.company-seal.is-verified::before { content: "✓ "; }
.company-remove { justify-self: start; color: #c0392b; }
.company-status { min-height: 1em; margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
.company-status.is-bad { color: #c0392b; }

/* Beskæreren (avatar.js) */
.crop { width: min(400px, calc(100% - 24px)); }
.crop-body { display: grid; gap: 12px; padding: 22px 20px 18px; text-align: center; }
.crop-h { margin: 0; font-size: 19px; font-weight: 700; }
.crop-sub { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.crop-stage {
  position: relative; justify-self: center; width: min(320px, 100%); aspect-ratio: 1;
  overflow: hidden; border-radius: 14px; background: #000; touch-action: none;
}
.crop-canvas { display: block; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
.crop-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.crop-stage--circle::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 999px rgb(0 0 0 / 0.5); outline: 2px solid rgb(255 255 255 / 0.85); outline-offset: -2px;
}
.crop-zoom { display: flex; align-items: center; gap: 10px; }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
.crop-zoom-icon { width: 16px; font-size: 18px; color: var(--muted); }
.crop-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crop-btn {
  min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--fg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.crop-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Genlogin før sletning */
.reauth .login-provider { margin-top: 10px; width: 100%; justify-content: center; }
/* ═══ slut: profil, konto, login-opsætning og skal ═══ */

/* "Erhverv" ved titlen — appens ErhvervTag: lille, diskret pille */
.tag-erhverv {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--muted-surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 2px;
  white-space: nowrap;
}

/* "Gem bolig" ligger oven på billederne, øverst til højre (appens hjerte) */
.mosaic > .detail-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  z-index: 2;
}
.mosaic > .detail-actions .heart--big {
  background: rgba(255, 255, 255, 0.94);
  border-color: transparent;
  color: #1c1c1e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.mosaic > .detail-actions .heart--big:hover { border-color: transparent; background: #fff; }
@media (max-width: 560px) {
  .mosaic > .detail-actions { top: 10px; right: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FORSIDENS UDFORSK
   Under heltebilledet: søg og hurtig-filtre øverst, derunder boligerne som
   liste ELLER på kortet (i fuld bredde og højde). ÉN Liste/Kort-skifter:
   ved antallet på en bred skærm, svævende nederst på en telefon. Bruges
   også af /boliger (chip-rækken, "Søg i dette område").
   ═══════════════════════════════════════════════════════════════════════ */

.explore {
  --gutter: calc(clamp(32px, 5vw, 96px) / 2);
  --topbar-h: 63px;
  padding: clamp(18px, 3vw, 34px) 0 clamp(28px, 4vw, 48px);
  scroll-margin-top: var(--topbar-h);
}
body[data-page="home"] .explore > .wrap {
  width: calc(100% - clamp(32px, 5vw, 96px));
  max-width: 2100px;
}
.explore-search { display: flex; align-items: center; gap: 10px; }
.explore-search .searchbar { flex: 1; min-width: 0; }

/* "Filtre" ved søgefeltet — appens knap med tallet på */
.explore-more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
}
.explore-more::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.explore-more:focus-visible,
.more-filters:focus-visible,
.clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tallet på "Filtre" */
.fbadge {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Chip-rækkerne: hurtig-filtre og byer ───────────────────────────── */
.quick {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.quick::-webkit-scrollbar { display: none; }
.quick[hidden] { display: none; }

.qchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.qchip:hover { border-color: color-mix(in srgb, var(--fg) 40%, var(--line)); }
.qchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qchip[hidden] { display: none; }
/* Valgt: fyldt kapsel — appens quickChip (primær flade, baggrundens tekst) */
.qchip[aria-pressed="true"],
.qchip--select.is-on {
  background-color: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.qchip-ic { flex: none; width: 15px; height: 15px; }

.qchip--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  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: 10px;
  field-sizing: content;     /* så bred som det valgte — ikke den længste mulighed */
}
/* Kortudsnittet er et valg, man har gjort på kortet — det skal kunne fjernes */
.qchip--area[aria-pressed="true"] {
  background-color: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ── Antal, sortering og skifteren ──────────────────────────────────── */
.explore .viewbar {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  scroll-margin-top: calc(var(--topbar-h) + 8px);
}
.explore .viewbar .search-count { margin: 0 auto 0 0; }
.explore .viewtoggle { margin-left: 0; }
.viewtoggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sortpick { display: inline-flex; }

/* ── Resultaterne ───────────────────────────────────────────────────── */
.explore .results { margin-top: 16px; scroll-margin-top: calc(var(--topbar-h) + 14px); }
.explore .results[data-mode="list"] .grid { margin-top: 0; }
.explore .mapview { margin-top: 0; }

/* Kortet alene, i fuld bredde og højde. På en bred skærm står antal,
   sortering og skifteren lige over det; på en telefon går det fra kant til
   kant under topbjælken, og skifteren svæver over det. */
.explore .results[data-mode="map"] .mapview {
  height: calc(100svh - var(--topbar-h) - 72px);
  min-height: 420px;
}
.explore .results[data-mode="map"] .mapview.map-failed { height: auto; min-height: 180px; }

/* En bred skærm: skifteren står fremme (søgesiden skjuler sin, fordi den
   altid viser begge). Listen eller kortet får hele bredden. */
@media (min-width: 1000px) {
  .explore .viewtoggle { display: flex; }
  .explore .results[data-mode="map"],
  .explore .results[data-mode="list"] {
    display: block;
    position: static;
    height: auto;
  }
  /* Plads nok: chippene brydes over flere linjer frem for at gemme sig */
  .explore .quick { flex-wrap: wrap; overflow: visible; }
  .explore .results[data-mode="list"] .results-list {
    height: auto;
    overflow: visible;
    padding-right: 0;
  }
  .explore .results[data-mode="list"] .results-list .grid {
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  }
}

/* "Søg i dette område" — øverst midt på kortet, når man har flyttet det */
.results-map { position: relative; }
.map-area {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 16px -6px rgb(0 0 0 / 0.45);
}
.map-area:hover { border-color: var(--accent); color: var(--accent-text); }
.map-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.map-area[hidden] { display: none; }

/* ── Telefon og tablet ──────────────────────────────────────────────── */
@media (max-width: 999px) {
  /* Chip-rækkerne ruller ud til skærmens kant — ikke siden */
  .explore .quick {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .qchip--select { font-size: 16px; }
  .explore { padding-bottom: 96px; }

  /* Skifteren svæver nederst på midten (appens glas-kapsel), men kun
     mens man er i boligerne. */
  .explore .viewtoggle {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9;
    transform: translateX(-50%);
    padding: 4px;
    border-color: color-mix(in srgb, var(--fg) 10%, transparent);
    background: color-mix(in srgb, var(--card) 90%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.12);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .explore .viewtoggle button { min-height: 44px; padding: 0 20px; font-size: 15px; }
  .explore:not(.in-view) .viewtoggle {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 14px);
  }

  /* Kortet fylder skærmen under topbjælken, fra kant til kant */
  .explore .results[data-mode="map"] {
    margin-inline: calc(-1 * var(--gutter));
    scroll-margin-top: var(--topbar-h);
  }
  .explore .results[data-mode="map"] .mapview {
    height: calc(100svh - var(--topbar-h));
    min-height: 0;
    border-width: 1px 0;
    border-radius: 0;
  }
  .explore .results-map .map-area { top: 14px; }
}

/* ── Kortrækken (appens PropertyMapCard) ─────────────────────────────── */
.mapcards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  gap: 10px;
  padding: 6px 20px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.mapcards::-webkit-scrollbar { display: none; }
.mapcards[hidden] { display: none; }

.mapcard {
  position: relative;
  flex: 0 0 min(calc(100% - 32px), 420px);
  min-width: 0;            /* ellers skubber den lange adresse kortet bredere */
  scroll-snap-align: center;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.55);
  transition: border-color 0.15s;
}
.mapcard.is-active { border-color: var(--accent); }
.mapcard-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: 12px 56px 12px 12px;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.mapcard-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mapcard-media {
  position: relative;
  flex: none;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.mapcard-media img,
.mapcard-media .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.mapcard-body { min-width: 0; overflow: hidden; }
.mapcard-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mapcard .listing-price { margin: 0; font-size: 17px; white-space: nowrap; }
.mapcard .tag-erhverv { margin-left: 0; }
.mapcard-new {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.mapcard-where,
.mapcard-meta {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mapcard .heart {
  top: 50%;
  right: 6px;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: none;
  backdrop-filter: none;
}
.mapcard .heart:hover { transform: translateY(-50%) scale(1.08); background: none; }
.mapcard .heart svg { stroke: var(--fg); }
.mapcard .heart.is-on svg { stroke: var(--accent); }

/* ── Det, søgningen tegner: pladsholder, skelet, tom tilstand ───────── */
.ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgb(255 255 255 / 0.75);
  background: linear-gradient(135deg, #3a3833, #24231f);
}
.ph--1 { background: linear-gradient(135deg, #4a2c31, #2a1a1d); }
.ph--2 { background: linear-gradient(135deg, #2f3a3f, #1c2427); }
.ph--3 { background: linear-gradient(135deg, #3d3a2c, #24221a); }
.ph--4 { background: linear-gradient(135deg, #33304a, #1e1c2c); }
.ph--5 { background: linear-gradient(135deg, #2f3f33, #1b261e); }
.ph-ic { width: 34%; max-width: 44px; height: auto; }

.avail.is-now::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #2f9e5b;
  vertical-align: 2px;
}

.listing--skeleton { cursor: default; pointer-events: none; }
.listing--skeleton:hover { transform: none; border-color: var(--line); }
.listing--skeleton .sk {
  display: block;
  height: 12px;
  margin-top: 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}
.listing--skeleton .sk--price { width: 46%; height: 18px; margin-top: 0; }
.listing--skeleton .sk--short { width: 58%; }
/* Shimmer: en lys bølge, der glider hen over pladsholderen, mens noget
   henter — skeleton-kort, billeder der ikke er kommet endnu, mosaikken. */
.listing--skeleton .listing-media,
.listing--skeleton .sk,
.is-loading,
.shot.is-loading {
  background-color: color-mix(in srgb, var(--fg) 7%, transparent);
  background-image: linear-gradient(100deg,
    transparent 20%,
    color-mix(in srgb, var(--card) 70%, transparent) 50%,
    transparent 80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
}
.is-loading img { opacity: 0; }
.listing-media img, .shot img { transition: opacity .35s ease; }
@media (prefers-reduced-motion: no-preference) {
  .listing--skeleton .listing-media,
  .listing--skeleton .sk,
  .is-loading { animation: shimmer 1.4s ease-in-out infinite; }
}
@keyframes shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

.search-empty {
  margin: 26px 0 0;
  padding: 30px 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  text-align: center;
}
.search-empty-h { margin: 0 0 6px; font-size: 18px; font-weight: 650; }
.search-empty-p { margin: 0 0 14px; color: var(--muted); }
.show-more { grid-column: 1 / -1; justify-self: center; min-width: 200px; }

@media (pointer: coarse) {
  .qchip, .map-area { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .explore .viewtoggle, .qchip, .mapcard { transition: none; }
  .mapcards { scroll-behavior: auto; }
}
/* ═══ slut: forsidens Udforsk ═══ */

/* Antallet ("23 af 50 boliger") vises ikke — som ny platform virker små tal
   mindre, end vi er. Det står stadig for skærmlæsere (role="status"). */
.search-count {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sortering og Liste | Kort står ude til højre over resultaterne */
.viewbar { justify-content: flex-end; }

/* Cookiesamtykke (consent.js): lille bjælke nederst — Accepter og Afvis er
   lige store, og intet af sidens indhold bliver blokeret. */
.consent {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 60;
  max-width: 640px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
}
.consent-text { flex: 1 1 260px; margin: 0; font-size: 14.5px; line-height: 1.45; }
.consent-text a { color: var(--accent-text); }
.consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.consent-btn {
  min-width: 104px; min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.consent-btn:hover { border-color: var(--accent); }
.consent-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .consent { bottom: 12px; left: 12px; right: 12px; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; }
}
.consent-link {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── "Få besked, når nye boliger matcher" (soegning.js savePrompt) ────────
   Står over resultaterne, når man har søgt eller filtreret, i tomme
   tilstande og under boligerne på bysiderne. Samme bløde accentflade som
   udlejer-invitationen (.invite), så det læses som et tilbud, ikke en fejl. */
.save-prompt {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 16px;
  text-align: left;
}
.save-prompt-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--card);
  color: var(--accent-text);
}
.save-prompt-ic svg { width: 20px; height: 20px; }
.save-prompt-text { flex: 1 1 260px; min-width: 0; }
.save-prompt-h { margin: 0 0 2px; font-weight: 650; font-size: 16.5px; line-height: 1.35; color: var(--fg); }
.save-prompt-p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.save-prompt-btn {
  flex: none;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 640;
  cursor: pointer;
}
.save-prompt-btn:hover:not(:disabled) { filter: brightness(1.08); }
.save-prompt-btn:disabled { cursor: default; opacity: 0.75; }
.save-prompt.is-done .save-prompt-btn { background: var(--card); color: var(--accent-text); opacity: 1; }
.save-prompt-x {
  position: absolute;
  top: 4px; right: 4px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.save-prompt-x:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.save-prompt:has(.save-prompt-x) .save-prompt-text { padding-right: 24px; }
/* Inde i "Ingen boliger matcher": lidt luft over, og knappen fylder ikke */
.search-empty .save-prompt { margin-top: 20px; }
@media (max-width: 560px) {
  .save-prompt { padding: 14px; }
  .save-prompt-btn { width: 100%; }
}

/* ── Bysider: /lejebolig og /lejebolig/<by> (tools/build-cities.mjs) ──── */
.band--city { padding-top: clamp(22px, 4vw, 40px); }
.city-h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.city-intro { max-width: 68ch; }
.city-intro p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; color: var(--fg); }
.city-intro p:last-child { color: var(--muted); }
.city-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 18px 0 0;
}
.city-app {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: none;
}
.city-app:hover { text-decoration: underline; text-underline-offset: 3px; }
.city-grid .search-empty { grid-column: 1 / -1; margin-top: 0; }
.city-more { margin: 22px 0 0; }
.city-more a { color: var(--accent-text); font-weight: 600; }
.city-save:empty { display: none; }
.city-save .save-prompt { margin-top: 28px; }

.band.city-near > .wrap > h2 { margin: 0 0 14px; font-size: clamp(21px, 2.8vw, 26px); font-weight: 650; letter-spacing: -0.02em; }
.city-links, .city-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-links a, .city-index a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
}
.band--tint .city-links a { background: var(--bg); }
.city-links a:hover, .city-index a:hover { border-color: var(--accent); color: var(--accent-text); }
.city-index { margin-top: 22px; }
.ci-from { font-size: 14px; font-weight: 500; color: var(--muted); }

/* Sidefodens "Populære byer" */
.site-footer .foot-cities { align-items: baseline; }
.foot-cities-h { color: var(--muted); font-weight: 600; }

/* "Professionel udlejer" som mærke nederst til venstre på kortets billede */
.tag-erhverv--media {
  position: absolute;
  left: 10px; bottom: 10px;
  margin: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #1c1c1e;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  vertical-align: baseline;
}