/* =========================================================================
   Staudeengen — staudeengenbnb.fbdk.dk
   Ét samlet stylesheet. Intet build-step, ingen eksterne fonte, ét lyst tema.

   Indhold
   01  Designtokens
   02  Reset og basis
   03  Typografi
   04  Layout
   05  Skip-link og fokus
   06  Header og navigation
   07  Knapper
   08  Hero
   09  Kort og gitre
   10  Split-sektioner
   11  Pristabeller
   12  Galleri og billeder
   13  Anmeldelser
   14  Aronia-siden
   15  Ledighedskalender
   16  Kontaktkort og forespørgsel
   17  Kontaktstribe og footer
   18  Hjælpeklasser
   19  Print
   ========================================================================= */

/* == 01  Designtokens =================================================== */

:root {
  --ink:        #241f26;
  --aronia:     #4a1d3f;
  --aronia-dp:  #2e1128;
  --berry:      #7d2f5c;
  --leaf:       #5c7a52;
  --sand:       #f6f2ea;
  --card:       #ffffff;
  --line:       #e3dbcf;
  --muted:      #6d6459;

  /* --leaf i ren form giver kun 4,31:1 mod --sand og falder dermed under
     WCAG AA for brødtekststørrelse. Denne mørkere variant bruges, når det
     grønne skal bære tekst; --leaf selv bruges til flader, prikker og kanter. */
  --leaf-tx:    #4c6743;

  --font-head: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  --wrap: 1180px;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(36, 31, 38, .06), 0 2px 8px rgba(36, 31, 38, .05);
  --shadow-md: 0 2px 6px rgba(36, 31, 38, .07), 0 12px 28px rgba(36, 31, 38, .08);

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;

  --header-h: 72px;
}

/* == 02  Reset og basis ================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

img {
  /* Et manglende billede må aldrig give et brækket layout */
  background-color: var(--line);
  color: var(--muted);
  font-size: .9rem;
}

ul, ol { padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-md) 0; }

table { border-collapse: collapse; width: 100%; }

/* == 03  Typografi ====================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  color: var(--aronia);
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--berry); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--aronia); }

.lead {
  font-size: clamp(1.08rem, 1.02rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: #3a3239;
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leaf-tx);
  margin: 0 0 .7rem;
}

.section-head { max-width: 64ch; margin-bottom: var(--space-md); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.note { font-size: .95rem; color: var(--muted); }

.prose > * + * { margin-top: 1.05em; }
.prose h3 { margin-top: 1.8em; }

/* == 04  Layout ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.wrap--narrow { max-width: 820px; }

.section { padding-block: clamp(2.75rem, 6vw, var(--space-xl)); }
.section--sand { background: var(--sand); }
.section--card { background: var(--card); }

.section--band { background: var(--aronia); color: #fff; }
.section--band h2, .section--band h3 { color: #fff; }
.section--band .eyebrow { color: #dcb8cd; }
.section--band a { color: #f3d9e8; }
.section--band a:hover { color: #fff; }

.grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.8rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* == 05  Skip-link og fokus ============================================= */

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--aronia);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top .15s ease-in;
}
.skip-link:focus { top: 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 2px;
  border-radius: 3px;
}
.section--band :focus-visible,
.contact-strip :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible { outline-color: #fff; }

/* == 06  Header og navigation =========================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(6px);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--aronia);
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.1;
  margin-right: auto;
}
.brand:hover { color: var(--berry); }
.brand__mark { width: 36px; height: 36px; flex: none; background: none; }
.brand__text { display: flex; flex-direction: column; }
.brand__sub {
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: .97rem;
  font-weight: 600;
}
.nav__link:hover { background: var(--sand); color: var(--aronia); }
.nav__link[aria-current="page"] {
  color: var(--aronia);
  box-shadow: inset 0 -2px 0 var(--berry);
}

.header__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-left: .5rem;
  padding: .5rem .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--aronia);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
}
.header__tel:hover { border-color: var(--berry); color: var(--berry); }
.header__tel svg { width: 17px; height: 17px; flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--aronia);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--berry); }
.nav-toggle__bars { position: relative; width: 20px; height: 14px; flex: none; }
.nav-toggle__bars span,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 6px; }
.nav-toggle__bars::after { bottom: 0; }

/* Mellemzonen: menuen skal stadig kunne stå på én linje ved 860 px,
   så telefonknappen og undertitlen viger, og linkene strammes ind. */
@media (min-width: 860px) and (max-width: 1059px) {
  .header__tel { display: none; }
  .brand__sub { display: none; }
  .brand { font-size: 1.1rem; }
  .nav__link { font-size: .9rem; padding: .5rem .5rem; }
}

@media (max-width: 859px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: .6rem clamp(1rem, 4vw, 2rem) 1.1rem;
  }
  .nav[data-open="true"] { display: block; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: .8rem .6rem;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--berry); background: var(--sand); }

  .brand { font-size: 1.08rem; }
  .header__tel { margin-left: 0; }
}

