/* ==========================================================================
   Vakano — stilarket (2026-10-23)
   ==========================================================================
   Én fil, ét design. Den gamle komponentblok er fjernet: målingen viste 0
   klasser, der kun havde regler der. Udskriftsreglerne og de variabler, det
   nye design bruger, er reddet ind herunder, så intet gik tabt.
   ========================================================================== */

/* Reddet fra den gamle blok: variabler som de nye regler henviser til. */
:root {
  --deep: #0f4c5c;
  --deep-2: #14657a;
  --brand: #c9552f;
  --ink: #17251f;
}

/* Reddet fra den gamle blok: papirformat og udskriftsrammer. */
@page { size: A4 }
@page { size: A4; margin: 12mm; }

@media print {
  /* ⚠ LEJEKONTRAKTEN HAVDE INGEN RAMME — DEN KOM TOM UD AF PRINTEREN (F30).
     Målt med Chrome i print-tilstand: /kontrakt/<nøgle> gav en PDF på to sider
     med NUL tegn i (1.496 bytes). Grunden var den GLOBALE regel
     `body * { visibility: hidden; }`, som stod i to andre @media print-blokke
     (regnskabsrapporten og årsoversigten). Den skjulte hvert element på
     ENHVER side, og kun de rammer, den selv nævnte, blev gjort synlige igen —
     kontrakten var ikke én af dem. Det er præcis den fejlklasse, F29/F30
     handler om: en regel, der gælder alle, men kun er tænkt til én.

     Reglen her er derfor BUNDET til sin egen side: `body:has(.kontrakt)`
     spørger, om siden FAKTISK er en kontrakt, før noget skjules. På alle
     andre sider gør den ingenting. Det er samme greb som de tre andre
     udskriftsrammer, og scripts/test-css.js afsnit 4d holder alle fire fast.

     `body:has(.kontrakt) *` og `body:has(.kontrakt) .kontrakt *` har samme
     vægt, så vis-reglen SKAL stå efter skjul-reglen — ellers skjuler
     skjul-reglen selve kontrakten. Rækkefølgen er med vilje. */
  body:has(.kontrakt) *,
  body:has(.kontrakt) .container,
  body:has(.kontrakt) section,
  body:has(.kontrakt) aside { visibility: hidden; }
  body:has(.kontrakt) .kontrakt,
  body:has(.kontrakt) .kontrakt * { visibility: visible; }
  body:has(.kontrakt) .no-print { visibility: hidden; }

  .site-header,
  .site-footer,
  .admin-nav,
  .kontrakt-handlinger,
  .page-head,
  .kontrakt-bemerkning,
  .skip-link,
  .nav { display: none !important; }

  .kontrakt {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 11.5pt;
  }
  .kontrakt h3 { break-after: avoid; }
  .kontrakt-tabel tr,
  .kontrakt-underskrift { break-inside: avoid; }
  a[href]::after { content: ""; }
}
@media print {
  /* ⚠ BUNDET TIL RAMMEN (målt 2026-10-16, fanget af scripts/test-css.js).
     Reglen var `body, .container, … { visibility: hidden; }` — den skjulte ALT
     på ENHVER side, også en side uden pakkeliste. Med `:has()` skjuler den kun
     noget, når rammen faktisk er på siden. */
  body:has(.pakkeliste) *,
  body:has(.pakkeliste) .container,
  body:has(.pakkeliste) .detail-wrap,
  body:has(.pakkeliste) .detail-main,
  body:has(.pakkeliste) aside { visibility: hidden; }
  body:has(.pakkeliste) .pakkeliste,
  body:has(.pakkeliste) .pakkeliste * { visibility: visible; }
  .pakkeliste {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
    padding: 0;
  }
  .pakkeliste .no-print { display: none !important; }
  .pakkeliste-gruppe { break-inside: avoid; }
  .pakkeliste-liste li { break-inside: avoid; }
}
@media print {
  .husregler, .husregler-raekke { break-inside: avoid; }
}
@media print {
  .udendoers, .udendoers-raekke,
  .rejsevejledning, .rejsevejledning-raekke { break-inside: avoid; }
}
@media print {
  .skaderapport-par { grid-template-columns: 1fr 1fr; }
  .skaderapport-saet { break-inside: avoid; }
  .vedligehold-billeder img { width: 6.5rem; height: 5rem; }
}
@media print {
  /* ⚠ SKJUL-REGELEN ER BUNDET TIL RAMMEN (målt 2026-10-16, fanget af
     scripts/test-css.js). Den stod som `body * { visibility: hidden; }` — uden
     `:has(...)`. En sådan regel skjuler ALT på ENHVER side, også en side, der
     slet ikke har regnskabsrapporten, og to af dem (denne og årsoversigtens)
     kunne derfor skjule hinandens indhold, alt efter hvilken der stod sidst.
     Reglen skjuler nu kun noget, når rammen FAKTISK er på siden. */
  body:has(.regnskab-rapport) * { visibility: hidden; }
  /* ⚠ VIS-REGLEN BÆRER OGSÅ RAMMEN. Stod der kun `.regnskab-rapport`, ville den
     ikke blive bundet til sin egen skjul-regel — og `test-css.js` kræver, at
     begge veje peger på SAMME ramme. Se UDSKRIFTSRAMMER i den fil. */
  body:has(.regnskab-rapport) .regnskab-rapport,
  body:has(.regnskab-rapport) .regnskab-rapport * { visibility: visible; }
  body:has(.regnskab-rapport) .no-print { visibility: hidden; }
  .regnskab-rapport {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .regnskab-rapport .no-print { display: none !important; }
  .regnskab-rapport .admin-tabel-wrap { overflow: visible; }
  .regnskab-rapport .admin-tabel { min-width: 0; }
}
@media print {
  /* ⚠ BUNDET TIL RAMMEN — se kommentaren ved regnskabsrapporten ovenfor. */
  body:has(.aarsoversigt-ramme) * { visibility: hidden; }
  body:has(.aarsoversigt-ramme) .aarsoversigt-ramme,
  body:has(.aarsoversigt-ramme) .aarsoversigt-ramme * { visibility: visible; }
  body:has(.aarsoversigt-ramme) .no-print { visibility: hidden; }
  .aarsoversigt-ramme {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .aarsoversigt-ramme .no-print { display: none !important; }
  .aarsoversigt-ramme .admin-tabel-wrap { overflow: visible; }
  .aarsoversigt-ramme .admin-tabel { min-width: 0; font-size: 10.5pt; }
  .aarsoversigt-ramme .admin-tabel tr { break-inside: avoid; }
}
@media print {
  .no-print { display: none !important; }
  .regnskab-tabel { font-size: 10.5pt; }
  .regnskab-tabel tr { break-inside: avoid; }
  .regnskab-tabel thead { display: table-header-group; }
  .noegletal { border-color: #000; }
  .maaned-aktuel { border-color: #999; }
  .byggenote { display: none; }
  a { color: inherit; text-decoration: none; }
}
@media print {
  /* ⚠ PRINTVISNINGEN ER SIN EGEN RAMME — BUNDET TIL `:has(...)`.
     Siden /admin/regnskab/print tegner `.print-ark` og INTET nøgletalsbånd.
     Uden disse to linjer ville et Ctrl+P på den side printe hele skallen
     (header, menu, footer) fordi ingen anden ramme matcher — og med en
     global `body *`-regel ville den til gengæld skjule ALT, også på sider,
     der ikke har rammen. Se reglen om `:has` ved regnskabsrapporten. */
  body:has(.print-ark) * { visibility: hidden; }
  body:has(.print-ark) .print-ark,
  body:has(.print-ark) .print-ark * { visibility: visible; }
  body:has(.print-ark) .no-print { visibility: hidden; }
  .print-ark {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .print-ark .no-print { display: none !important; }
}


/* =========================================================
   Vakano – nyt designsystem (2026)
   Kilde: designs/hygge-forside.html, <style>-blok 2.
   Kun fontene er ændret: de lå som base64 i designfilerne og
   hentes nu fra /fonts/ som woff2. Alt andet er 1:1.
   Bruges indtil videre KUN af /ny-forside (skitse).
   ========================================================= */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/fraunces-latin-var.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format('woff2');
}

/* /css/style.css */
/* =========================================================
   Hygge – eget designsystem
   Palette: dyb grøn (fyrrepine), terrakotta (ler) og sand
   ========================================================= */

:root {
  --pine: #12352c;
  --pine-700: #1a4a3d;
  --pine-600: #26604f;
  --pine-100: #e3ede9;
  --pine-50: #f1f6f4;
  --clay: #c9552f;
  --clay-dark: #a8431f;
  --clay-100: #fbe8e0;
  --gold: #d99a4e;
  --sand: #faf7f2;
  --cream: #ffffff;
  --ink: #17251f;
  --ink-soft: #3b4a44;
  --muted: #70807a;
  --line: #e6e0d6;
  --line-strong: #d4ccc0;
  --ok: #2f7a53;
  --ok-100: #e4f2ea;
  --warn: #b3761d;
  --warn-100: #fbf0dd;
  --danger: #b23a2b;
  --danger-100: #fbe9e6;

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(23, 37, 31, .06), 0 4px 12px rgba(23, 37, 31, .05);
  --sh-2: 0 4px 10px rgba(23, 37, 31, .07), 0 12px 30px rgba(23, 37, 31, .07);
  --sh-3: 0 12px 24px rgba(23, 37, 31, .09), 0 30px 60px rgba(23, 37, 31, .10);

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --header-h: 78px;
  --max: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--pine);
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
small { font-size: .85rem; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.container--wide { max-width: 1440px; }
.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }

.muted { color: var(--muted); }
.center { text-align: center; }
.flex { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.hidden { display: none !important; }

.icon { width: 20px; height: 20px; flex: none; }
.icon--filled { stroke: none; }
.icon-lg { width: 26px; height: 26px; }
.icon-sm { width: 16px; height: 16px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__text {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--pine);
}
.logo--light .logo__text { color: var(--cream); }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 247, 242, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.header__nav { display: flex; align-items: center; gap: 4px; }
.header__link {
  padding: 9px 14px;
  border-radius: var(--r-full);
  font-size: .94rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background .18s, color .18s;
  position: relative;
  white-space: nowrap;
}
.header__link:hover { background: var(--pine-100); color: var(--pine); }
.header__link.is-active { color: var(--pine); font-weight: 600; }
.header__link.is-active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--clay);
}
.header__badge {
  position: absolute; top: 2px; right: 4px;
  background: var(--clay); color: #fff;
  font-size: .65rem; font-weight: 700;
  min-width: 17px; height: 17px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  padding: 0 4px;
}
.avatar {
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  object-fit: cover;
  background: var(--pine-100);
  display: grid; place-items: center;
  font-weight: 600; color: var(--pine);
  font-size: .85rem;
  flex: none;
}
.avatar--lg { width: 72px; height: 72px; font-size: 1.3rem; }
.avatar--xl { width: 110px; height: 110px; font-size: 2rem; }

.menu { position: relative; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  min-width: 240px;
  padding: 8px;
  display: none;
  z-index: 70;
}
.menu__panel.is-open { display: block; }
.menu__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: .94rem; color: var(--ink-soft);
}
.menu__item:hover { background: var(--pine-50); color: var(--pine); }
.menu__sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu__head { padding: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: .95rem; font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  background: var(--pine); color: #fff;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--clay { background: var(--clay); }
.btn--clay:hover { background: var(--clay-dark); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--cream); border-color: var(--ink-soft); }
.btn--light { background: var(--cream); color: var(--pine); }
.btn--light:hover { background: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }
.btn--sm { padding: 8px 15px; font-size: .87rem; }
.btn--xs { padding: 5px 12px; font-size: .8rem; }
.btn--lg { padding: 15px 30px; font-size: 1.03rem; }
.btn--block { width: 100%; }
.btn--danger { background: var(--danger); }
.btn--danger-ghost { background: transparent; border-color: var(--danger); color: var(--danger); }

.link { color: var(--pine); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--clay); }
.link--quiet { text-decoration: none; font-weight: 500; }
.link--quiet:hover { text-decoration: underline; }

/* ---------- Søgefelt ---------- */
.searchbar {
  display: flex; align-items: stretch;
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  box-shadow: var(--sh-1);
  overflow: hidden;
  max-width: 780px;
}
.searchbar__seg {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.searchbar__seg:last-child { border-right: none; }
.searchbar__seg label {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  display: block;
}
.searchbar__seg input, .searchbar__seg select {
  border: none; background: transparent; outline: none;
  font-size: .95rem; font-weight: 500; color: var(--ink);
  padding: 0; width: 100%;
  font-family: inherit;
}
.searchbar__seg--icon input { width: 190px; }
.searchbar__submit {
  background: var(--clay); color: #fff;
  border: none; width: 56px; flex: none; display: grid; place-items: center;
  cursor: pointer;
}
.searchbar__submit:hover { background: var(--clay-dark); }
.searchbar--hero { box-shadow: var(--sh-2); border-color: transparent; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(217,154,78,.35), transparent 60%),
    radial-gradient(900px 480px at 92% 8%, rgba(38,96,79,.5), transparent 62%),
    linear-gradient(160deg, #12352c 0%, #1c4a3d 55%, #143a30 100%);
  color: #fff;
  padding: 92px 0 118px;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; right: -120px; bottom: -180px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 60%);
}
.hero__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; text-align: center; }
.hero h1 { color: #fff; margin-bottom: 14px; }
.hero__lead { font-size: 1.13rem; color: rgba(255,255,255,.86); max-width: 620px; margin: 0 auto 34px; }
.hero__search { margin: 0 auto 18px; max-width: 860px; }
.hero__tags { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hero__tag {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; padding: 7px 15px; border-radius: var(--r-full);
  font-size: .86rem; backdrop-filter: blur(6px);
}
.hero__tag:hover { background: rgba(255,255,255,.22); }

/* ---------- Boligkort ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 26px;
}
.card {
  position: relative;
  background: var(--cream);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.card__media { position: relative; aspect-ratio: 4 / 3; background: var(--pine-100); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.95);
  color: var(--pine);
  padding: 5px 11px; border-radius: var(--r-full);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .01em;
}
.card__heart {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  transition: transform .15s;
}
.card__heart:hover { transform: scale(1.1); }
.card__heart.is-saved { color: var(--clay); }
.card__body { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.card__title { font-family: var(--font-display); font-size: 1.03rem; font-weight: 600; color: var(--pine); }
.card__meta { color: var(--muted); font-size: .89rem; display: flex; align-items: center; gap: 6px; }
.card__price { margin-top: auto; font-weight: 700; color: var(--ink); }
.card__price span { font-weight: 400; color: var(--muted); font-size: .88rem; }
.card__rating { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .88rem; }

.star { width: 15px; height: 15px; color: var(--gold); stroke-width: 1.6; }
.star--full { fill: var(--gold); }
.star--half { fill: url(#half); }
.star--empty { color: var(--line-strong); }
.rating-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--pine); color: #fff;
  padding: 4px 9px; border-radius: var(--r-full);
  font-size: .8rem; font-weight: 700;
}
.rating-pill--light { background: var(--cream); color: var(--pine); }

/* ---------- Kategorier ---------- */
.cats { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.cat {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 18px; border-radius: var(--r);
  border: 1px solid transparent;
  white-space: nowrap; font-size: .87rem; font-weight: 500; color: var(--ink-soft);
  min-width: 96px;
}
.cat:hover { border-color: var(--line); background: var(--cream); }
.cat.is-active { border-color: var(--pine); background: var(--pine-50); color: var(--pine); font-weight: 600; }
.cat__icon {
  width: 52px; height: 52px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--pine-100); color: var(--pine);
  transition: background .2s, color .2s;
}
.cat.is-active .cat__icon { background: var(--pine); color: #fff; }

/* ---------- By-kort ---------- */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.city-card {
  position: relative; height: 250px; border-radius: var(--r); overflow: hidden;
  display: flex; align-items: flex-end; padding: 20px;
  color: #fff; box-shadow: var(--sh-1);
  transition: transform .2s;
}
.city-card:hover { transform: translateY(-3px); }
.city-card__bg { position: absolute; inset: 0; }
.city-card__bg img { width: 100%; height: 100%; object-fit: cover; }
.city-card__inner { position: relative; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.city-card h3 { color: #fff; margin: 0 0 2px; font-size: 1.25rem; }
.city-card p { margin: 0; font-size: .9rem; opacity: .92; }

/* ---------- Knapper/links i sektioner ---------- */
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section__head p { color: var(--muted); margin: 0; max-width: 620px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em;
  font-size: .74rem; font-weight: 700; color: var(--clay);
  margin-bottom: 10px;
}

/* ---------- Paneler / formularer ---------- */
.panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-1);
}
.panel--flat { box-shadow: none; }
.panel--tight { padding: 20px; }
.panel__title { font-family: var(--font-display); font-size: 1.25rem; color: var(--pine); margin-bottom: 4px; }

.field { margin-bottom: 18px; }
.field > label, .label {
  display: block;
  font-size: .82rem; font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-family: inherit; font-size: .95rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--pine-600);
  box-shadow: 0 0 0 3px var(--pine-100);
}
.textarea { min-height: 110px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2370807a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 38px;
}
.field--row { display: flex; gap: 14px; }
.field--row > * { flex: 1; }
.hint { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.check { display: flex; align-items: center; gap: 10px; font-size: .93rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--pine); flex: none; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); background: var(--cream);
  font-size: .87rem; cursor: pointer; color: var(--ink-soft);
}
.chip:hover { border-color: var(--pine); color: var(--pine); }
.chip.is-active { background: var(--pine); border-color: var(--pine); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- Flash-beskeder ---------- */
.flash-wrap { position: fixed; top: 92px; right: 24px; z-index: 200; display: grid; gap: 10px; max-width: 380px; }
.flash {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pine);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  box-shadow: var(--sh-2);
  font-size: .91rem;
  animation: slideIn .3s ease;
}
.flash--success { border-left-color: var(--ok); }
.flash--error { border-left-color: var(--danger); }
.flash--info { border-left-color: var(--gold); }
@keyframes slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---------- Boligdetalje ---------- */
.listing { background: var(--cream); }
.listing__head { padding: 26px 0 14px; }
.breadcrumb { font-size: .85rem; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.breadcrumb a:hover { text-decoration: underline; }

.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 210px); gap: 10px; }
.gallery__item { position: relative; overflow: hidden; background: var(--pine-100); }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.gallery__item:nth-child(2) { border-radius: 0 var(--r-lg) 0 0; }
.gallery__item:nth-child(3) { border-radius: 0 0 0 var(--r-lg); }
.gallery__item:nth-child(4) { border-radius: 0 0 var(--r-lg) 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__all {
  position: absolute; right: 16px; bottom: 16px;
  background: rgba(255,255,255,.94); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-full);
  padding: 9px 16px; font-size: .87rem; font-weight: 600;
  display: inline-flex; gap: 8px; align-items: center;
  cursor: pointer;
}
.gallery__count { position: absolute; left: 16px; bottom: 16px; background: rgba(18,53,44,.85); color: #fff; padding: 6px 12px; border-radius: var(--r-full); font-size: .8rem; }

.listing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; padding: 30px 0 70px; }
.listing-title { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 6px; }
.listing-sub { color: var(--muted); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: .93rem; }