@media (max-width: 520px) {
  .header__tel .header__tel-label { display: none; }
}
@media (max-width: 400px) {
  .nav-toggle__label { display: none; }
  .brand__sub { display: none; }
}

/* == 07  Knapper ======================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--aronia);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--berry); color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--outline { background: transparent; border-color: var(--aronia); color: var(--aronia); }
.btn--outline:hover { background: var(--aronia); color: #fff; }

.btn--light { background: #fff; color: var(--aronia); }
.btn--light:hover { background: #f3e7ee; color: var(--aronia-dp); }

.btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .8); color: #fff; }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.btn--sm { padding: .5rem .9rem; font-size: .92rem; }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-sm); }

.ext-icon { width: .85em; height: .85em; flex: none; opacity: .85; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .15s ease; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }

/* == 08  Hero =========================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Målhøjde min(78vh, 720px) — men aldrig lavere end 420 px, og aldrig så
     lav at indholdet bliver klippet af overflow: hidden. */
  min-height: max(420px, min(78vh, 720px));
  background: var(--aronia-dp) url("../img/hero-poster.webp") center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  background: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dronevideoen har lyse billeder (tagflader, grus), hvor poster-billedet var
     mørkt hele vejen igennem. Scrimmen er derfor kraftigere end et stillbillede
     ville kræve: den skal holde den hvide hero-tekst over 4,5:1 i ALLE frames,
     ikke kun de mørke. Sænk ikke værdierne uden at måle mod det lyseste frame. */
  background: linear-gradient(to top,
    rgba(29, 10, 25, .88) 0%,
    rgba(29, 10, 25, .70) 38%,
    rgba(29, 10, 25, .52) 70%,
    rgba(29, 10, 25, .56) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) clamp(2.25rem, 6vw, 4rem);
  color: #fff;
}

.hero__inner h1 { color: #fff; max-width: 17ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.hero__text {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: #f7f0f4;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.hero .eyebrow { color: #eccbdd; }

.hero--page { min-height: max(300px, min(46vh, 430px)); align-items: center; }
.hero--page h1 { max-width: 22ch; }

.hero--overnatning { background-image: url("../img/vaerelse-1.webp"); }
.hero--festlokale  { background-image: url("../img/festlokale-1.webp"); }
.hero--foreninger  { background-image: url("../img/bus.webp"); }
.hero--aronia      { background-image: url("../img/have-2.webp"); }
.hero--kontakt     { background-image: url("../img/ejendom.webp"); }
.hero--persondata  { background-image: url("../img/have-3.webp"); }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .55rem;
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
}
.hero__facts li {
  padding: .35rem .8rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(29, 10, 25, .5);
  font-size: .9rem;
  font-weight: 600;
}

/* == 09  Kort og gitre ================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--line);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  flex: 1;
}
.card__body h3 { margin-bottom: .25rem; }
.card__body p { color: #3e3740; }
.card__body .link-arrow { margin-top: auto; padding-top: .9rem; }

.card--plain { padding: clamp(1.2rem, 2.5vw, 1.6rem); gap: .4rem; }
.card--accent { border-left: 4px solid var(--leaf); }

.info-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}

.facility-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: .55rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.facility-list li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.facility-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--leaf);
}

.fact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 1rem;
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
}
.fact {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  text-align: center;
}
.fact strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--aronia);
}
.fact span { font-size: .93rem; color: var(--muted); }

/* == 10  Split-sektioner ================================================ */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.split__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--line);
}
.split__media--portrait { aspect-ratio: 3 / 4; max-width: 400px; }