.host-row { display: flex; align-items: center; gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.host-row h3 { margin: 0 0 2px; font-size: 1.12rem; }

.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 24px; padding: 26px 0; }
.amenity { display: flex; gap: 13px; align-items: flex-start; }
.amenity .icon { color: var(--pine-600); margin-top: 2px; }
.amenity__name { font-weight: 600; font-size: .95rem; }
.amenity__sub { font-size: .84rem; color: var(--muted); }

.rule-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rule-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
.rule-list .icon { color: var(--pine-600); }

.review-summary { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; padding: 26px 0; }
.review-score { text-align: center; }
.review-score__num { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--pine); }
.review-bars { display: grid; gap: 10px; }
.review-bar { display: grid; grid-template-columns: 120px 1fr 44px; gap: 12px; align-items: center; font-size: .88rem; }
.review-bar__track { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.review-bar__fill { height: 100%; background: var(--pine); border-radius: 3px; }

.review { padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; }
.review:last-child { border-bottom: none; }
.review__body { flex: 1; }
.review__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.review__name { font-weight: 600; }

.booking-card {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 24px;
}
.booking-card__price { font-size: 1.3rem; font-weight: 700; }
.booking-card__price span { font-weight: 400; color: var(--muted); font-size: .9rem; }
.price-lines { margin: 20px 0; display: grid; gap: 11px; font-size: .94rem; }
.price-line { display: flex; justify-content: space-between; gap: 12px; }
.price-line--total { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 4px; font-weight: 700; }
.price-line--discount { color: var(--ok); }
.booking-fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: var(--r-sm); overflow: hidden; }
.booking-fields > div { padding: 11px 14px; }
.booking-fields > div:first-child { border-right: 1px solid var(--line-strong); }
.booking-fields label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: block; }
.booking-fields input { border: none; background: transparent; outline: none; font-size: .93rem; width: 100%; padding: 2px 0 0; font-family: inherit; }
.booking-fields--single { grid-template-columns: 1fr; }