@media (min-width: 720px) {
  .split--reverse .split__text { order: 2; }
}

/* == 11  Pristabeller =================================================== */

.price-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.price-table { min-width: 380px; font-size: 1rem; }
.price-table caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.15rem .4rem;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--aronia);
}
.price-table th, .price-table td {
  padding: .8rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.price-table thead th {
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sand);
}
.price-table td:last-child, .price-table th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody th { font-weight: 600; }

/* == 12  Galleri og billeder ============================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(.7rem, 2vw, 1.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.gallery figcaption { padding-top: .45rem; font-size: .92rem; color: var(--muted); }

/* == 13  Anmeldelser ==================================================== */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.7rem);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.review-card__score {
  display: block;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--aronia);
}
.review-card__of { font-size: 1.05rem; color: var(--muted); }
.review-card__source { margin-top: .5rem; font-weight: 600; }
.review-card p { margin-bottom: 0; }

/* == 14  Aronia-siden =================================================== */

.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.variant {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
}
.variant__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--line);
}
.variant__body { padding: 1.1rem 1.2rem 1.3rem; }
.variant__body h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.variant__body p { font-size: .97rem; color: #3e3740; margin: 0; }

.buy-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items: stretch;
}
.buy-path {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 5px solid var(--leaf);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.buy-path--shop { border-top-color: var(--berry); }
.buy-path h3 { margin-bottom: .5rem; }
.buy-path .btn-row { margin-top: auto; padding-top: 1.1rem; }
.buy-path address { font-style: normal; font-weight: 600; }

.opening {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  gap: .4rem;
  font-size: .97rem;
}
.opening li { display: flex; gap: .6rem; }
.opening b { font-family: var(--font-head); color: var(--aronia); white-space: nowrap; }

/* == 15  Ledighedskalender ============================================== */

.cal { margin-top: var(--space-sm); }

.cal__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.cal__nav { display: flex; gap: .5rem; }
.cal__nav button {
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--aronia);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.cal__nav button:hover { border-color: var(--berry); color: var(--berry); }
.cal__nav button[disabled] { opacity: .45; cursor: not-allowed; }

.cal__months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.cal__month {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.cal__filters { display: flex; flex-wrap: wrap; gap: .4rem; }

.filter-btn {
  padding: .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--berry); color: var(--berry); }
.filter-btn[aria-pressed="true"] {
  background: var(--aronia);
  border-color: var(--aronia);
  color: #fff;
}

.cal__table { table-layout: fixed; }
.cal__table caption {
  caption-side: top;
  padding-bottom: .6rem;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--aronia);
  text-align: center;
}
.cal__table th {
  padding: .3rem 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal__table th abbr { text-decoration: none; }
.cal__table td { padding: 2px; text-align: center; }

.cal__day {
  display: block;
  width: 100%;
  padding: .4rem 0 .3rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
}
button.cal__day { cursor: pointer; }
button.cal__day:hover { border-color: var(--aronia); }
.cal__day[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--aronia); }