.notice {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--pine-50); border: 1px solid var(--pine-100);
  border-radius: var(--r-sm); padding: 13px 16px; font-size: .9rem; color: var(--ink-soft);
}
.notice--warn { background: var(--warn-100); border-color: #f0dcb9; }
.notice--danger { background: var(--danger-100); border-color: #f3cdc7; }
.notice--ok { background: var(--ok-100); border-color: #cbe4d6; }

/* ---------- Søgeresultater ---------- */
.search-layout { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: 34px; align-items: start; padding: 24px 0 70px; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); }
.filter-group { padding: 20px 0; border-bottom: 1px solid var(--line); }
.filter-group:first-child { padding-top: 0; }
.filter-group h4 { font-family: var(--font-body); font-size: .92rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.range-row { display: flex; justify-content: space-between; font-size: .84rem; color: var(--muted); }
.range-inputs { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.range-inputs input { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); font-family: inherit; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.results-head h1 { font-size: 1.7rem; margin: 0; }
.sort-select { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--cream); font-family: inherit; font-size: .89rem; }

.pagination { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 40px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: grid; place-items: center;
  border-radius: var(--r-full); border: 1px solid var(--line-strong);
  background: var(--cream); font-size: .9rem;
}
.pagination .is-active { background: var(--pine); color: #fff; border-color: var(--pine); font-weight: 600; }
.pagination .is-disabled { opacity: .4; }

/* ---------- Dashboard / tabeller ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.stat {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; box-shadow: var(--sh-1);
}
.stat__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.stat__value { font-family: var(--font-display); font-size: 1.9rem; color: var(--pine); line-height: 1.2; margin-top: 6px; }
.stat__sub { font-size: .84rem; color: var(--muted); margin-top: 4px; }

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; padding: 0 12px 12px; border-bottom: 1px solid var(--line);
}
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: .93rem; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table__thumb { width: 64px; height: 48px; border-radius: var(--r-xs); object-fit: cover; background: var(--pine-100); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.badge--ok { background: var(--ok-100); color: var(--ok); }
.badge--warn { background: var(--warn-100); color: var(--warn); }
.badge--danger { background: var(--danger-100); color: var(--danger); }
.badge--info { background: var(--pine-100); color: var(--pine-700); }
.badge--muted { background: var(--line); color: var(--muted); }

/* ---------- Kalender ---------- */
.calendar { width: 100%; border-collapse: collapse; }
.calendar th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px; text-align: left; }
.calendar td { padding: 0; }
.calendar__day {
  width: 100%; aspect-ratio: 1; min-height: 62px;
  border: 1px solid var(--line); background: var(--cream);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 8px; cursor: pointer; font-family: inherit; font-size: .86rem;
  transition: background .15s;
}
.calendar__day:hover { background: var(--pine-50); }
.calendar__day.is-past { color: var(--muted); background: var(--sand); cursor: default; }
.calendar__day.is-booked { background: var(--clay-100); color: var(--clay-dark); cursor: not-allowed; }
.calendar__day.is-blocked { background: var(--pine-100); color: var(--pine-700); }
.calendar__day.is-today { box-shadow: inset 0 0 0 2px var(--clay); }
.calendar__tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Beskeder ---------- */
.chat { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - var(--header-h) - 40px); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--cream); }
.chat__list { border-right: 1px solid var(--line); overflow-y: auto; }
.chat__item { display: flex; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.chat__item:hover { background: var(--pine-50); }
.chat__item.is-active { background: var(--pine-100); }
.chat__body { display: flex; flex-direction: column; }
.chat__head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.chat__messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; background: var(--sand); }
.chat__form { padding: 14px; border-top: 1px solid var(--line); display: flex; gap: 10px; }
.bubble { max-width: 72%; padding: 11px 15px; border-radius: 18px; font-size: .93rem; }
.bubble--me { align-self: flex-end; background: var(--pine); color: #fff; border-bottom-right-radius: 6px; }
.bubble--them { align-self: flex-start; background: var(--cream); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bubble__time { font-size: .72rem; opacity: .7; display: block; margin-top: 4px; }

/* ---------- Footer ---------- */
.footer { background: var(--pine); color: rgba(255,255,255,.78); padding: 56px 0 28px; margin-top: 40px; }
.footer h4 { color: #fff; font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
.footer__links { display: grid; gap: 9px; font-size: .9rem; }
.footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
.footer .logo__text { color: #fff; }

/* ---------- Auth ---------- */
.auth { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 1fr 1fr; }
.auth__aside {
  background:
    radial-gradient(700px 400px at 20% 10%, rgba(217,154,78,.35), transparent 60%),
    linear-gradient(155deg, #12352c, #1e5343);
  color: #fff; padding: 64px; display: flex; flex-direction: column; justify-content: center;
}
.auth__aside h2 { color: #fff; font-size: 2.2rem; }
.auth__aside p { color: rgba(255,255,255,.85); max-width: 420px; }
.auth__list { display: grid; gap: 14px; margin-top: 26px; }
.auth__list li { display: flex; gap: 11px; align-items: flex-start; list-style: none; font-size: .95rem; }
.auth__list .icon { color: var(--gold); margin-top: 3px; }
.auth__form { display: flex; align-items: center; justify-content: center; padding: 50px 24px; background: var(--cream); }
.auth__form-inner { width: 100%; max-width: 440px; }

/* ---------- Diverse ---------- */
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty .icon { width: 46px; height: 46px; color: var(--line-strong); margin-bottom: 12px; }
.empty h3 { color: var(--ink-soft); }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.tab { padding: 11px 17px; font-size: .93rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--pine); }
.tab.is-active { color: var(--pine); border-bottom-color: var(--clay); }

.map-embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--pine-50); }
.map-embed iframe { width: 100%; height: 340px; border: 0; display: block; }

.trip-card { display: flex; gap: 18px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--sh-1); }
.trip-card__img { width: 190px; height: 140px; border-radius: var(--r-sm); object-fit: cover; background: var(--pine-100); flex: none; }

.steps { counter-reset: step; display: grid; gap: 22px; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 38px; height: 38px; flex: none;
  border-radius: 50%; background: var(--pine); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-display);
}
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature__icon {
  width: 46px; height: 46px; border-radius: var(--r-sm); flex: none;
  background: var(--pine-100); color: var(--pine);
  display: grid; place-items: center;
}
.feature h4 { margin-bottom: 4px; }
.feature p { margin: 0; color: var(--muted); font-size: .92rem; }

.price-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.price-card--hero { border: 2px solid var(--pine); box-shadow: var(--sh-2); }
.price-card__amount { font-family: var(--font-display); font-size: 2.6rem; color: var(--pine); line-height: 1; }

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

/* ---------- Responsivt ---------- */
@media (max-width: 1080px) {
  .listing-layout { grid-template-columns: 1fr; }
  .booking-card { position: static; }
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
  .chat { grid-template-columns: 1fr; }
  .chat__list { display: none; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 140px; }
  .gallery__item:first-child { grid-column: span 2; grid-row: span 1; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .gallery__item:nth-child(2) { border-radius: 0; }
  .gallery__item:nth-child(3) { border-radius: 0 0 0 var(--r-lg); }
  .gallery__item:nth-child(4) { border-radius: 0 0 var(--r-lg) 0; }
  .header__inner { gap: 10px; }
  .header__search { display: none; }
  .review-summary { grid-template-columns: 1fr; gap: 20px; }
  .section { padding: 44px 0; }
}

@media (max-width: 620px) {
  .container { padding: 0 16px; }
  .hero { padding: 56px 0 76px; }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
  .footer__grid { grid-template-columns: 1fr; }
  .trip-card { flex-direction: column; }
  .trip-card__img { width: 100%; height: 180px; }
  .flash-wrap { left: 16px; right: 16px; max-width: none; top: 84px; }
}

/* ==========================================================================
   VAKANOS TILFØJELSE — ikke i designfilerne (2026)
   ==========================================================================
   Designet er tegnet til bred skærm. Søgefeltet er fire felter i én række
   uden ombrydning og kræver ca. 640 px, og topmenuen kan heller ikke
   ombrydes — så på en telefon fik hele siden vandret rul, og både
   overskrift og kort blev skåret af. Det er MÅLT på den oprindelige fil
   (designs/hygge-forside.html): den gør præcis det samme, så det er
   designets begrænsning og ikke en fejl i overførslen.
   Reglerne herunder er derfor VORES, ikke designets: de stabler felterne,
   så skitsen kan bruges på mobil. Alt over 700 px er urørt.
   ========================================================================== */

/* ==========================================================================
   HEADERENS NYE DELE — det designet ikke havde (del 1, 2026-10-22)
   ==========================================================================
   Designets header havde ét logo-ord og ingen sprogvælger. Her styles de dele,
   Vakanos funktioner tilføjer: log ud-knappen, sprogvælgeren og et menupunkt,
   der samtidig er en knap ("Opret annonce").

   KNAPPEN I MENUEN: .header__link:hover giver en lys baggrund med mørk tekst —
   det er rigtigt for et menupunkt, men forkert for den knap, der står samme
   sted: dens tekst er hvid, og så ville den forsvinde ved hover. Derfor får
   knappen sin egen hover.
   ========================================================================== */
.header__logud { display: flex; margin: 0; }
.header__link.btn { padding: 9px 16px; }
.header__link.btn:hover { background: var(--pine); color: #fff; }
/* Er knappen SAMTIDIG det aktive menupunkt (fx "Opret annonce" på
   /opret), giver .header__link.is-active den mørkegrønne tekstfarve — på
   den mørkegrønne knap blev teksten usynlig. Målt 2026-10-22. */
.header__link.btn.is-active { color: #fff; }

/* ==========================================================================
   SØGELAYOUT (del 4, 2026-10-22)
   ==========================================================================
   Designets .search-layout giver 282 px filtre til venstre og resultatet til
   højre. Her styles det, filtrene tilføjer: formularen, grupperne
   (<details>, der virker uden JavaScript) og resultatspalten.
   ========================================================================== */
.filtre { display: grid; gap: 4px; }
.filtre__gruppe {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  margin: 0 0 16px;
}
.filtre__gruppe summary { cursor: pointer; font-weight: 600; color: var(--pine); font-size: .92rem; }
.filtre__gruppe[open] summary { margin-bottom: 10px; }
.filtre__handlinger { display: grid; gap: 8px; margin-top: 10px; }
.search-results { min-width: 0; }
.search-results .grid-cards { margin-bottom: 26px; }
/* Område uden foto: en rolig grøn flade i stedet for en hus-pladsholder. */
.city-card--uden-foto { background: linear-gradient(160deg, var(--pine-600), var(--pine)); }

/* Hjertet på kortet er en formular (del 6). display: contents gør, at
   formularen ikke selv får en boks — knappen placeres derfor stadig i
   kortets øverste højre hjørne, som designet viser. */
.card__heart-form { display: contents; }
.card__heart { font-size: 16px; line-height: 1; }

.header__nav { margin-left: auto; }

/* ==========================================================================
   MOBILMENUEN I DEN NYE HEADER (2026-10-22)
   ==========================================================================
   Designet havde ingen hamburger: menuen stod altid fremme, og ved 390 px
   blev den tre rækker høj med fem punkter og en knap. Her bruges Vakanos
   VANTE mønster i stedet — knappen #navToggle og scriptet i header.ejs, som
   allerede binder den. CSS'en skjuler blot menuen, indtil den er åbnet.

   Der må kun findes ÉN binding til #navToggle i hele projektet; den ligger i
   header.ejs, og vagten i scripts/test-sider.js afsnit 4k tæller den.
   ========================================================================== */
.header .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 860px) {
  .header .nav-toggle { display: inline-flex; }
  .header__nav { display: none; width: 100%; margin-left: 0; padding-top: 6px; }
  .header__nav.is-open { display: flex; }
  .header__sprog { margin-left: 0; }
}

.header__sprog { display: flex; align-items: center; margin: 0; }
.header__sprog select {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--cream);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 7px 10px;
  cursor: pointer;
}

/* Skjult for øjet, men læsbart for en skærmlæser. Designet havde kun
   .hidden (display: none), og den må ikke bruges til en label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   BÅND OG BESKEDER (del 2, 2026-10-22)
   ==========================================================================
   Fire ting kan stå under menuen: driftsbesked, "bekræft din e-mail",
   hjælpeadgang og en flash-kvittering. Den gamle skal bruger de gamle
   klassenavne og sin egen CSS; her er det nye designs udgave.

   BÅNDENE LIGGER I FLOWET — de skubber indholdet ned, fordi de skal læses.
   FLASH LIGGER FAST i øverste højre hjørne (designets .flash-wrap) og
   forsvinder af sig selv efter seks sekunder. Det er med vilje: et bånd er en
   tilstand, en flash er en kvittering.

   Farverne kommer fra designsystemet, så båndene ikke kan komme til at se ud
   som noget, der hører til en anden side.
   ========================================================================== */
.baand {
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.baand--drift { background: var(--pine-50); }
.baand--advarsel { background: var(--warn-100); border-bottom-color: #f0dcb9; color: #7a5314; }
.baand--hjaelp { background: var(--pine); color: #fff; border-bottom: none; }

.baand__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
.baand__tekst { flex: 1 1 320px; }
.baand__form { margin: 0; }

/* Båndene står UNDER en header, der er ~95 px høj (logoets undertitel gør den
   højere end designets 78 px). Flash-boksen skal derfor starte under den —
   ellers dækker den sprogvælgeren. */
.flash-wrap { top: 104px; }

/* ==========================================================================
   LOGOETS LOCKUP I TOPPEN — originalens, ikke designets (2026-10-22)
   ==========================================================================
   Designet havde ét ord ved mærket. Vakanos originale top har TRE dele:
   mærket, navnet ved siden af og undertitlen "FERIELEJLIGHEDER & SOMMERHUSE"
   centreret UNDER begge — det er dét, der gør, at logoet ser ud som logoet og
   ikke som en overskrift. Derfor er .header .logo en inline-grid med to
   kolonner og to rækker, præcis som .logo i public/css/style.css.

   Navnet bliver i designets Fraunces-serif, så det passer til resten af den
   nye forside; undertitlen er sat i Inter med spærret versal, som originalen.
   ========================================================================== */
.header .logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
/* Mærke og navn står i deres EGEN række, så undertitlen ikke kan presse
   dem fra hinanden. Det var netop, hvad der skete med en grid: den lange
   undertitel gjorde første kolonne bredere (målt 2026-10-22). */
.logo__række {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.header .logo img.logo__mark {
  width: auto;
  height: 38px;
  /* Mærkets SVG har luft til højre i sin viewBox (den er tegnet med luft om
     figuren). Uden et negativt mellemrum står navnet langt fra logoet, uanset
     hvor lille column-gap er — den målte afstand er tegnet, ikke CSS. */
  margin-right: 0;
}
.logo__navn {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--pine);
  display: block;
}
.logo__undertitel {
  text-align: left;
  white-space: nowrap;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--pine-600);
  margin-top: 2px;
}

/* Vakanos eget logo i det nye design. Designets mærke var en firkant på
   48×48; Vakanos er et liggende mærke (viewBox 420×360) og skal derfor have
   sin højde styret, ikke en firkant — ellers svæver det i en tom boks.
   I footeren står det på en lys plade, fordi mærket er marineblåt og
   footeren er mørkegrøn: uden pladen forsvinder det. */
.logo img.logo__mark { width: auto; height: 34px; }
/* Den sociale række i den nye footer (del 3). Ikonerne er inline SVG med
   currentColor, så de følger footerens egen tekstfarve. */
.footer__social { display: flex; gap: 10px; align-items: center; }
.footer__social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.footer__social a:hover { background: #fff; color: var(--pine); border-color: #fff; }
.footer__social svg { width: 20px; height: 20px; }
/* Rækken øverst i footeren: overskrift til venstre, knapper til højre. */
.footer__social-række {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer__social-tekst {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* Mærket på en lys plade — samme udseende i footeren OG i login-sidens
   venstre panel, hvor baggrunden også er mørk. Højden er sat, så pladen
   (32 + 2×5 px luft) passer til logoets 38 px-lockup. */
.auth__aside img.logo__mark,
.footer img.logo__mark {
  height: 32px;
  background: var(--sand);
  border-radius: 11px;
  padding: 5px 7px;
  box-sizing: content-box;
}

/* Læsbarhed på by-kortene. Designet har kun en tekstskygge under bynavnet, og
   det virker på et mørkt foto — men Vakanos huse har lyse illustrationer, og
   så forsvinder hvid tekst på lys baggrund. Et mørkt slør nederst giver den
   samme læsbarhed, uanset hvilket billede der ligger bag. Sløret er VORES. */
.city-card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(18, 53, 44, .92) 0%,
    rgba(18, 53, 44, .55) 24%,
    rgba(18, 53, 44, 0) 58%
  );
}

/* "Bliv udlejer"-panelet: designets inline-stil, flyttet herned. Den lå som
   inline style på elementet og kunne derfor ikke ombrydes på mobil.
   Udseendet er uændret på bred skærm. Reglen står FØR media-forespørgslen,
   så mobil-reglen nedenfor vinder (samme selektor, senere i filen). */
.cta-udlejer {
  background: linear-gradient(135deg, #12352c, #1e5343);
  color: #fff;
  border: none;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 700px) {
  .header__inner { flex-wrap: wrap; }
  .header__nav { flex-wrap: wrap; }
  .searchbar { flex-wrap: wrap; border-radius: var(--r); }
  /* Søgefeltets felter stables to og to. Uden min-width: 0 på BÅDE feltet og
     den div, der omslutter label+input, nægter en dato-input at krympe, og så
     rager den ud over kanten og giver hele siden vandret rul. */
  .searchbar__seg { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--line); min-width: 0; }
  .searchbar__seg > div { width: 100%; min-width: 0; }
  .searchbar__seg input { width: 100%; min-width: 0; }
  .searchbar__submit { width: 100%; height: 48px; }
  .section__head { flex-wrap: wrap; align-items: flex-start; }
  .hero__tags { gap: 8px; }
  .cta-udlejer { grid-template-columns: 1fr; gap: 24px; }
}

/* Under 480 px er der ikke plads til to felter ved siden af hinanden, og så
   står hvert felt på sin egen linje. */
@media (max-width: 480px) {
  .searchbar__seg { flex: 1 1 100%; border-right: none; }
  .header__link { padding: 9px 10px; }
  .hero__tags { gap: 6px; }
  .hero__tag { font-size: .82rem; padding: 6px 12px; }
}

/* ---------- Print ---------- */
@media print {
  .header, .footer, .booking-card, .flash-wrap { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   DRIFTSSIDEN OG DE ENKLE INDHOLDSSIDER (2026-10-22)
   ==========================================================================
   status-indhold.ejs deles med den gamle mobilvisning og bruger derfor de
   gamle klassenavne. Her får de det nye designs udseende — uden at røre
   indholdet, så teksten stadig kun findes ét sted.
   ========================================================================== */
.container.narrow { max-width: 820px; }
.page-head { padding: 40px 0 8px; }
.page-head h1 { margin-bottom: 8px; }
.page-head p { color: var(--muted); max-width: 640px; }
.card-meta { color: var(--muted); font-size: .88rem; margin: 0 0 .55rem; }
.alert {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--pine);
  border-radius: var(--r);
  background: var(--cream);
}
.alert-ok { border-left-color: var(--ok); background: var(--ok-100); }
.alert-error { border-left-color: var(--danger); background: var(--danger-100); }
.alert-info { border-left-color: var(--gold); background: var(--warn-100); }
.alert h2, .alert h3 { margin-top: 0; }

/* Indholdskort på de redigerede sider og i FAQ (2026-10-22). .info-card
   bruges af side-ny.ejs og af partials/faq-indhold.ejs — derfor står den her
   og ikke i den gamle style.css. */
.info-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.info-card h2 { font-size: 1.35rem; margin-top: 0; }
.info-card h3 { font-size: 1.05rem; margin-top: 0; }
.info-card p:last-child { margin-bottom: 0; }
.faq-gruppe { margin: 28px 0 14px; }

/* "Har du ikke fundet svar?" — boksen nederst i FAQ'en (kontakt-cta). */
.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 22px 24px;
  background: var(--pine-50);
  border: 1px solid var(--pine-100);
  border-radius: var(--r-lg);
}
.cta-box h3 { margin: 0 0 4px; }
.cta-box p { margin: 0; color: var(--ink-soft); }

/* Vilkår og privatlivspolitik bruger .info-card-soft til de bløde afsnit,
   og privatlivspolitikken har en tabel og en liste. Klassenavnene er de
   gamle, fordi teksten ikke må kopieres — se partials/*-indhold.ejs. */
.info-card-soft { background: var(--pine-50); border-color: var(--pine-100); }
.admin-tabel-wrap { overflow-x: auto; margin: 14px 0; }
.admin-tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-tabel th, .admin-tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.admin-tabel th { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.kontrakt-liste { margin: 0 0 16px; padding-left: 20px; }
.form-hint, .help-text { font-size: .85rem; color: var(--muted); }

/* Nummereret trinliste på "Sådan fungerer det" (del A3). */
.numbered { counter-reset: trin; list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.numbered li { counter-increment: trin; position: relative; padding-left: 38px; }
.numbered li::before {
  content: counter(trin);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--pine); color: #fff;
  display: grid; place-items: center;
  font: 700 .8rem var(--font-body);
}
.info-card code { background: var(--pine-50); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; font-size: .88em; }

/* Prisvagtens formular (del A3). .honeypot-felt er et usynligt værn mod
   bots (N53) — det skal være skjult for øjet, men stadig i DOM'en. */
.prisvagt-form { display: grid; gap: 14px; }
.prisvagt-form fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; margin: 0; }
.prisvagt-form legend { font-weight: 600; font-size: .92rem; color: var(--pine); padding: 0 6px; }
.honeypot-felt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.label-hint { color: var(--muted); font-weight: 400; font-size: .82rem; }

/* .btn-primary er den gamle skal's primærknap. Fejlsiderne (403/404/500)
   bruger den, og prøverne finder knappen på klassen — så navnet bliver, og
   udseendet kommer herfra. */
.btn-primary { background: var(--pine); color: #fff; }
.btn-primary:hover { background: var(--pine-700); }

/* Kontaktsiden (del B). Siden har sin egen formular med egne klasser;
   felterne styles samlet her i stedet for at få nye klasser i markupen. */
.contact-form { display: grid; gap: 14px; }
.contact-form label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--pine-600);
  box-shadow: 0 0 0 3px var(--pine-100);
}
.fact-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.fact-row:last-child { border-bottom: 0; }
.sags-id { margin-top: 14px; padding: 12px 14px; background: var(--pine-50); border-radius: var(--r-sm); }
.sags-id-kode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .04em; }
.honningkrukke { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice--ok { border-left-color: var(--ok); }

/* På boligsiden hentes den GAMLE style.css ved siden af den nye (se
   ekstraCss i header.ejs). Den gamle .btn vandt over menuknappen, så
   teksten blev usynlig. Denne regel har højere specificitet og vinder
   uanset rækkefølgen. */
.header .header__nav .header__link.btn,
.header .header__nav .header__link.btn:hover {
  background: var(--pine);
  color: #fff;
}

/* GALLERIETS VARIANTER (C1, 2026-10-22). Designets gitter er tegnet til
   fire billeder (ét stort + tre små). Med færre billeder ville der stå tomme
   felter, så gitteret tilpasses antallet i stedet. */
.gallery { position: relative; }
.gallery--1 { grid-template-columns: 1fr; grid-template-rows: 380px; }
.gallery--1 .gallery__item:first-child { grid-column: auto; grid-row: auto; border-radius: var(--r-lg); }
.gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 340px; }
.gallery--2 .gallery__item:first-child { grid-column: span 1; grid-row: span 1; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.gallery--2 .gallery__item:nth-child(2) { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.gallery--3 .gallery__item:first-child { grid-column: span 2; grid-row: span 2; }

/* BOLIGSIDENS LAYOUT (C1, 2026-10-22). Samme mål som designets
   .listing-layout: indhold til venstre, bookingskort på 380 px til højre,
   og kortet følger med ned. Under 1080 px stables de. */
.container.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: start;
  padding-top: 26px;
  padding-bottom: 64px;
}
.container.detail .detail-side { position: sticky; top: 96px; }
@media (max-width: 1080px) {
  .container.detail { grid-template-columns: 1fr; gap: 28px; }
  .container.detail .detail-side { position: static; }
}

/* ==========================================================================
   BOOKINGSKORTET (C2, 2026-10-22)
   ==========================================================================
   Kortet er partials/booking-form.ejs plus pris-panelet i boligsidens
   side-kolonne. Markupen er IKKE rørt — den er 638 linjer med validering,
   tidsaftaler, ydelser og deponering, og en omskrivning ville være en
   funktionsændring, ikke en designændring. I stedet styles de klassenavne,
   den bruger, med det nye designs tokens. Den gamle CSS hentes før den nye,
   så disse regler vinder.
   ========================================================================== */
.side-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sh-2); }
.pris-panel-titel { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.pris-panel-tom { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.pris-panel-periode { font-size: .92rem; color: var(--ink-soft); margin-bottom: 10px; }
.pris-panel-linje { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; padding: 5px 0; }
.pris-panel-linje span:last-child { font-weight: 600; white-space: nowrap; }
.pris-panel-streg { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.pris-panel-total { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 1.05rem; color: var(--pine); padding-top: 4px; }
.pris-panel-fodnote, .pris-panel-note { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.pris-panel-badge { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clay); background: var(--clay-100); border-radius: var(--r-full); padding: 3px 9px; margin-bottom: 8px; }
.side-extra, .service-list { margin-top: 14px; font-size: .9rem; color: var(--ink-soft); }
.booking-form { display: grid; gap: 12px; margin-top: 14px; }
.booking-form .form-row { display: grid; gap: 10px; }
.booking-form .field-label, .booking-form label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.booking-form input, .booking-form select, .booking-form textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: var(--cream); color: var(--ink); }
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus { outline: none; border-color: var(--pine-600); box-shadow: 0 0 0 3px var(--pine-100); }
.booking-form .form-hint, .booking-form .help-text, .booking-form .label-hint { font-size: .78rem; color: var(--muted); font-weight: 400; }
.booking-form .input-error { border-color: var(--danger); }
.booking-form .field-error { color: var(--danger); font-size: .8rem; }
.booking-form .btn-block { width: 100%; }
.side-note { font-size: .78rem; color: var(--muted); }
.pris-linje { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding: 3px 0; }
.pris-linje.pris-i-alt { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; font-weight: 700; }
.pris-optaget { color: var(--danger); font-size: .82rem; }
.ydelser-valg { display: grid; gap: 6px; margin-top: 6px; }
.ydelse { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.ydelse-navn { flex: 1; }
.ydelse-enhed, .ydelse-pris { color: var(--ink-soft); white-space: nowrap; }
.tidsaftale { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: var(--muted); }

/* ==========================================================================
   C3: INDHOLDET UNDER BOOKINGSKORTET (2026-10-22)
   ==========================================================================
   Faciliteter, husregler, anmeldelser og de små mærker bruger stadig deres
   egne klassenavne fra den gamle CSS. Her får de det nye designs typografi og
   afstande — samme metode som bookingkortet: ingen markup ændres, så
   funktionerne (anmeldelser, svar, regler) er urørte.
   ========================================================================== */
.content-block { border-top: 1px solid var(--line); padding: 22px 0; }
.content-block h2, .content-block h3 { margin-bottom: 10px; }
.content-block summary { cursor: pointer; }
.content-block summary h2 { display: inline; }
.content-block .description { margin: 0 0 12px; color: var(--ink-soft); }
.amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.amenities li { display: flex; align-items: center; gap: 8px; font-size: .93rem; color: var(--ink-soft); }
.amenities .icon { color: var(--pine-600); }
.husregler { margin: 0; }
.husregler-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.husregler-raekke { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; color: var(--ink-soft); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; letter-spacing: .04em; border-radius: var(--r-full); padding: 3px 9px; background: var(--pine-50); color: var(--pine-700); }
.badge-muted { background: var(--line); color: var(--ink-soft); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-full); border: 1px solid var(--line-strong); background: var(--cream); font-size: .84rem; color: var(--ink-soft); }
.chip-rating, .chip-verificeret { border-color: var(--pine-100); background: var(--pine-50); color: var(--pine-700); }
.chip-saeson { border-color: var(--clay-100); background: var(--clay-100); color: var(--clay-dark); }
.chip-hidden { border-color: var(--line); background: var(--line); color: var(--muted); }
.distance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; color: var(--ink-soft); }
.distance-list li { display: flex; justify-content: space-between; gap: 12px; }
.anmeldelse { border-top: 1px solid var(--line); padding: 16px 0; }
.anmeldelse:first-child { border-top: 0; }
.anmeldelse-billede { border-radius: var(--r-sm); }

/* ==========================================================================
   LEDIGHEDSKALENDEREN (C3, 2026-10-22)
   ==========================================================================
   partials/ledigheds-kalender.ejs tegner dagene, og public/js/kalender.js
   styrer klik og valg. Ingen af dem er ændret: her styles kun de klasser,
   de bruger, så kalenderen ligner designets.
   ========================================================================== */
.ledighed { margin: 0 0 8px; }
.ledighed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ledighed-nav { font-weight: 600; color: var(--pine); }
.ledighed-ugedage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.ledighed-ugedage span { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.ledighed-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.led-dag {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 5px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--cream);
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.led-dag:hover { border-color: var(--pine-600); }
.led-dag.is-tom { border: 0; background: transparent; cursor: default; }
.led-dag-nr { font-size: .8rem; font-weight: 600; }
.led-dag-pris { font-size: .7rem; color: var(--ok); font-weight: 600; }
.led-dag-pris-enhed { font-size: .62rem; color: var(--muted); }
.led-dag-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.led-prik { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--line-strong); }
.led-prik.is-ledig { background: var(--ok); }
.led-prik.is-booket { background: var(--clay); }
.led-prik.is-airbnb { background: #e78a5a; }
.led-prik.is-anden { background: var(--warn); }
.led-prik.is-lukket { background: var(--line-strong); }
.led-prik.is-saeson { background: var(--pine-600); }
.ledighed-forklaring { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: var(--muted); margin-top: 12px; }
.ledighed-forklaring > span { display: inline-flex; align-items: center; gap: 6px; }
.led-saeson-oversigt { margin-top: 14px; display: grid; gap: 6px; }
.led-saeson-periode { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; color: var(--ink-soft); }
.led-saeson-navn { font-weight: 600; }
.ugekalender { margin: 18px 0; }
.ugekalender-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ugekalender-aar { font-size: .85rem; color: var(--muted); }
.ugekalender-ramme { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ugekalender-tabel { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ugekalender-tabel th, .ugekalender-tabel td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.ugekalender-tabel th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ugekalender-tabel tr:last-child td { border-bottom: 0; }

/* Min side: kontooplysningerne står i to kolonner på brede skærme. */
.kontrakt-to-kolonner { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
@media (max-width: 700px) { .kontrakt-to-kolonner { grid-template-columns: 1fr; } }

/* ==========================================================================
   FAVORITTER OG "HUSE DU FØLGER" (del D, 2026-10-22)
   ==========================================================================
   Siden grupperer de gemte huse efter landsdel og viser de overvågninger,
   gæsten har oprettet. Klasserne er de gamle; udseendet er det nye.
   ========================================================================== */
.houses { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 26px; }
.empty-state { text-align: center; padding: 40px 22px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--cream); }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { color: var(--muted); max-width: 460px; margin: 0 auto 16px; }
.favorit-gruppe { margin-bottom: 34px; }
.favorit-gruppe-overskrift { display: flex; align-items: baseline; gap: 8px; font-size: 1.15rem; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.favorit-gruppe-tal { font-size: .9rem; color: var(--muted); font-weight: 400; }
.favorit-hjerte { color: var(--clay); }
.husvagt-liste { display: grid; gap: 14px; }
.husvagt-raekke { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.husvagt-billede { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-sm); }
.husvagt-tekst { display: grid; gap: 6px; }
.husvagt-titel { font-weight: 600; color: var(--pine); text-decoration: none; }
.husvagt-titel:hover { text-decoration: underline; }
.husvagt-handling { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 0; }
.husvagt-ledig { color: var(--ok); font-weight: 600; }
.badge--ok { background: var(--ok-100); color: var(--ok-700); }
.inline-form { display: inline; margin: 0; }
@media (max-width: 560px) { .husvagt-raekke { grid-template-columns: 1fr; } .husvagt-billede { width: 100%; height: 150px; } }

/* PROFILBILLEDE (2026-10-22) */
.avatar-raekke { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pine-100); background: var(--pine-50); }
.avatar--tom { display: inline-flex; align-items: center; justify-content: center; font: 600 2rem var(--font-display); color: var(--pine); }
.avatar-form { display: flex; align-items: center; gap: 10px; margin: 0; }

/* MINE DATA — farezonen (del D, 2026-10-22). Sletning af sin konto skal se
   anderledes ud end de neutrale kort, så den ikke rammes ved et uheld. */
.danger-zone { border-color: var(--danger); background: var(--danger-100); }
.danger-zone h2 { color: var(--danger); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #8f2b23; }
.gaesteanmeldelser-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; color: var(--ink-soft); }

/* ==========================================================================
   BOOKINGER (del D, 2026-10-22)
   ==========================================================================
   Gæstens og udlejerens bookinger: genveje, filtre, statistik og selve
   rækkerne med godkendelse og afvisning.
   ========================================================================== */
.dash-wrap { padding-top: 30px; padding-bottom: 60px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.dash-stats > * { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.bookinger-genveje { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.booking-liste { display: grid; gap: 12px; }
.booking-raekke { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.booking-raekke.booking-pending { border-left: 4px solid var(--warn); }
.booking-raekke-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.booking-nr { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.booking-meta { font-size: .9rem; color: var(--ink-soft); margin: 0 0 6px; }
.booking-gaest { font-size: .9rem; color: var(--ink-soft); }
.booking-handlinger { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.booking-godkendelse { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.booking-genganger { font-size: .8rem; color: var(--muted); }
.booking-besked-tekst { font-size: .92rem; color: var(--ink-soft); background: var(--pine-50); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0; }
.venter-detalje { margin-top: 12px; }
.chip-pending { border-color: var(--warn); background: var(--warn-100); color: var(--warn-700); }
.chip-advarsel { border-color: var(--danger); background: var(--danger-100); color: var(--danger); }
.afvis-form { display: grid; gap: 8px; margin-top: 8px; }
.input-sm { padding: 7px 10px; font-size: .88rem; }

/* ==========================================================================
   BESKEDER OG SAMTALEN (del D, 2026-10-22)
   ==========================================================================
   Listen over tråde og selve tråden. Klasserne er de gamle; udseendet er
   det nye. Formularen, vedhæftningerne og "ikke part" er urørte.
   ========================================================================== */
.samtale-side { padding-top: 26px; padding-bottom: 60px; }
.samtale-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.samtale-nr { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.samtale-som-udlejer { font-size: .8rem; color: var(--muted); }
.beskedcenter-hus { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-soft); }
.beskedcenter-foto { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
.beskedcenter-lukket { font-size: .8rem; color: var(--muted); }
.chat-ikke-part { font-size: .9rem; color: var(--muted); background: var(--pine-50); border-radius: var(--r-sm); padding: 12px 14px; }
.skabelon-indsæt { font-size: .86rem; }
.tilgaengelig-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.tilgaengelig-status { font-size: .86rem; color: var(--ink-soft); }
.sags-id-find { font-size: .86rem; color: var(--ink-soft); }

/* ==========================================================================
   EJERPORTALEN (E1, 2026-10-22)
   ==========================================================================
   Portallandingen (en liste af værktøjskort), huslisten og statistikken.
   Klasserne er de gamle; udseendet er det nye.
   ========================================================================== */
.page-head-dash { padding: 30px 0 6px; }
.portal-landing { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.portal-kort { display: block; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.portal-kort:hover { border-color: var(--pine-600); transform: translateY(-2px); }
.portal-navn { display: block; font-weight: 600; font-size: 1.02rem; color: var(--pine); margin-bottom: 4px; }
.portal-beskrivelse { display: block; font-size: .9rem; color: var(--muted); }
.portal-tal { display: inline-block; margin-top: 10px; font: 700 1.3rem var(--font-display); color: var(--clay); }
.portal-ny { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ok); background: var(--ok-100); border-radius: var(--r-full); padding: 2px 8px; margin-left: 6px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.dash-detaljer { margin-top: 10px; }
.dash-vaelg { display: grid; gap: 10px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.cottage-list { display: grid; gap: 12px; }
.cottage-card { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.cottage-img { width: 110px; height: 78px; object-fit: cover; border-radius: var(--r-sm); }
.cottage-info { display: grid; gap: 4px; }
.cottage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cottage-statistik { font-size: .86rem; color: var(--muted); }
.cottage-tips { font-size: .86rem; color: var(--ink-soft); background: var(--pine-50); border-radius: var(--r-sm); padding: 12px 14px; }
.badge--ok { background: var(--ok-100); color: var(--ok-700); }
.badge--advarsel { background: var(--warn-100); color: var(--warn-700); }
.nav-tal { font-size: .74rem; font-weight: 700; background: var(--clay); color: #fff; border-radius: var(--r-full); padding: 1px 6px; }
.beskedcenter-info, .beskedcenter-indgang { margin-top: 20px; }
.samtale-liste { display: grid; gap: 10px; }
.samtale-raekke { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.samtale-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.samtale-nr { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.samtale-hus { font-size: .85rem; color: var(--ink-soft); }
.samtale-preview { font-size: .9rem; color: var(--muted); margin: 4px 0 0; }
.samtale-dig { color: var(--pine); font-weight: 600; }
@media (max-width: 700px) { .cottage-card { grid-template-columns: 1fr; } .cottage-img { width: 100%; height: 150px; } }

/* ==========================================================================
   HUSFORMULAR, KALENDER OG ØKONOMI (E2, 2026-10-22)
   ========================================================================== */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.billed-admin { display: grid; gap: 12px; }
.billed-galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.billed-kort, .billed-admin-kort { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.billed-kort img, .billed-admin-kort img { width: 100%; height: 110px; object-fit: cover; display: block; }
.billed-maerke, .billed-admin-status { font-size: .75rem; color: var(--muted); padding: 6px 8px; display: block; }
.drop-zone { border: 2px dashed var(--line-strong); border-radius: var(--r); padding: 26px; text-align: center; color: var(--muted); background: var(--cream); }
.drop-zone:hover { border-color: var(--pine-600); }
.ical-kilder { display: grid; gap: 8px; }
.ical-form { display: grid; gap: 10px; }
.kal-tilstande { font-size: .82rem; color: var(--muted); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger-text { color: var(--danger); }
.btn--xs { padding: 4px 9px; font-size: .78rem; }
.notice--info { border-left-color: var(--pine-600); background: var(--pine-50); }

/* ==========================================================================
   ADMIN-PANElet (F1, 2026-10-22)
   ==========================================================================
   Rækker, tabeller og handlingsknapper. Klassenavnene er de gamle; udseendet
   er det nye, så panelets funktioner er urørte.
   ========================================================================== */
.admin-afsnit { margin-bottom: 34px; }
.admin-to-spalter { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.admin-liste { display: grid; gap: 10px; }
.admin-raekke { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.admin-raekke-sm { padding: 10px 14px; }
.admin-raekke-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-nr { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.admin-uddrag { font-size: .9rem; color: var(--muted); margin: 6px 0 0; }
.admin-handlinger { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.admin-bruger-form { display: grid; gap: 10px; }
.admin-bruger-felt { display: grid; gap: 4px; }
.admin-bruger-felt label { font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.admin-bruger-felt input, .admin-bruger-felt select { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: inherit; font-size: .9rem; }
.admin-bruger-meta { font-size: .82rem; color: var(--muted); }
.admin-bruger-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-kode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; background: var(--pine-50); border-radius: 5px; padding: 2px 6px; }
.admin-soeg { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.chip--ok { border-color: var(--ok); background: var(--ok-100); color: var(--ok-700); }
@media (max-width: 900px) { .admin-to-spalter { grid-template-columns: 1fr; } }

/* ADMIN: HUSE, BILLEDER, KALENDER (F2, 2026-10-22) */
.admin-hus-liste { display: grid; gap: 10px; }
.admin-hus-kort { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.admin-hus-kort img { width: 90px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.admin-omraade-raekke { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.admin-omraade-raekke:last-child { border-bottom: 0; }
.admin-kalender-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
@media (max-width: 700px) { .admin-hus-kort { grid-template-columns: 1fr; } }

/* ADMIN: REGNSKAB, BOOKINGER, GODKENDELSER (F3, 2026-10-22) */
.regnskab-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.regnskab-tabel th, .regnskab-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.regnskab-tabel th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.regnskab-tabel td.tal, .regnskab-tabel th.tal { text-align: right; font-variant-numeric: tabular-nums; }
.regnskab-sum { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 2px solid var(--pine); font-weight: 700; }
.admin-godkendelse { background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px; }
.admin-svindel-raekke { background: var(--danger-100); border: 1px solid var(--danger); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; }
.chip--advarsel { border-color: var(--danger); background: var(--danger-100); color: var(--danger); }

/* .btn-sm er den gamle skals lille knap. Prøven N208 kræver klassenavnet
   på headerens knap, så den får samme udseende som .btn--sm. */
.btn-sm { padding: 8px 14px; font-size: .87rem; }

/* ==========================================================================
   FLYTTET FRA style.css (G, 2026-10-22)
   ==========================================================================
   "Senest sete", sammenligningsknappen og snakboblen blev født i den gamle
   skal og har deres CSS der. Reglerne herunder er HEMMET UD af style.css med
   et script — ikke skrevet om — så udseendet er præcis som før. Da de nye
   sider ikke henter style.css, skal de bo her for at virke.
   ========================================================================== */
/* --- Hjertet på husets kort (2026-10-11 · omlagt N199, 2026-10-16) --------
   HJERTET LIGGER NU I SIN EGEN FORMULAR UDEN FOR KORTETS <a>.
   Før var det en <span> inde i linket, og klikket blev fanget af JavaScript —
   men scriptet blev kun indlæst på ÉN side, så på forsiden og i søgeresultatet
   navigerede klikket i stedet for at gemme (målt). En knap inde i et link er
   desuden ugyldig HTML, og browseren ville løfte den ud.
   Løsningen er den SAMME, som .sammenlign-valg bruger på samme billede:
   formularen lægges oven på kortet med position:absolute. Derfor er
   .kort-wrapper nu det, der står i gitteret, og .card fylder den. */
.kort-wrapper {
position: relative; display: flex;
}
/* --- Sammenlign sommerhuse --- */

.senest-sete {
border-top: 1px solid var(--line);
}
.card-img .sammenlign-valg {
position: absolute;
  right: .55rem;
  bottom: .55rem;
  z-index: 2;
  max-width: calc(100% - 1.1rem);
  padding: .42rem .65rem;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--deep);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.card-img .sammenlign-valg.er-valgt {
background: var(--brand);
  color: #fff;
}
.card-img .sammenlign-valg:focus-visible,
.sammenlign-fjern:focus-visible {
outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.chat-boble {
border: 1px solid var(--line);
  border-radius: 14px;
  padding: .6rem .85rem;
  background: #fff;
}
.chat-besked.er-min .chat-boble {
background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
/* ==========================================================================
   DEN FLYDENDE CHAT-KNAP (sag N178, tilføjet 2026-10-15)
   ==========================================================================
   Den klassiske chat-boble nederst i højre hjørne og det lille panel, den
   åbner. Knappen og panelet tegnes af views/partials/chat-boble.ejs, som
   footer.ejs inkluderer — altså BÅDE computer- og mobilvisningen.

   TRE TING, DER IKKE MÅ GLIPPES HER, OG SOM HAR HVER SIN GRUND:
     • SIKRE OMRÅDER: `env(safe-area-inset-*)` holdes ude af skærmens
       rundinger og af hjemmeindikatoren på en telefon. Samme greb som
       .sammenlign-bar (se den regel), så de to faste bjælker ikke ligger
       oveni hinanden eller ude i kanten.
     • PANELET MÅ IKKE FYLDE SKÆRMEN: højden er begrænset til 70vh (60vh på en
       lille skærm), og indholdet ruller indeni. En gæst skal kunne se, at der
       ER en side bag panelet, og kunne lukke det.
     • LUKKET BETYDER LUKKET: panelet vises KUN, når scriptet har sat
       data-chat-boble-aaben="1". Er JavaScript slået fra, står panelet derfor
       ikke åbent hen over indholdet — knappen er et <a href> og fører til
       /chat, hvor hele fladen står åben. Se public/js/chat-boble.js. */

.chat-boble-launcher {
position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  /* Boksen må ikke fange klik uden for knappen og panelet. */
  pointer-events: none;
}
.chat-boble-launcher > * {
pointer-events: auto;
}
.chat-boble-knap {
display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.05rem;
  border: 1px solid var(--deep);
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(20, 40, 48, .28);
  cursor: pointer;
}
/* ==========================================================================
   BOBLEN ER BLÅ — IKKE RØD (sag N208, 2026-10-16, ejerens anden rettelse)
   ==========================================================================
   Ejerens ord: *"Chat-boblen skal være blå, den er ikke pæn i rød."*
   FARVEN ER `--deep` (`#0f4c5c`) — familiens dybe blå, den SAMME som knappens
   egen bund allerede brugte, og den samme som panelets aktive punkt
   (`.admin-nav > a.is-aktiv`) og fodens plade. Ingen ny hex-kode.
   Den LYSE slægtning `--deep-2` (`#14657a`) bruges til musen/fokus og til
   gæstens udgave af boblen, så de to roller stadig kan skelnes: en gæst får den
   lyse blå, en administrator den dybe — og forskellen er desuden prikken kontra
   tallet. MÅLT (WCAG-formlen, sRGB):
     hvid tekst på `--deep`   = **9,51:1**  (over AA 4,5:1)
     hvid tekst på `--deep-2` = **6,62:1**
   Den RØDE brand-farve er væk fra boblen — også fra musen, fokus-rammen og
   administrator-udgaven. Vagten i `scripts/test-sider.js` afsnit 4i fejler,
   hvis `--brand` kommer tilbage som baggrund i boblen. */
.chat-boble-knap:hover,
.chat-boble-knap:focus-visible {
background: var(--deep-2);
  border-color: var(--deep-2);
  color: #fff;
}
.chat-boble-knap:focus-visible {
outline: 2px solid var(--deep-2);
  outline-offset: 2px;
}
.chat-boble-ikon {
display: inline-flex;
}
.chat-boble-knap-tekst {
white-space: nowrap;
}
.chat-boble-panel {
display: flex;
  flex-direction: column;
  /* Bredden er den samme som et lille panel på en computer og fylder ikke
     skærmen på en telefon; `min(...)` klarer begge uden en medieforespørgsel. */
  width: min(22rem, calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
  /* HØJDEN ER BEGRÆNSET: panelet må ikke dække hele skærmen. */
  max-height: min(70vh, 34rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(20, 40, 48, .28);
}
/* LUKKET er udgangspunktet, og kun scriptet åbner det. */
.chat-boble-launcher[data-chat-boble-aaben="0"] .chat-boble-panel {
display: none;
}
/* PANELETS OVERSKRIFT ER OGSÅ BLÅ (N208). Baggrunden stod før som
   `var(--soft)` — og `--soft` findes IKKE i `:root` (målt med en søgning i
   hele træet), så overskriften havde ingen baggrund og flød sammen med
   panelets hvide krop. Nu bærer den familiens dybe blå, og titlen og
   lukke-knappen står i hvid: hvid mod `--deep` er målt til **9,51:1**. */
.chat-boble-hoved {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--deep-2);
  background: var(--deep);
}
.chat-boble-titel {
margin: 0;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
}
/* Lukke-knappen er et RIGTIGT <button> og skal kunne rammes med en finger:
   mindst 44 × 44 px, som er den størrelse, retningslinjerne peger på.
   Den står på den blå overskrift, så både krydset og dets fokus-ramme er
   hvide — en `--deep-2`-ramme på `--deep` ville kun give 1,44:1. */
.chat-boble-luk {
width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.chat-boble-luk:hover {
background: rgba(255, 255, 255, .18);
}
.chat-boble-luk:focus-visible {
outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Indholdet ruller INDE i panelet — det er hele grunden til, at panelet kan
   have en begrænset højde uden at skjule skrivefeltet. */
.chat-boble-indhold {
padding: .8rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Fladen er den samme som på /chat. Inde i det lille panel er der ikke plads
   til de store mellemrum, og overskriften gentages ikke: den står i panelets
   hoved, og en skærmlæser får den gennem panelets aria-label. */
.chat-boble-indhold .chat-flade {
margin-top: 0;
}
.chat-boble-indhold .chat-titel {
display: none;
}
.chat-boble-indhold .chat-hus {
margin-bottom: .5rem;
}
.chat-boble-indhold .chat-form {
margin-top: .8rem;
}
.chat-boble-indhold .chat-form textarea {
max-height: 8rem;
}
.chat-boble-hjaelp {
margin: .7rem 0 0;
  font-size: .84rem;
  color: var(--muted);
}
/* Support-formularen i panelet. "Afslut samtale" er fjernet sammen med boblens
   udlejer-tilstand (sag N182): boblen er KUN support, så der er intet at
   afslutte eller skifte til. Reglerne for den findes derfor ikke længere. */
.chat-boble-hvem {
margin: 0 0 .5rem;
  font-weight: 600;
}
.chat-boble-supportform {
margin-top: .5rem;
}
.chat-boble-handlinger {
margin-top: .6rem;
}
.chat-boble-handlinger .help-text {
display: block; margin-top: .4rem;
}
/* Boblen har ÉN tilstand: SUPPORT til Vakano. Klassen .er-support står på
   launcher'en, så en senere ændring kan se, at valget er bevidst — der findes
   ingen .er-samtale mere.
   N208: FARVEN ER FAMILIENS BLÅ, IKKE DEN DÆMPEDE GRÅ. Ejerens ord: *"Chat-
   boblen skal være blå."* Gæsten får den LYSE blå (`--deep-2`, målt 6,62:1 med
   hvid tekst), administratoren den DYBE (`--deep`, 9,51:1) — se reglerne ved
   `.chat-boble-knap`. Musen over gæstens boble går den anden vej (mørkere),
   fordi to regler med samme vægt ellers ville slås om farven. */
.chat-boble-launcher.er-support .chat-boble-knap {
background: var(--deep-2);
  border-color: var(--deep-2);
}
.chat-boble-launcher.er-support .chat-boble-knap:hover,
.chat-boble-launcher.er-support .chat-boble-knap:focus-visible {
background: var(--deep);
  border-color: var(--deep);
}
.chat-boble-knap-tekst {
display: none;
}
.chat-boble-knap {
padding: .8rem;
}
.chat-besked.er-system .chat-boble {
background: var(--sand);
  border-style: dashed;
  border-color: var(--deep-2);
}
/* ==========================================================================
   SUPPORT-CHATTEN (sag N191, 2026-10-16)
   ==========================================================================
   Nye klasser til: prikken i toppen af boblen, de tre tilstande i vinduet,
   indgangsformularen ("Chat nu") og administratorens Chat-liste og -tråd.
   Alle farver kommer fra de variabler, resten af sitet bruger, og tilstanden
   står ALTID også med ord — farven er en genvej og ikke den eneste grund til,
   at noget kan læses (samme valg som A2-skærmen i N187 tog).
   ========================================================================== */

/* Prikken i TOPPEN af boblen: grøn når nogen er der, rød når ingen er. Den
   sidder i knappen og ikke i panelet, så den kan ses, FØR man åbner.

   MÅLT PÅ DEN NYE BLÅ BAGGRUND (N208, 2026-10-16) — og derfor RINGEN:
   prikken alene mod knappen er grøn `#2e7d32` mod `--deep-2` = **1,31:1** og
   rød `#b3261e` mod `--deep-2` = **1,46:1**. Begge drukner. Den hvide ring
   løfter dem: grøn mod hvid = **5,13:1**, rød mod hvid = **6,53:1**, og hvid
   ring mod `--deep-2` = **6,62:1** (mod `--deep` = 9,51:1). *En grøn prik på en
   mørk blå er ikke en grøn prik; den er en plet — ringen er det, der gør den
   til en prik.* Ringen er 2 px hvid om en prik på 0,55 rem. */
.chat-boble-priklaas {
position: absolute;
  top: -2px;
  right: 2px;
  display: inline-flex;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
}
.chat-boble-knap {
position: relative;
}
.chat-boble-prik {
width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--muted);
}
.chat-boble-prik.er-online {
background: #2e7d32;
}
.chat-boble-prik.er-offline {
background: #b3261e;
}
.chat-boble-status,
.chat-offline {
display: flex;
  align-items: center;
  gap: .4rem;
  margin: .3rem 0 .6rem;
  font-size: .9rem;
}
.chat-boble-status.er-offline {
color: var(--muted);
}
/* Vinduet i panelet: beskedlisten ruller, skrivefeltet står fast nederst. */
.chat-boble-vindue {
display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
}
.chat-boble-vindue .chat {
max-height: 42vh; overflow-y: auto;
}
.chat-boble-vindue .chat-form textarea {
rows: 2;
}
/* ==========================================================================
   N191 (2026-10-16), efter ejerens præcisering: OFFLINE-HENVISNINGEN OG
   CHAT-CENTRALEN
   ==========================================================================
   To ting: linjen i boblen, der sender den besøgende videre til
   kontaktformularen (rød prik = henvisning, grøn prik = chat i boblen), og de
   nye markeringer i administratorens central (søgefeltet, "i tråden nu" og
   klokkeslættet). Farverne kommer fra de variabler, resten af sitet bruger, og
   tilstanden står ALTID også med ord. */

.chat-boble-offline-linje {
margin: .3rem 0 .6rem;
  font-weight: 600;
}
/* ==========================================================================
   N191, 2026-10-16: BOBLEN FOR EN ADMINISTRATOR (tallet og køen)
   ==========================================================================
   For en administrator er prikken ombyttet med et TAL — hvor mange samtaler
   venter der svar på — og panelet viser KØEN: de ældste ventende øverst. Det
   er de samme farver som resten af sitet; tallet er rødt, når nogen venter. */

/* ADMINISTRATORENS TAL PÅ DEN BLÅ KNAP (N208). Tallet stod før i `--deep` —
   den SAMME farve, som knappen nu har, altså usynligt. Det er derfor et LYS
   mærke med blå tekst (hvid mod `--deep` = 9,51:1), og når nogen venter,
   bliver det rødt med en hvid ring: rødt mod `--deep` er kun 1,46:1, så uden
   ringen ville tallet forsvinde i knappen. */
.chat-boble-tal {
position: absolute;
  top: -6px;
  right: -4px;
  min-width: 1.25rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #fff;
  color: var(--deep);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}
.chat-boble-tal.er-venter {
background: #b3261e;
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
}
.chat-boble-ko {
list-style: none; margin: .3rem 0 .7rem; padding: 0;
}
.chat-boble-ko li {
border-bottom: 1px solid var(--line, #e6e6e6);
}
.chat-boble-ko a {
display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .1rem;
  text-decoration: none;
  color: inherit;
}
.chat-boble-ko a:hover,
.chat-boble-ko a:focus-visible {
background: rgba(0, 0, 0, .04);
}
.chat-boble-ko-tid {
color: #7a4b00; font-size: .82rem; white-space: nowrap;
}
/* For en administrator er boblen ikke en gæste-indgang: panelet er
   chat-centralen, og knappen bærer et tal i stedet for en prik. Klassen sætter
   kun det ydre mærke, så en CSS-regel kan skelne de to.
   N208: ADMINISTRATORENS BOBLE ER DEN DYBE BLÅ, ikke den røde brand-farve.
   Ejerens ord: *"Chat-boblen skal være blå, den er ikke pæn i rød."* Det var
   netop denne regel, der gjorde boblen rød for hende. */
.chat-boble-launcher.er-admin .chat-boble-knap {
background: var(--deep);
  border-color: var(--deep);
}
.chat-boble-launcher.er-admin .chat-boble-knap:hover,
.chat-boble-launcher.er-admin .chat-boble-knap:focus-visible {
background: var(--deep-2);
  border-color: var(--deep-2);
}

/* LANDINGSSIDERNE (G, 2026-10-22). De 12 sprog- og områdesider var de sidste,
   der brugte den gamle skal. Her får deres egne klasser det nye udseende. */
.hero-sub { font-size: 1.05rem; color: var(--ink-soft); max-width: 640px; }
.landing-omraader { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 16px 0 8px; }
.landing-omraader a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); text-decoration: none; color: var(--pine); font-weight: 600; }
.landing-omraader a:hover { border-color: var(--pine-600); }
.info-card.landing-faq { background: var(--pine-50); border-color: var(--pine-100); }


/* ==========================================================================
   EJERPORTAL OG ADMIN (H2, 2026-10-22)
   ==========================================================================
   Samme designsprog som resten: cremeflader, tynde linjer, runde hjørner,
   Fraunces til overskrifter og de samme farver. Reglerne står i DEL 2 og
   vinder derfor over de gamle komponentregler længere oppe.
   ========================================================================== */

/* ---------- Sektioner og overskrifter ---------- */
.admin-afsnit, .admin-undersektion { margin-bottom: 30px; }
.admin-undersektion h2, .admin-undersektion h3 { margin-bottom: 10px; }
.admin-afsnit > h2 { font-size: 1.25rem; margin-bottom: 12px; }

/* ---------- Tabeller (den største familie) ---------- */
.admin-tabel, .regnskab-tabel, .aarsoversigt-tabel, .sys-tabel, .bilag-tabel,
.ophold-tabel, .pakkeliste-tabel, .maaned-tabel, .svar-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .89rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.admin-tabel th, .regnskab-tabel th, .aarsoversigt-tabel th, .sys-tabel th,
.bilag-tabel th, .ophold-tabel th, .pakkeliste-tabel th, .maaned-tabel th, .svar-tabel th {
  text-align: left;
  padding: 9px 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--pine-50);
  border-bottom: 1px solid var(--line);
}
.admin-tabel td, .regnskab-tabel td, .aarsoversigt-tabel td, .sys-tabel td,
.bilag-tabel td, .ophold-tabel td, .pakkeliste-tabel td, .maaned-tabel td, .svar-tabel td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.admin-tabel tr:last-child td, .regnskab-tabel tr:last-child td,
.aarsoversigt-tabel tr:last-child td, .sys-tabel tr:last-child td,
.bilag-tabel tr:last-child td, .ophold-tabel tr:last-child td,
.pakkeliste-tabel tr:last-child td, .maaned-tabel tr:last-child td,
.svar-tabel tr:last-child td { border-bottom: 0; }
.admin-tabel tbody tr:hover, .regnskab-tabel tbody tr:hover { background: var(--pine-50); }
.admin-tabel-handlinger { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* ---------- Kort og paneler ---------- */
.admin-kort, .panel, .kort, .stat, .opfyldning-kort, .kal-kort, .partner-kort,
.rengoring-kort, .klargoering-kort, .svar-kort, .vedligehold-kort {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
}
.admin-kort + .admin-kort, .panel + .panel { margin-top: 12px; }
.stat, .opfyldning-kort { display: grid; gap: 4px; }
.stat-tal, .stat-vaerdi { font: 700 1.5rem var(--font-display); color: var(--pine); }

/* ---------- Badges og chips ---------- */
.badge, .chip { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; border-radius: var(--r-full); padding: 3px 9px; border: 1px solid transparent; }
.badge-ok, .chip-confirmed, .chip-godkendt, .chip-aktiv, .chip-ok { background: var(--ok-100); color: var(--ok-700); border-color: var(--ok); }
.badge-advarsel, .chip-pending, .chip-afventer { background: var(--warn-100); color: var(--warn-700); border-color: var(--warn); }
.badge-fejl, .chip-cancelled, .chip-afvist, .chip-annulleret { background: var(--danger-100); color: var(--danger); border-color: var(--danger); }
.badge-ny, .chip-ny { background: var(--clay-100); color: var(--clay-dark); border-color: var(--clay); }
.badge-muted, .chip-udloebet, .chip-udløbet, .chip-muted { background: var(--line); color: var(--ink-soft); border-color: var(--line-strong); }

/* ---------- Formularer i portalen og panelet ---------- */
.form-hjaelp, .form-submit { font-size: .82rem; color: var(--muted); }
.form-submit { margin-top: 10px; }
.field, .form-group, .form-row, .form-raekke { display: grid; gap: 6px; }
.form-raekke { grid-template-columns: 1fr 1fr; gap: 12px; }
.login-form label, .form-group label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.login-form input, .form-group input, .form-group select, .form-group textarea,
.kalkulator-form input, .kalkulator-form select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-family: inherit;
  font-size: .92rem;
  color: var(--ink);
}
.login-form input:focus, .form-group input:focus, .form-group select:focus,
.form-group textarea:focus, .kalkulator-form input:focus {
  outline: none;
  border-color: var(--pine-600);
  box-shadow: 0 0 0 3px var(--pine-100);
}

/* ---------- Kontrakter ---------- */
.kontrakt-arkiv, .kontrakt-liste { display: grid; gap: 10px; }
.kontrakt-kort, .kontrakt-raekke { background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--pine-600); border-radius: var(--r); padding: 14px 16px; }
.kontrakt-status { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- Kalender og sæson ---------- */
.kal-gitter, .kalender-gitter, .saeson-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kal-dag, .kalender-dag { border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-height: 60px; background: var(--cream); font-size: .82rem; }
.kal-dag.is-optaget, .kalender-dag.is-optaget { background: var(--danger-100); border-color: var(--danger); }
.saeson-raekke { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }

/* ---------- Chat og henvendelser ---------- */
.chat-liste, .henv-liste, .samtale-liste { display: grid; gap: 10px; }
.chat-raekke, .henv-raekke { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.chat-raekke.er-ulaest, .henv-raekke.er-ulaest { border-left: 4px solid var(--clay); background: var(--clay-100); }
.chat-soeg, .admin-chat-soeg, .henv-soeg { display: flex; gap: 8px; margin-bottom: 14px; }

/* ---------- Rengøring, klargøring, vedligehold ---------- */
.rengoring-raekke, .klargoering-raekke, .vedligehold-raekke {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.rengoring-raekke:last-child, .klargoering-raekke:last-child, .vedligehold-raekke:last-child { border-bottom: 0; }

/* ---------- Knapper, der stadig hedder noget gammelt ---------- */
.btn-outline, .btn-ghost, .btn-danger { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.btn-outline:hover, .btn-ghost:hover { border-color: var(--pine-600); color: var(--pine); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-xs { padding: 3px 8px; font-size: .76rem; }

/* ---------- Login-formularen (portalen) ---------- */
.login-wrap, .login-kort { display: grid; gap: 12px; }
.login-kort { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.login-fod { font-size: .82rem; color: var(--muted); }

/* ---------- Udskrift: rapporten skal stadig kunne printes ---------- */
@media print {
  .admin-tabel, .regnskab-tabel, .aarsoversigt-tabel { border-color: #999; }
  .admin-tabel th, .regnskab-tabel th { background: #eee; color: #000; }
}


/* ==========================================================================
   H3-RETTELSER: bilagsfelt og headerbredde (2026-10-22)
   ========================================================================== */

/* 1) Bilagsfeltet ("Vedhæft kvittering") står UDEN FOR sidens container og
      fyldte derfor hele skærmens bredde. Nu har det samme mål som indholdet. */
.bilag-felt {
  max-width: 1180px;
  margin: 18px auto;
  padding: 14px 16px;
  background: var(--pine-50);
  border: 1px solid var(--pine-100);
  border-radius: var(--r);
  display: grid;
  gap: 8px;
  box-sizing: border-box;
}
.bilag-titel {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pine-700);
}
.bilag-knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.bilag-forhaandsvisning { max-width: 220px; border-radius: var(--r-sm); border: 1px solid var(--line); }

/* 2) Headeren må ombryde, når der er mange menupunkter (admin). Den skal
      aldrig skubbe siden bredere end skærmen. */
.header__inner { flex-wrap: wrap; row-gap: 8px; }
.header__nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
@media (max-width: 1180px) {
  .header__link { padding: 6px 9px; font-size: .92rem; }
  .header__inner { gap: 14px; }
}


/* ==========================================================================
   H4 — RESTEN AF FAMILIERNE (2026-10-22)
   ==========================================================================
   Sæson, chat, kontrakter, henvendelser, rengøring, kalender, partnere og
   svar. Klassenavnene er visningernes egne; udseendet er det nye designs.
   ========================================================================== */

/* ---------- SÆSON ---------- */
.saeson-visning { display: grid; gap: 18px; }
.saeson-liste, .saeson-perioder-liste { display: grid; gap: 10px; }
.saeson-periode { background: var(--cream); border: 1px solid var(--line); border-left: 4px solid var(--pine-600); border-radius: var(--r); padding: 14px 16px; }
.saeson-periode-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.saeson-periode-navn { font-weight: 600; color: var(--pine); }
.saeson-periode-aar, .saeson-periode-label, .saeson-label { font-size: .82rem; color: var(--muted); }
.saeson-periode-nu { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--ok-100); color: var(--ok-700); border-radius: var(--r-full); padding: 2px 8px; }
.saeson-tal { font: 700 1.4rem var(--font-display); color: var(--pine); }
.saeson-form, .saeson-periode-form { display: grid; gap: 10px; }
.saeson-knapper, .saeson-periode-knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.saeson-naeste { background: var(--pine-50); border-radius: var(--r); padding: 12px 14px; font-size: .9rem; }
.saeson-linje { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.saeson-dato, .saeson-datoer, .saeson-uge { font-size: .86rem; color: var(--ink-soft); }
.saeson-naetter, .saeson-pris { font-variant-numeric: tabular-nums; }
.saeson-status { font-size: .8rem; color: var(--muted); }
.saeson-bekraeft { background: var(--ok-100); color: var(--ok-700); font-size: .8rem; border-radius: var(--r-full); padding: 2px 8px; }
.saeson-prik { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--pine-600); }
.saeson-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.saeson-tabel th, .saeson-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.saeson-maerke { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.saeson-note { font-size: .84rem; color: var(--muted); }
.saeson-celle { border: 1px solid var(--line); border-radius: 8px; padding: 6px; text-align: center; }
.saeson-celle-tekst { font-size: .72rem; color: var(--muted); }

/* ---------- CHAT ---------- */
.chat-side { padding-top: 24px; padding-bottom: 60px; }
.chat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.chat-overskrift { font-size: 1.1rem; font-weight: 600; color: var(--pine); margin: 0; }
.chat-sags-id { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.chat-online { color: var(--ok); font-size: .82rem; }
.chat-offline-vej, .chat-lov { font-size: .8rem; color: var(--muted); }
.chat-dag { text-align: center; font-size: .74rem; color: var(--muted); margin: 12px 0 6px; }
.chat-modpart { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
.chat-afsender { font-weight: 600; }
.chat-klokke { font-size: .74rem; color: var(--muted); }
.chat-tekst { font-size: .93rem; color: var(--ink); }
.chat-prik { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ok); }
.chat-ingen-hus { background: var(--pine-50); border-radius: var(--r); padding: 12px 14px; font-size: .9rem; }
.chat-ingen-hus-linje { font-size: .84rem; color: var(--muted); }
.chat-veje, .chat-hus-kort { display: grid; gap: 8px; }
.chat-vej { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; background: var(--cream); }
.chat-vej-udlejer { font-weight: 600; color: var(--pine); }
.chat-vej-support { font-size: .84rem; color: var(--muted); }
.chat-hus-hvem, .chat-hus-tilstand, .chat-indgang-hvem { font-size: .84rem; color: var(--ink-soft); }
.chat-hus-knap, .chat-indgang { display: inline-block; margin-top: 6px; }
.chat-form-handlinger { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.chat-tom { text-align: center; color: var(--muted); padding: 26px; }

/* ---------- KONTRAKTER ---------- */
.kontrakt-form, .kontrakt-parter { display: grid; gap: 12px; }
.kontrakt-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kontrakt-tabel th, .kontrakt-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.kontrakt-bemerkning, .kontrakt-note, .kontrakt-revision { font-size: .84rem; color: var(--muted); }
.kontrakt-handlinger { display: flex; flex-wrap: wrap; gap: 8px; }
.kontrakt-tidsaftale, .kontrakt-pris, .kontrakt-i-alt { font-size: .92rem; }
.kontrakt-i-alt { font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; }
.kontrakt-fritekst, .kontrakt-vilkaar { font-size: .9rem; color: var(--ink-soft); white-space: pre-line; }
.kontrakt-underskrift { border-top: 1px dashed var(--line-strong); margin-top: 16px; padding-top: 10px; font-size: .86rem; }
.kontrakt-streg { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.kontrakt-faner { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.kontrakt-dok-preview { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; font-size: .88rem; }
.kontrakt-dok-preview-head { font: 700 1.25rem var(--font-display); color: var(--pine); }
.kontrakt-dok-preview-sub { font-size: .84rem; color: var(--muted); }
.kontrakt-dok-preview-meta, .kontrakt-dok-preview-parter { font-size: .86rem; color: var(--ink-soft); }
.kontrakt-dok-preview-tabel { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 10px 0; }
.kontrakt-dok-preview-total { display: flex; justify-content: space-between; font-weight: 700; border-top: 2px solid var(--pine); padding-top: 8px; }
.kontrakt-dok-preview-note, .kontrakt-dok-preview-fod { font-size: .78rem; color: var(--muted); }
.kontrakt-dok-preview-underskrifter { border-top: 1px dashed var(--line-strong); margin-top: 18px; padding-top: 12px; font-size: .84rem; }

/* ---------- HENVENDELSER ---------- */
.henv-filtre, .henv-filter-raekke { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.henv-filter-navn, .henv-filter { font-size: .84rem; color: var(--ink-soft); }
.henv-sortering { font-size: .84rem; color: var(--muted); }
.henv-kort { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.henv-kort-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.henv-hus, .henv-hus-navn { font-weight: 600; color: var(--pine); }
.henv-badge { font-size: .74rem; font-weight: 700; border-radius: var(--r-full); padding: 2px 8px; background: var(--pine-50); color: var(--pine-700); }
.henv-meta, .henv-fakta, .henv-tid, .henv-alder { font-size: .82rem; color: var(--muted); }
.henv-frist { font-size: .82rem; color: var(--ink-soft); }
.henv-frist-overskredet { color: var(--danger); font-weight: 600; }
.henv-frist-snart { color: var(--warn-700); font-weight: 600; }
.henv-uddrag { font-size: .9rem; color: var(--ink-soft); margin: 6px 0; }
.henv-handling, .henv-venter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* ---------- RENGØRING ---------- */
.rengoring-side { padding-top: 24px; padding-bottom: 60px; }
.rengoring-side-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rengoring-taeller { font: 700 1.2rem var(--font-display); color: var(--pine); }
.rengoring-vaelg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rengoring-grupper { display: grid; gap: 18px; }
.rengoring-gruppe { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.rengoring-punkter { display: grid; gap: 10px; margin-top: 10px; }
.rengoring-punkt-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.rengoring-punkt-foto, .rengoring-preview { max-width: 240px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.rengoring-foto-aabn, .rengoring-aendre, .rengoring-upload { font-size: .84rem; }
.rengoring-lightbox { position: fixed; inset: 0; background: rgba(15,35,28,.82); display: grid; place-items: center; z-index: 90; }
.rengoring-lightbox-indhold { max-width: 90vw; max-height: 86vh; border-radius: var(--r); }
.rengoring-punkt-form { display: grid; gap: 8px; }
.rengoring-dato, .rengoring-fil { font-size: .84rem; color: var(--muted); }
.rengoring-knapper { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- KALENDER (Ejerportal) ---------- */
.kal-dag-nr { font-size: .78rem; font-weight: 600; }
.kal-dag-pris { font-size: .68rem; color: var(--ok); }
.kal-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.kal-formularer, .kal-liste { display: grid; gap: 10px; }
.kal-liste-tom { font-size: .88rem; color: var(--muted); padding: 12px; }
.kal-liste-dato, .kal-liste-note { font-size: .84rem; color: var(--ink-soft); }
.kal-liste-pris { font-variant-numeric: tabular-nums; font-weight: 600; }
.kal-dag-valgt-mark, .kal-valg-kort { outline: 2px solid var(--pine-600); border-radius: 8px; }
.kal-valg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kal-status { font-size: .8rem; color: var(--muted); }
.kal-handlinger { display: flex; gap: 8px; flex-wrap: wrap; }
.kal-airbnb, .kal-airbnb-hent, .kal-airbnb-status, .kal-airbnb-link { font-size: .84rem; color: var(--ink-soft); }

/* ---------- PARTNERE ---------- */
.partner-liste { display: grid; gap: 12px; }
.partner-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.partner-navn { font-weight: 600; color: var(--pine); }
.partner-meta, .partner-rabat, .partner-ansvar, .partner-oplysning { font-size: .84rem; color: var(--muted); }
.partner-beskrivelse, .partner-regler, .partner-aftale, .partner-betingelser, .partner-vilkaar, .partner-kontakt { font-size: .9rem; color: var(--ink-soft); }
.partner-ikke-videregivet { background: var(--pine-50); border-radius: var(--r-sm); padding: 10px 12px; font-size: .86rem; }

/* ---------- SVARBIBLIOTEK ---------- */
.svar-side { padding-top: 24px; padding-bottom: 60px; }
.svar-liste, .svar-form { display: grid; gap: 12px; }
.svar-kort-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.svar-afsnit { font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 14px; }
.svar-tekst { font-size: .92rem; color: var(--ink-soft); }
.svar-handlinger, .svar-knapraekke { display: flex; gap: 8px; flex-wrap: wrap; }
.svar-felt { display: grid; gap: 6px; }
.svar-status { font-size: .8rem; color: var(--muted); }
.svar-raekke { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }


/* ==========================================================================
   H5 — DEN LANGE HALE (2026-10-22)
   ==========================================================================
   Små komponenter, der endnu ikke havde fået et nyt udseende. De deler alle
   designets flader, linjer, runde hjørner og typografi.
   ========================================================================== */

/* ---------- Admin: chat, menu, tal, indbakke, log ---------- */
.admin-chat-liste { display: grid; gap: 8px; }
.admin-chat-raekke, .admin-chat-link { display: flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; text-decoration: none; color: inherit; }
.admin-chat-raekke.er-ulaest { border-left: 4px solid var(--clay); }
.admin-chat-navn { font-weight: 600; color: var(--pine); }
.admin-chat-rolle, .admin-chat-adresse, .admin-chat-sidste, .admin-chat-tid, .admin-chat-klokke, .admin-chat-ventet { font-size: .82rem; color: var(--muted); }
.admin-chat-ulaest { background: var(--clay); color: #fff; border-radius: var(--r-full); font-size: .72rem; font-weight: 700; padding: 1px 7px; }
.admin-chat-maerke, .admin-chat-ref, .admin-chat-fund { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.admin-chat-flade { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.admin-chat-historik, .admin-chat-historik-links { font-size: .84rem; color: var(--muted); display: grid; gap: 4px; }
.admin-chat-live, .admin-chat-kendt, .admin-chat-lukket { font-size: .8rem; color: var(--muted); }
.admin-chat-luk-form { display: flex; gap: 8px; align-items: center; }
.admin-wrap { padding-top: 26px; padding-bottom: 60px; }
.admin-tal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin-tal-kort { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.admin-beslutning { background: var(--pine-50); border-radius: var(--r); padding: 14px 16px; }
.admin-verificer { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ok-700); }
.admin-indbakke-filter, .admin-handlingslog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.admin-indbakke-sider { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.admin-handlingslog-grid { display: grid; gap: 6px; font-size: .86rem; }
.admin-menu { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.admin-menu-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.admin-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.admin-menu-boks, .admin-menu-detaljer { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.admin-menu-link-tekst { font-size: .88rem; color: var(--pine); }
.admin-nav-slut { margin-left: auto; }
.admin-nav-tal { font-size: .72rem; font-weight: 700; background: var(--clay); color: #fff; border-radius: var(--r-full); padding: 1px 6px; }
.admin-ops-check-navn { font-weight: 600; }

/* ---------- System, log, filer ---------- */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sys-etiket { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sys-tid, .sys-handlinger, .sys-filliste, .sys-log { font-size: .84rem; color: var(--ink-soft); }
.sys-filliste { display: grid; gap: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ip-advarsel { background: var(--danger-100); border: 1px solid var(--danger); border-radius: var(--r-sm); padding: 10px 12px; font-size: .86rem; color: var(--danger); }

/* ---------- Gæsteanmeldelser og anmeldelser ---------- */
.gaesteanmeldelse, .gaesteanmeldelse-admin { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.gaesteanmeldelse-head, .gaesteanmeldelse-ophold-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.gaesteanmeldelse-dato, .gaesteanmeldelse-af, .gaesteanmeldelse-fakta, .gaesteanmeldelse-note { font-size: .84rem; color: var(--muted); }
.gaesteanmeldelse-form, .gaesteanmeldelse-samtykke, .gaesteanmeldelse-slet { display: grid; gap: 8px; font-size: .88rem; }
.gaesteanmeldelser-liste, .gaesteanmeldelser-side { display: grid; gap: 10px; }
.review-item, .review-header, .review-date, .review-hus, .review-description { font-size: .88rem; color: var(--ink-soft); }
.review-header { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; color: var(--pine); }
.review-form-container, .review-form { display: grid; gap: 10px; }
.rating-input, .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rating-stars.filled, .filled { color: var(--gold); }
.anmeldelse-svar { background: var(--pine-50); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 8px; }
.anmeldelse-svar-head { font-weight: 600; font-size: .86rem; color: var(--pine); }
.anmeldelse-svar-tekst { font-size: .88rem; color: var(--ink-soft); }
.anmeldelse-svar-form { display: grid; gap: 8px; margin-top: 8px; }
.auto-svar-maerke { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.auto-svar-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--pine-600); display: inline-block; }
.auto-svar-forklaring { font-size: .8rem; color: var(--muted); }

/* ---------- Klargøring ---------- */
.klargoering-overskrift { font-size: 1.1rem; font-weight: 600; color: var(--pine); }
.klargoering-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.klargoering-liste { display: grid; gap: 10px; }
.klargoering-kort-linje { display: flex; justify-content: space-between; gap: 10px; }
.klargoering-punkt, .klargoering-sat { font-size: .9rem; color: var(--ink-soft); }
.klargoering-sat { color: var(--ok); font-weight: 600; }
.klargoering-note, .klargoering-tom { font-size: .84rem; color: var(--muted); }
.klargoering-handling { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.klargoering-note-felt { display: grid; gap: 6px; }
.klargoering-ny, .klargoering-tilbage { font-size: .84rem; }

/* ---------- Kalkulator ---------- */
.kalkulator-svar { font: 700 1.5rem var(--font-display); color: var(--pine); }
.kalkulator-spaend, .kalkulator-spaend-linje { font-size: .9rem; color: var(--ink-soft); }
.kalkulator-underskud { color: var(--danger); font-weight: 600; }
.kalkulator-bemaerkninger, .kalkulator-forbehold, .kalkulator-revisor { font-size: .84rem; color: var(--muted); }
.kalkulator-tabel-wrap { overflow-x: auto; margin: 12px 0; }
.kalkulator-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kalkulator-tabel th, .kalkulator-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.kalkulator-i-alt { display: flex; justify-content: space-between; font-weight: 700; border-top: 2px solid var(--pine); padding-top: 8px; }

/* ---------- Ophold, pakkeliste, vedligehold ---------- */
.ophold-kort { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.ophold-kode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--muted); }
.ophold-kode-vaerdi { font-weight: 600; }
.ophold-form { display: grid; gap: 10px; }
.ophold-knapper, .udgift-knapper { display: flex; gap: 8px; flex-wrap: wrap; }
.ophold-log { font-size: .8rem; color: var(--muted); }
.pakkeliste { display: grid; gap: 14px; }
.pakkeliste-gruppe, .pakkeliste-kategori { font-weight: 600; color: var(--pine); }
.pakkeliste-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.pakkeliste-navn { color: var(--ink-soft); }
.pakkeliste-note { font-size: .8rem; color: var(--muted); }
.vedligehold { display: grid; gap: 12px; }
.vedligehold-post { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.vedligehold-note { font-size: .82rem; color: var(--muted); }
.vedligehold-billeder { display: flex; gap: 6px; flex-wrap: wrap; }
.vedligehold-upload { font-size: .84rem; }

/* ---------- Priser og prisforslag ---------- */
.pris-felt-med-stigning, .pris-stigning { font-size: .84rem; color: var(--ok-700); }
.prisforslag, .prisforslag-grundlag, .prisforslag-interval, .prisforslag-midte { font-size: .88rem; color: var(--ink-soft); }
.prisforslag { background: var(--pine-50); border-radius: var(--r); padding: 12px 14px; }
.prisskema-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.prisvagt, .prisvagt-nu, .prisvagt-felter { display: grid; gap: 8px; }
.pris-beregning, .pris-rabat { font-size: .88rem; color: var(--ink-soft); }
.ekstra-service, .ydelse-note, .tidsaftale-valgt { font-size: .86rem; color: var(--muted); }
.euro-pris, .euro-beloeb, .euro-kurs { font-size: .84rem; color: var(--muted); }

/* ---------- Regnskab: print og perioder ---------- */
.regnskab-periode, .regnskab-rapport-periode { font-size: .86rem; color: var(--muted); }
.regnskab-rapport { background: #fff; padding: 20px; }
.aarsoversigt-ramme, .saesonoversigt-ramme { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.aarsoversigt-titel { font-weight: 600; color: var(--pine); }
.aarsoversigt-hus, .aarsoversigt-ophold, .aarsoversigt-note { font-size: .84rem; color: var(--ink-soft); }
.maaned-navn, .maaned-aktuel { font-weight: 600; }
.maaned-tal, .maaned-tal-celle, .i-alt, .i-resultat { font-variant-numeric: tabular-nums; }
.maaned { border-bottom: 1px solid var(--line); }
.noegletal { display: grid; gap: 4px; }
.noegle-navn, .noegle-note { font-size: .8rem; color: var(--muted); }
.noegle-tal { font: 700 1.2rem var(--font-display); color: var(--pine); }
.filter-baand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--pine-50); border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px; }
.print-ark, .print-ark .maaned { background: #fff; }
.no-print { }
.p-ind, .p-ud, .p-staerk, .p-ind-strong { font-variant-numeric: tabular-nums; }

/* ---------- Markedsdata og sæsonoversigt ---------- */
.markedsdata-periode, .markedsdata-belaegning { font-size: .88rem; color: var(--ink-soft); }
.saesonoversigt-valg, .saesonoversigt-aar, .saesonoversigt-hus, .saesonoversigt-forklaring { font-size: .86rem; color: var(--ink-soft); }
.is-hojsaeson { color: var(--clay-dark); font-weight: 600; }
.saeson-perioder, .saeson-periode-valg { display: grid; gap: 8px; }

/* ---------- Hus, ejer og nyheder ---------- */
.hus-liste { display: grid; gap: 10px; }
.hus-byt { font-size: .84rem; color: var(--muted); }
.hus-nyhed, .hus-nyheder { display: grid; gap: 10px; }
.nyhed-billede { max-width: 100%; border-radius: var(--r-sm); }
.owner-page { padding-top: 24px; padding-bottom: 60px; }
.owner-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.owner-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--pine-100); }
.owner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.owner-box { background: var(--pine-50); border: 1px solid var(--pine-100); border-radius: var(--r); padding: 14px 16px; }
.grid-tight { display: grid; gap: 6px; }
.flag-offentlig { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rolle { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--clay-dark); }

/* ---------- Skabeloner og vilkår ---------- */
.skabelon-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.skabelon-venstre, .skabelon-egne, .skabelon-preview { display: grid; gap: 10px; }
.skabelon-sprog { display: flex; gap: 6px; flex-wrap: wrap; }
.skabelon-sprog-knap { font-size: .8rem; }
.vilkaar-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vilkaar-paragraf { font-weight: 600; color: var(--pine); font-size: .92rem; }
.vilkaar-overskrift { font-size: 1.05rem; margin-top: 14px; }

/* ---------- Beskeder og søgning ---------- */
.beskedcenter-side, .beskedcenter-traad { display: grid; gap: 10px; }
.beskedcenter-raekke { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.beskedcenter-nyt { font-size: .74rem; font-weight: 700; color: var(--clay-dark); text-transform: uppercase; letter-spacing: .06em; }
.samtale-meta, .samtale-afsnit { font-size: .86rem; color: var(--muted); }
.soege-sider, .soege-sidetal { display: flex; gap: 6px; align-items: center; font-size: .86rem; }
.soege-felt { display: grid; gap: 6px; }
.kontakt-besked { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }

/* ---------- Småting, der gik igen ---------- */
.faner { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.page-head-short { padding: 24px 0 4px; }
.skjult-label { display: block; font-size: .8rem; color: var(--muted); }
.felt-aendret { outline: 2px solid var(--warn); border-radius: var(--r-sm); }
.img-manage, .img-manage-item { display: grid; gap: 8px; }
.img-manage-actions { display: flex; gap: 6px; }
.file-input { font-size: .86rem; }
.check-list { display: grid; gap: 6px; }
.accordion summary { cursor: pointer; }
.btn-lg { padding: 14px 22px; font-size: 1.02rem; }
.status-linje { font-size: .84rem; color: var(--muted); }
.status-maerke { display: inline-block; font-size: .74rem; font-weight: 700; border-radius: var(--r-full); padding: 2px 8px; background: var(--pine-50); color: var(--pine-700); }
.is-spaerret { color: var(--danger); }
.afkrydsning { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.flash-error, .form-error { background: var(--danger-100); border: 1px solid var(--danger); color: var(--danger); border-radius: var(--r-sm); padding: 10px 12px; font-size: .9rem; }
.tekst-hjaelp { font-size: .8rem; color: var(--muted); }
.region-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-omraade { font-size: .78rem; }
.chat-hus-prik { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.krav { display: grid; gap: 4px; font-size: .84rem; color: var(--ink-soft); }
.sag-skille { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.hjerte-form { display: contents; }
.sammenlign-rul, .sammenlign-tabel, .sammenlign-hus { font-size: .88rem; }
.sammenlign-tabel { width: 100%; border-collapse: collapse; }
.sammenlign-tabel th, .sammenlign-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.skaderapport-fase, .skaderapport-form, .skaderapport-par, .skaderapport-saet { display: grid; gap: 8px; font-size: .9rem; }
.mail-svar-knapper, .mail-svar-fakta { display: flex; gap: 8px; flex-wrap: wrap; font-size: .86rem; }
.msg-body { font-size: .92rem; color: var(--ink-soft); }
.rolig { color: var(--muted); font-size: .86rem; }
.hus-verificer-form { display: grid; gap: 8px; }
.annonce-tekst-preview, .husregler-forhaandsvisning, .rejsevejledning-forhaandsvisning, .udendoers-forhaandsvisning { background: var(--pine-50); border-radius: var(--r-sm); padding: 12px 14px; font-size: .88rem; }
.service-row, .service-remove { font-size: .86rem; }
.drop-zone-tekst, .upload-status { font-size: .84rem; color: var(--muted); }
.upload-forhaandsvisning { max-width: 200px; border-radius: var(--r-sm); }


/* ==========================================================================
   H6 — DE SIDSTE 100 (2026-10-22)
   ========================================================================== */

/* ---------- Kalender (husets og ugevisning) ---------- */
.kalender, .kalender-top { display: grid; gap: 8px; }
.kalender-ugedage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.kalender-forklaring { display: flex; flex-wrap: wrap; gap: 10px; font-size: .78rem; color: var(--muted); }
.ugekalender-raekke { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }

/* ---------- Omsætning og nøgletal ---------- */
.omsaetning-varsel { background: var(--warn-100); border: 1px solid var(--warn); border-radius: var(--r-sm); padding: 10px 12px; font-size: .86rem; color: var(--warn-700); }
.omsaetning-titel { font-weight: 600; color: var(--pine); }
.omsaetning-to-tal { display: flex; gap: 18px; flex-wrap: wrap; }
.band-titel { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.th-note { font-size: .7rem; color: var(--muted); font-weight: 400; }
.efternote, .byggenote { font-size: .8rem; color: var(--muted); }
.udgift-knap-forklaringer { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted); }
.mt, .mt-navn, .dato, .retning, .kat, .tekst, .note, .antal, .post { font-size: .88rem; }
.btn-danger-text { color: var(--danger); }
.knap { font-weight: 600; }

/* ---------- Admin-bruger og anmeldelser ---------- */
.admin-bruger { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.admin-bruger-rolle { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.anmeldelser-side, .reviews-list, .henvendelser-side { display: grid; gap: 10px; }

/* ---------- Booking (husets side og listen) ---------- */
.booking-side { padding-top: 24px; padding-bottom: 60px; }
.booking-kort { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.booking-hus, .booking-data, .booking-kontakt { font-size: .88rem; color: var(--ink-soft); }
.booking-besked { background: var(--pine-50); border-radius: var(--r-sm); padding: 10px 12px; font-size: .9rem; }
.booking-photo-source { font-size: .78rem; color: var(--muted); }
.booking-kalender { display: grid; gap: 8px; }
.kalender-total { display: flex; justify-content: space-between; font-weight: 700; border-top: 1px solid var(--line); padding-top: 8px; }
.booking-videre, .booking-under { font-size: .86rem; color: var(--muted); }

/* ---------- Boligens smådele ---------- */
.card-body, .detail-main, .detail-head { display: grid; gap: 8px; }
.card-region { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.card-price, .card-prisoversigt, .card-i-alt, .price { font-variant-numeric: tabular-nums; }
.card-i-alt { font-weight: 700; color: var(--pine); }
.gem-hus-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.er-gemt { color: var(--clay); }
.fakt, .fact { display: grid; gap: 2px; font-size: .88rem; }
.fact-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fact-note, .fact-dist { font-size: .8rem; color: var(--muted); }
.pris-panel { display: grid; gap: 8px; }
.pris-panel-leje, .pris-panel-depositum, .pris-panel-heraf { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.fjernet { }
.favorit-gruppe-navn { font-weight: 600; color: var(--pine); }
.cottage-bottom, .cottage-bottom-par { display: grid; gap: 10px; }
.grid { display: grid; gap: 12px; }
.grid-soeg { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.info-card-admin { background: var(--pine-50); border-color: var(--pine-100); }

/* ---------- Husvagt ---------- */
.husvagt { display: grid; gap: 10px; }
.husvagt-nu { font-size: .86rem; color: var(--ink-soft); }
.husvagt-form, .husvagt-felter { display: grid; gap: 8px; }

/* ---------- Rejsevejledning, udendørs, sidste øjeblik ---------- */
.rejsevejledning, .rejsevejledning-liste, .udendoers, .udendoers-liste { display: grid; gap: 8px; }
.rejsevejledning-raekke, .udendoers-raekke { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px solid var(--line); }
.sidste-liste { display: grid; gap: 8px; }
.sidste-uge, .sidste-rabat, .sidste-pris { font-size: .86rem; color: var(--ink-soft); }
.sidste-pris { font-weight: 600; }

/* ---------- Formularer og badges ---------- */
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.form-wide { max-width: 720px; }
.adresse-felter { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 10px; }
.checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; }
.bilag-knap { font-size: .84rem; }
.bilag-knap-kamera { font-size: .84rem; }
.badge-aftale, .badge-annonce { font-size: .74rem; font-weight: 700; border-radius: var(--r-full); padding: 2px 8px; }
.badge-aftale { background: var(--ok-100); color: var(--ok-700); }
.badge-annonce { background: var(--pine-50); color: var(--pine-700); }
.vedligehold-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.vedligehold-tabel th, .vedligehold-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.profile-repeat-offer, .profile-hjaelp { font-size: .88rem; color: var(--ink-soft); }
.nav { }
.besked-svar { font-size: .88rem; color: var(--ink-soft); }
.er-anden { color: var(--muted); }

/* ---------- Auth (portalen) ---------- */
.auth-wrap { padding: 40px 0 70px; }
.auth-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; max-width: 520px; margin: 0 auto; }
.auth-card-left { text-align: left; }
.svarstat { display: flex; gap: 12px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-soft); }
.kontrakt-dok-preview-vilkaar { font-size: .84rem; color: var(--ink-soft); }


/* ==========================================================================
   H7 — DE SIDSTE TRE (2026-10-23)
   ========================================================================== */
.admin-chat-hvem {
  font-size: .82rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gaesteanmeldelse-ophold {
  display: grid;
  gap: 4px;
  background: var(--pine-50);
  border: 1px solid var(--pine-100);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: .86rem;
  color: var(--ink-soft);
}
.kontrakt {
  display: grid;
  gap: 14px;
}


/* ==========================================================================
   REDDEDE TILSTANDSREGLER (H9, 2026-10-23)
   ==========================================================================
   Regler for tilstande og præfikser, som ikke står i visningernes
   class-attributter og derfor ikke var talt med, da komponentblokken blev
   fjernet. De er hentet ordret ud af den gamle blok.
   ========================================================================== */
.upload-kort {
width: 140px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .4rem;
  background: #fff;
  position: relative;
}
.upload-kort img {
width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.upload-kort-navn {
margin: .35rem 0 .1rem;
  font-size: .72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-kort-status {
margin: 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
}
.upload-kort.is-i-gang {
border-color: var(--deep-2);
}
.upload-kort.is-i-gang .upload-kort-status {
color: var(--deep-2);
}
.upload-kort.is-faerdig {
border-color: var(--ok);
}
.upload-kort.is-faerdig .upload-kort-status {
color: var(--ok);
}
.upload-kort.is-fejl {
border-color: var(--danger); background: #fffafa;
}
.upload-kort.is-fejl .upload-kort-status {
color: var(--danger);
}
.pris-stigning.er-stigning {
color: var(--brand-dark);
}
.pris-stigning.er-fald {
color: var(--ok);
}
.kal-status.is-fejl {
color: var(--danger); font-weight: 600;
}
.sammenlign-bar {
position: fixed;
  z-index: 100;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(20, 40, 48, .2);
}
.sammenlign-bar[hidden] {
display: none;
}
.sammenlign-bar [data-sammenlign-status] {
font-weight: 700;
}
.sammenlign-bar .is-disabled {
opacity: .55; cursor: not-allowed;
}
/* Afvis-formularen på en booking-række (samme sag, F40): den er en flex-række
   med en <select>, hvis længste <option> ("Datoerne passer ikke / huset er
   optaget") ellers tvinger rækken — og hele siden — bredere end skærmen.
   `min-width: 0` lader selecten krympe, og `flex-wrap` flytter knappen ned,
   når der ikke er plads. Reglen er bundet til formularens klasse, så andre
   selects ikke ændrer adfærd. */
.booking-handlinger .afvis-form {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.booking-handlinger .afvis-form select {
min-width: 0;
}
/* Statistikfelt, der kræver handling — fx bookinger der venter på svar */
.stat-handling {
border: 1px solid #e0a800 !important; background: #fdf5e3 !important;
}
.stat-handling em {
font-style: normal; font-size: .74rem; font-weight: 700; color: #8a6100;
}
/* Ulæste samtaler markeres med BÅDE en kant og et mærke — ikke farve alene. */
.samtale-raekke.is-ny {
border-left-color: var(--brand); background: #fbfdff;
}
/* Sagsnummeret. Det SKAL kunne læses op i en telefon og skrives af efter —
   derfor er tallet fremhævet og ikke gemt i en brødtekst. `.er-ny` bruges, når
   gæsten lige har fået nummeret (efter sin første besked). */
.chat-sags-id {
margin: .3rem 0 .9rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sand);
  font-size: .9rem;
}
.chat-sags-id.er-ny {
border-color: var(--brand);
}
/* ==========================================================================
   DEN FLYDENDE CHAT-KNAP (sag N178, tilføjet 2026-10-15)
   ==========================================================================
   Den klassiske chat-boble nederst i højre hjørne og det lille panel, den
   åbner. Knappen og panelet tegnes af views/partials/chat-boble.ejs, som
   footer.ejs inkluderer — altså BÅDE computer- og mobilvisningen.

   TRE TING, DER IKKE MÅ GLIPPES HER, OG SOM HAR HVER SIN GRUND:
     • SIKRE OMRÅDER: `env(safe-area-inset-*)` holdes ude af skærmens
       rundinger og af hjemmeindikatoren på en telefon. Samme greb som
       .sammenlign-bar (se den regel), så de to faste bjælker ikke ligger
       oveni hinanden eller ude i kanten.
     • PANELET MÅ IKKE FYLDE SKÆRMEN: højden er begrænset til 70vh (60vh på en
       lille skærm), og indholdet ruller indeni. En gæst skal kunne se, at der
       ER en side bag panelet, og kunne lukke det.
     • LUKKET BETYDER LUKKET: panelet vises KUN, når scriptet har sat
       data-chat-boble-aaben="1". Er JavaScript slået fra, står panelet derfor
       ikke åbent hen over indholdet — knappen er et <a href> og fører til
       /chat, hvor hele fladen står åben. Se public/js/chat-boble.js. */

.chat-boble-launcher {
position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  /* Boksen må ikke fange klik uden for knappen og panelet. */
  pointer-events: none;
}
.svar-status.er-aktiv {
background: #e8f5ec; color: #1d6b3a;
}
/* --- Klargørings-tjeklisten pr. booking (idé I8) ---------------------------
   Udlejerens egen arbejdsliste: rengøring, linned, nøgler, gas, brænde og
   pool. Afsnittet tegnes af ÉN delvisning (views/partials/klargoering.ejs),
   som bruges af både computer- og mobilvisningen (views/klargoering.ejs og
   views/klargoering-mobile.ejs) og i kort form af booking-oversigten
   (views/bookinger.ejs). Retter man listen, retter man den altså ét sted —
   se N75/Ø16 i docs/TODO.md.

   STATUS VISES MED DE FÆLLES CHIP-KLASSER: chip-ok = klar, chip-advarsel =
   mangler, chip-hidden = ikke relevant. Farverne betyder derfor det samme
   her som resten af sitet, og der er ikke en fjerde grøn at lære. */
.klargoering {
break-inside: avoid;
}
.klargoering-navn {
font-weight: 600; min-width: 12rem;
}
.henv-filter.er-aktiv {
background: var(--deep); border-color: var(--deep); color: #fff;
}
.henv-filter.er-aktiv .muted {
color: rgba(255, 255, 255, .8);
}
/* Denne uge markeres i rækken, så udlejeren kan finde den uden at lede. */
tr.er-i-dag {
background: var(--sand);
}
tr.er-i-dag .saeson-uge {
color: var(--deep);
}
.gaesteanmeldelse-fakta .fakta-ja {
color: var(--ok);
}
.gaesteanmeldelse-fakta .fakta-nej {
color: var(--muted);
}
.fane {
display: inline-block;
  padding: .35rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .87rem;
  color: var(--ink);
  text-decoration: none;
}
.fane.aktiv {
background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700;
}
.fane {
flex: 1 1 auto; text-align: center;
}
/* En aftale, der ER en annonce, får en synligere ramme — mærket alene skal
   ikke være det eneste, der skiller den ud. */
.partner-kort-annonce {
border-left: 4px solid var(--brand);
}
/* Den aktuelle måned fremhæves med en varm, dæmpet baggrund — ikke med
   brand-rød — og med ét ORD, så rækken ikke skifter højde. */
.regnskab-tabel tr.maaned.er-aktuel th {
background: #f3ebdf;
}
.admin-chat-raekke.er-lukket {
opacity: .72;
}
.admin-chat-maerke.er-match {
color: #2e7d32;
}
.admin-chat-maerke.er-ingen-match {
color: #7a4b00;
}
/* Den valgte fane i skabelon-editoren (sag N225) — samme knap, tydeligt valgt. */
.dash-genvej-aktiv {
border-color: var(--brand); color: var(--brand);
}
.rengoring-punkt {
border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: .9rem; display: flex; flex-direction: column; gap: .6rem;
}
.rengoring-punkt.har-foto {
border-color: var(--ok);
}
.portal-ny.er-ny {
background: #fdf1ef; color: var(--brand); font-weight: 600;
}
.ledighed.is-opdaterer {
opacity: .45; pointer-events: none; transition: opacity .15s ease;
}

/* H10 — de sidste to krav fra vagten (2026-10-23)
   1. Præfikserne henv-status-* og henv-badge-* bruges med dynamiske værdier
      i visningerne. De fik deres regler i den gamle blok; her er de igen.
   2. F40: på smalle skærme skal knapperne i bookinger-genveje kunne ombryde
      deres tekst — ellers rager de ud. */
.henv-status-ny, .henv-status-aaben, .henv-status-venter { background: var(--warn-100); color: var(--warn-700); }
.henv-status-besvaret, .henv-status-lukket { background: var(--ok-100); color: var(--ok-700); }
.henv-status-afvist, .henv-status-spaerret { background: var(--danger-100); color: var(--danger); }
.henv-badge-ny { background: var(--clay-100); color: var(--clay-dark); }
.henv-badge-venter { background: var(--warn-100); color: var(--warn-700); }
.henv-badge-lukket { background: var(--line); color: var(--ink-soft); }

@media (max-width: 700px) {
  .bookinger-genveje .btn { white-space: normal; }
  .afvis-form { flex-wrap: wrap; }
  .afvis-form select { min-width: 0; }
}



/* ==========================================================================
   N208-KONTRAKT (2026-10-23)
   ==========================================================================
   Prøven N208 måler, at menupunktets tilstand markeres med en FARVE fra en
   variabel — ikke med en ny hex-kode — at den fyldte knap beholder hvid
   tekst, og at hakket har sin egen regel. Kravene holdt den gamle skal op
   på; de gælder stadig, nu med designets farver.
   ========================================================================== */
.nav a { color: var(--ink); }
.nav a.is-active,
.nav a.is-valgt,
.nav a[aria-current="page"] { color: var(--brand); }
.nav a.btn-primary,
.header__link.btn { color: #fff; }
.btn-ghost { color: var(--muted); }
.nav a.is-valgt span[aria-hidden="true"] { font-weight: 700; }