.cal__day small {
  display: block;
  font-size: .58rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* 4 af 4 ledige */
.cal__day--all { background: #eaf1e7; border-color: #c6d7bf; color: #2f4429; }
.cal__day--all small { color: #3f5b36; }

/* 1–3 af 4 ledige */
.cal__day--some { background: #fbf1dd; border-color: #e2c894; color: #64460f; }
.cal__day--some small { color: #7a5613; }

/* ingen ledige */
.cal__day--none {
  background: repeating-linear-gradient(135deg, #f1e3ea, #f1e3ea 4px, #e0c9d7 4px, #e0c9d7 8px);
  border-color: #d0aec2;
  color: #58203f;
}
.cal__day--none small { color: #58203f; }

.cal__day--past { color: #7c756e; background: transparent; }
.cal__day--tom { visibility: hidden; }

.cal__detail {
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: var(--sand);
  border: 1px solid var(--line);
  font-size: .97rem;
  min-height: 3.2rem;
}

.cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: .93rem;
}
.cal__legend li { display: flex; align-items: center; gap: .5rem; }
.cal__legend .swatch {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  flex: none;
}
.swatch--all { background: #eaf1e7; border-color: #c6d7bf; }
.swatch--some { background: #fbf1dd; border-color: #e2c894; }
.swatch--none {
  background: repeating-linear-gradient(135deg, #f1e3ea, #f1e3ea 4px, #e0c9d7 4px, #e0c9d7 8px);
  border-color: #d0aec2;
}
.swatch--past { background: var(--sand); }

.cal__status { margin-top: .9rem; font-size: .93rem; color: var(--muted); }

/* == 16  Kontaktkort og forespørgsel ==================================== */

.contact-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--aronia);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.contact-card h3 { margin-bottom: .5rem; }

.tel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  font-size: 1.15rem;
}
.tel-list a { font-weight: 700; text-decoration: none; }
.tel-list a:hover { text-decoration: underline; }
.tel-list .tel-name { font-size: .9rem; color: var(--muted); font-weight: 400; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.checklist li { position: relative; padding-left: 1.75rem; }
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--leaf-tx);
  font-weight: 700;
}

.notice {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-size: .97rem;
  border: 1px solid var(--line);
  background: var(--card);
}
.notice--info { border-left: 4px solid var(--leaf); background: #f4f7f2; }
.notice--warn { border-left: 4px solid var(--berry); background: #fbf3f7; }
.notice h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.notice p:last-child { margin-bottom: 0; }

/* == 17  Kontaktstribe og footer ======================================== */

.contact-strip { background: var(--aronia); color: #fff; }
.contact-strip .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3.2rem);
}
.contact-strip h2, .contact-strip h3 { color: #fff; }
.contact-strip a { color: #fff; }
.contact-strip .tel-list .tel-name { color: #e0cad8; }
.contact-strip address { font-style: normal; }

.site-footer {
  background: var(--aronia-dp);
  color: #e7dde3;
  padding-block: clamp(2.2rem, 5vw, 3.4rem) 1.6rem;
  font-size: .97rem;
}
.site-footer h2, .site-footer h3 {
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.site-footer a { color: #f0dce9; }
.site-footer a:hover { color: #fff; }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.4rem, 3vw, 2.5rem);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer h2.footer-brand { margin-bottom: 1rem; }
.footer-logo {
  /* Logofilen findes kun som mørk skrift på gennemsigtig bund */
  width: min(210px, 80%);
  height: auto;
  filter: invert(1);
  opacity: .93;
}
.site-footer address { font-style: normal; }
.site-footer__bottom {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  justify-content: space-between;
  color: #cdc0c9;
  font-size: .9rem;
}

/* Lovpligtige selskabsoplysninger — selskabsloven § 2, stk. 4 og
   e-handelsloven § 7. Skal stå på alle sider, men som diskret småtryk. */
.site-footer__legal {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #bdaeb8;
  font-size: .84rem;
  line-height: 1.6;
}
.site-footer__legal p { margin: 0 0 .3rem; }
.site-footer__legal p:last-child { margin-bottom: 0; }

/* == 18  Hjælpeklasser ================================================== */

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

/* Midlertidig markering af den manglende e-mailadresse. Den skal være umulig
   at overse, indtil ejeren har oplyst en rigtig adresse — se LOVKRAV-
   kommentarerne i HTML'en. Slet denne regel, når pladsholderen er væk. */

.center { text-align: center; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.stack > * + * { margin-top: var(--space-sm); }
.text-muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* == 19  Print ========================================================== */

@media print {
  .site-header, .site-footer, .hero__video, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { height: auto; min-height: 0; background: none; color: #000; }
  .hero__inner, .hero__inner h1, .hero__text { color: #000; text-shadow: none; }
  .contact-strip { background: none; color: #000; }
  .contact-strip h2, .contact-strip a { color: #000; }
}