/* ==========================================================================
   Hotel Lillevang – designsystem
   Tokens hentet fra design/project/Hotel Lillevang.dc.html.
   Mobile-first: basis er small screen, media queries bygger opad.
   ========================================================================== */

:root {
  /* Farver */
  --color-bg: #F7F4EC;
  --color-surface: #FFFDF8;
  --color-band: #EDE7DA;
  --color-primary: #1E3A2E;
  --color-primary-deep: #14261D;
  --color-accent: #B0873F;         /* brandguld – kun dekoration/baggrund */
  --color-accent-text: #856224;    /* 5,07:1 – guld som TEKST på lys baggrund */
  --color-accent-soft: #D9C9A6;
  --color-accent-dim: #C9B588;
  --color-text: #24332B;
  --color-text-soft: #45544B;
  --color-muted: #5A6961;          /* 5,27:1 – var #6B7A70 = 4,12:1 (WCAG-fejl) */
  --color-muted-warm: #6F6142;     /* 5,51:1 – var #8A7A55 = 3,82:1 (WCAG-fejl) */
  --color-on-dark: #FFFDF8;
  --color-on-dark-soft: #EFEAE0;
  --color-on-dark-mute: #C4CEC6;
  --color-on-dark-dim: #8B9A90;
  --color-border: #E3DDD0;
  --color-border-strong: #D8D0BF;

  /* Typografi */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-base: 1.0625rem;   /* 17px, som i designet */
  --line-base: 1.6;

  /* Spacing */
  --spacing-xs: 0.375rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.75rem;
  --spacing-xl: 4.5rem;
  --spacing-2xl: 6rem;

  /* Mål */
  --wrap: 1280px;
  --wrap-narrow: 900px;
  --gutter: 1.5rem;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --header-h: 88px;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-base);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* sikkerhedsnet mod vandret scroll */
}

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

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent-text); }

input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::placeholder { color: #9AA79E; opacity: 1; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }

/* Synligt fokus – må aldrig fjernes (Hardblock 2, accessibility) */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Respektér brugerens motion-indstilling (Hardblock 2) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Hjælpeklasser -------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow { max-width: var(--wrap-narrow); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted-warm);
  margin: 0 0 1rem;
}

.eyebrow-light { color: var(--color-accent-soft); letter-spacing: 0.24em; }

.rule {
  height: 1px;
  background: var(--color-border-strong);
  border: 0;
  margin: 0 0 1.5rem;
  max-width: 110px;
}

.lead { color: var(--color-text-soft); }

/* Kun for skærmlæsere */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Spring til indhold – første tab-stop */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding: 0.875rem 1.25rem;
}
.skip-link:focus {
  left: 0;
  color: var(--color-on-dark);
}

/* --- Knapper -------------------------------------------------------------- */
/* min-height 44px = touch-target-kravet i Hardblock 1 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary { background: var(--color-primary); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent); color: var(--color-on-dark); }

.btn-light { background: var(--color-bg); color: var(--color-primary); }
.btn-light:hover { background: var(--color-accent); color: var(--color-on-dark); }

.btn-outline { border-color: var(--color-primary); color: var(--color-primary); background: none; }
.btn-outline:hover { background: var(--color-primary); color: var(--color-bg); }

.btn-outline-light {
  border-color: rgba(247, 244, 236, 0.55);
  color: var(--color-bg);
  background: none;
}
.btn-outline-light:hover { background: rgba(247, 244, 236, 0.14); color: var(--color-on-dark); }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 244, 236, 0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-header__logo img {
  height: 56px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.375rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--color-accent-text); }
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-text);
}

/* Sprogvælger – <details>, virker uden JS */
.lang { position: relative; }

.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { border-color: var(--color-accent); color: var(--color-accent-text); }

.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 40px rgba(30, 58, 46, 0.14);
  min-width: 190px;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  z-index: 80;
}

.lang__menu a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
}
.lang__menu a:hover { background: #F0EADC; }
.lang__menu a[aria-current="true"] { background: #F0EADC; }
.lang__menu span { color: #9AA79E; font-size: 0.75rem; letter-spacing: 0.08em; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-primary);
  min-height: 60vh;
}

.hero--tall { min-height: 78vh; }

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 34, 26, 0.5) 0%, rgba(18, 34, 26, 0.25) 34%, rgba(18, 34, 26, 0.9) 100%);
}

.hero__body {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 5rem var(--gutter) 3rem;
  width: 100%;
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 5.875rem);
  line-height: 1.02;
  color: var(--color-on-dark);
  margin: 0 0 1.375rem;
  max-width: 15ch;
}

.hero__lead {
  max-width: 58ch;
  color: var(--color-on-dark-soft);
  font-size: 1.1875rem;
  font-weight: 300;
  margin: 0 0 0.875rem;
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.625rem;
  color: var(--color-accent-soft);
  margin: 0 0 2rem;
}

.hero__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: no-preference) {
  .hero__body { animation: rise 0.8s ease both; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* --- Sektioner ------------------------------------------------------------ */

.section { padding-block: var(--spacing-xl); }
.section--flush-top { padding-top: 0; }
.section--dark { background: var(--color-primary); color: var(--color-on-dark-soft); }
.section--band { background: var(--color-band); }
.section--surface { background: var(--color-surface); }

.section h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  color: var(--color-primary);
  margin: 0 0 1.375rem;
}
.section--dark h2 { color: var(--color-on-dark); }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.split img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

/* --- Fliser (forside) ----------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.tile {
  background: var(--color-surface);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-height: 44px;
  transition: background-color 0.2s, color 0.2s;
}
.tile:hover { background: var(--color-primary); color: var(--color-on-dark); }
.tile strong { font-family: var(--font-display); font-size: 1.625rem; font-weight: 400; line-height: 1.15; }
.tile span { font-size: 0.875rem; opacity: 0.68; }

/* --- Statistik ------------------------------------------------------------ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.75rem;
}
.stats dt { font-family: var(--font-display); font-size: 2.125rem; color: var(--color-primary); line-height: 1.1; }
.stats dd { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--color-muted); }

/* --- Kort ----------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin-top: 2.75rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.card img { width: 100%; height: 230px; object-fit: cover; }

.card__body {
  padding: 1.625rem 1.625rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.card__head h3 { font-size: 1.6875rem; color: var(--color-primary); }
.card__price { font-size: 0.9375rem; color: var(--color-accent-text); white-space: nowrap; }

.tags { display: flex; gap: 0.5rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.tags li {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  padding: 0.3125rem 0.625rem;
}

.card__desc { font-size: 0.96875rem; color: var(--color-text-soft); }
.card__note { font-size: 0.875rem; color: var(--color-muted-warm); }
.card .btn { margin-top: auto; }

/* --- Billedserie på kort -------------------------------------------------- */
/* Se gallery() i src/templates/layout.js og assets/js/gallery.js.
   Uden JavaScript findes .is-live ikke, og så gælder kun de to første regler:
   første billede vises, resten er skjult. Nøjagtig som et kort uden serie. */

.shots { position: relative; }
.shots > picture + picture { display: none; }

/* Med JavaScript lægges de øvrige billeder oven på det første, som bliver
   liggende i flow og bestemmer højden. Derfor kan skiftet ikke flytte noget
   på siden (CLS), og der er altid et billede under krydsfadet. */
.shots.is-live > picture + picture {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}
.shots.is-live > picture + picture.is-on { opacity: 1; }
.shots.is-live > picture + picture img { height: 100%; }

.shots__ui {
  display: none;
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  align-items: center;
  gap: 0.625rem;
  z-index: 2;
}
.shots.is-live .shots__ui { display: flex; }

.shots__dots { display: flex; gap: 0.3125rem; }
.shots__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.45);
  box-shadow: 0 1px 3px rgba(20, 38, 29, 0.5);
  transition: background-color 0.3s;
}
.shots__dots span.is-on { background: var(--color-on-dark); }

/* 44 px er touch-target-kravet (Hardblock 1). Flad og halvgennemsigtig, så den
   ikke tager opmærksomheden fra billedet den ligger på. */
.shots__pause {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 38, 29, 0.42);
  color: var(--color-on-dark);
  cursor: pointer;
  transition: background-color 0.2s;
}
.shots__pause:hover { background: rgba(20, 38, 29, 0.78); }

.shots__i--play { display: none; }
.shots.is-paused .shots__i--play { display: block; }
.shots.is-paused .shots__i--pause { display: none; }

/* --- Galleri -------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
}
.gallery img { width: 100%; height: 180px; object-fit: cover; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--color-border); }

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

.faq summary {
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  font-size: 1.125rem;
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }

.faq__plus {
  flex: 0 0 auto;
  color: var(--color-accent-text);
  font-size: 1.375rem;
  line-height: 1;
  transition: transform 0.2s;
}
.faq details[open] .faq__plus { transform: rotate(45deg); }

.faq p { padding: 0 0 1.375rem; max-width: 78ch; color: var(--color-text-soft); }

/* --- Formularer ----------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 1.375rem; max-width: 520px; }

.form label { display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.9375rem; }

.form input,
.form textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0.875rem 1rem;
  min-height: 44px;
  border-radius: var(--radius-sm);
  width: 100%;
}
.form textarea { resize: vertical; min-height: 9rem; }

.form input:focus-visible,
.form textarea:focus-visible { border-color: var(--color-accent); }

/* Honeypot – skjult for mennesker, udfyldes af bots */
.hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.form__status { padding: 1rem 0 0; margin: 0; font-size: 0.9375rem; }
.form__status[data-state="error"] { color: #8C2F1F; }
.form__status[data-state="ok"] { color: var(--color-primary); }

/* --- Kontaktpanel --------------------------------------------------------- */

.info-panel {
  background: var(--color-primary);
  color: var(--color-on-dark-soft);
  padding: 2.25rem 1.75rem;
}
.info-panel h2 { color: var(--color-on-dark); font-size: 2.125rem; margin-bottom: 1.75rem; }
.info-panel dl { margin: 0; display: flex; flex-direction: column; gap: 1.625rem; }
.info-panel dt {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
  margin-bottom: 0.375rem;
}
.info-panel dd { margin: 0; color: var(--color-on-dark); }
.info-panel dd a {
  color: var(--color-on-dark);
  border-bottom: 1px solid rgba(255, 253, 248, 0.3);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.info-panel dd a:hover { color: var(--color-accent-soft); }

/* --- Artikler (de migrerede SEO-sider) ------------------------------------ */

.article { max-width: 72ch; margin-inline: auto; padding-block: var(--spacing-lg) var(--spacing-xl); }
.article h1 { font-size: clamp(2rem, 5vw, 3.25rem); color: var(--color-primary); margin-bottom: 1.25rem; }
.article h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); color: var(--color-primary); margin: 2.75rem 0 1rem; }
.article h3 { font-size: 1.3125rem; color: var(--color-primary); margin: 2rem 0 0.75rem; }
.article p { margin: 0 0 1.125rem; color: var(--color-text-soft); }
.article ul, .article ol { margin: 0 0 1.5rem; padding-left: 1.25rem; color: var(--color-text-soft); }
.article li { margin-bottom: 0.5rem; }
.article a { text-decoration: underline; text-underline-offset: 2px; }

.article blockquote {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-text-soft);
}

.article__meta {
  font-size: 0.875rem;
  color: var(--color-muted-warm);
  margin: 0 0 2rem;
  letter-spacing: 0.03em;
}

/* Tabeller skal kunne scrolles vandret på mobil uden at sprænge layoutet */
.table-scroll { overflow-x: auto; margin: 0 0 1.75rem; }
.article table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.9375rem; }
.article th, .article td {
  border: 1px solid var(--color-border);
  padding: 0.75rem 0.875rem;
  text-align: left;
  vertical-align: top;
}
.article th { background: var(--color-band); font-weight: 600; }

/* --- Brødkrummer ---------------------------------------------------------- */

.breadcrumb { font-size: 0.875rem; color: var(--color-muted); padding-block: 1.25rem 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: 0.5rem; color: var(--color-border-strong); }
.breadcrumb li:last-child::after { content: ""; }

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--color-primary-deep); color: var(--color-on-dark-mute); }

.site-footer__grid {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--spacing-xl) var(--gutter) 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.site-footer img { height: 56px; width: auto; }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
  margin: 0 0 1rem;
}

.site-footer a { color: var(--color-on-dark-mute); }
.site-footer a:hover { color: var(--color-accent-soft); }

.footer-contact { font-size: 0.9375rem; line-height: 1.9; }
.footer-contact a { color: var(--color-on-dark-soft); display: block; }
.footer-contact span { display: block; color: var(--color-on-dark-dim); }

.footer-links { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9375rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

.site-footer__bar { border-top: 1px solid rgba(239, 234, 224, 0.14); }
.site-footer__bar > div {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.375rem var(--gutter);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--color-on-dark-dim);
}
.site-footer__bar a { color: var(--color-accent-dim); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__bar a:hover { color: var(--color-on-dark); }

/* --- Fejlsider ------------------------------------------------------------ */

.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-xl) var(--gutter);
}
.error-page h1 { font-size: clamp(3rem, 12vw, 7rem); color: var(--color-primary); margin-bottom: 0.5rem; }
.error-page p { color: var(--color-text-soft); margin-bottom: 2rem; max-width: 46ch; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 40em) {
  :root { --gutter: 1.5rem; }

  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery img { height: 220px; }

  .tiles { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
  /* Ét kort alene skal ikke strække sig over hele siden – se stay.js */
  .cards--single { grid-template-columns: minmax(0, 26rem); }

  .hero__body { padding: 7rem var(--gutter) 3.5rem; }
  .info-panel { padding: 2.75rem 2.5rem; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .site-header__logo img { height: 88px; }

  .tiles { grid-template-columns: repeat(5, 1fr); }
  .split { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 4rem; }
  .split img { min-height: 26rem; }

  .hero__body { padding: 8.75rem var(--gutter) 4rem; }
  .section { padding-block: var(--spacing-2xl); }
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}


/* --- Booking-side --------------------------------------------------------- */

/* Sirvoy-widgeten har en FAST iframe-højde på 401 px, uanset hvor bred
   beholderen er (målt 560-1232 px: altid 401). Over ca. 750 px lægger den
   felterne på én række og lader resten af højden stå tom; under stabler den
   dem og udfylder den. I fuld sidebredde blev det derfor et stort hvidt felt
   med en ensom sprogvælger. Spalten holdes på højst 32 rem, hvor widgeten
   stabler pænt, og den fylder samtidig den tomme højre halvdel ud for introen
   så formularen ligger over folden. */
/* Overskrift, tekst og formular står centreret under hinanden.
   De stod side om side indtil overskriften blev flyttet op over dem begge;
   derefter var venstre spalte 132 px høj ved siden af en formular på 450, og
   der blev 320 px tomt felt under telefonknappen. Stablet og centreret er der
   intet hul, og formularen får hele læserens opmærksomhed når den kommer. */
.booking-top {
  display: grid;
  justify-items: center;
  gap: var(--spacing-lg);
}

.booking-head { text-align: center; }

/* Ingen max-width på teksten: "Ring, skriv eller book online. Receptionen er
   åben dagligt 09.00–15.00." er én sætning og skal stå på én linje. Med en
   spærre på 44ch brækkede den midt i sætningen. */
.booking-head .lead { margin-inline: auto; }
.booking-head .rule { margin-inline: auto; }

/* Overskriften spænder over begge spalter og står altså over formularen. */
.booking-head { margin-bottom: var(--spacing-lg); }

.booking-head h1 {
  font-size: clamp(2.375rem, 4.6vw, 3.75rem);
  color: var(--color-primary);
  margin-bottom: 1.375rem;
}

/* Bredden holdes på 32 rem OGSÅ når spalterne er stablet. Over ca. 750 px
   skifter Sirvoy til en enkelt række og efterlader en tom venstre halvdel; med
   loftet her bliver formularen ved med at være den stablede, som udfylder
   kortet. Højden reserveres samtidig, så widgeten ikke skubber siden ned når
   den lander (CLS). */
/* width frem for kun max-width: i et grid med justify-items: center ville
   beholderen ellers krympe til sit indhold, og Sirvoy tegner først sit kort
   når scriptet er kørt – så ville den starte på 0 px bred. */
.booking-embed {
  width: min(100%, 32rem);
  min-height: 28rem;
}

/* Overnatningssidens panel har en indledning over punkterne. Booking-siden har
   ikke, så teksten får sin egen klasse frem for en regel på panelets <p>. */
.info-panel__lead {
  color: var(--color-on-dark-soft);
  max-width: 62ch;
  margin: -0.75rem 0 2rem;
}

/* Infopanelet under bookingen har kun fire korte punkter. I én søjle bliver
   det grønne felt næsten tomt på en bred skærm, så punkterne flyder i søjler. */
.info-panel--wide dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem 2.5rem;
}

/* Seks punkter i fire søjler giver 4 + 2 og et tomt hjørne. Med et højere
   minimum lander overnatningssidens panel på 3 + 3. */
.info-panel--thirds dl { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

/* --- Juridiske sider ------------------------------------------------------ */

.legal { border-top: 1px solid var(--color-border); }

.legal-section {
  border-bottom: 1px solid var(--color-border);
  padding: 2.125rem 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.legal-section__n {
  font-family: var(--font-display);
  font-size: 1.625rem;
  color: var(--color-accent-text);
  line-height: 1.1;
}

.legal-section h2 {
  font-size: 1.75rem;
  color: var(--color-primary);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.legal-section p { color: var(--color-text-soft); max-width: 70ch; }

.legal-cta {
  margin-top: 3.5rem;
  background: var(--color-primary);
  color: var(--color-on-dark-soft);
  padding: 2.5rem;
  display: flex;
  gap: 1.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.legal-cta h2 { color: var(--color-on-dark); font-size: clamp(1.625rem, 3vw, 2.125rem); max-width: 24ch; margin: 0; }

/* --- Tidslinje (historie) ------------------------------------------------- */

.timeline { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.timeline li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.timeline__year { font-family: var(--font-display); font-size: 1.375rem; color: var(--color-accent-text); }
.timeline__text { color: var(--color-text-soft); font-size: 0.9375rem; }

/* --- Formularer på mørk baggrund (selskaber) ------------------------------ */

.form--event { max-width: none; gap: 2.125rem; }

.form fieldset { border: 0; padding: 0; margin: 0; }

.form legend {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
  padding: 0 0 1.125rem;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.section--dark .form label { color: var(--color-on-dark-soft); }

.section--dark .form input,
.section--dark .form textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(239, 234, 224, 0.35);
  color: var(--color-on-dark);
  border-radius: 0;
  padding: 0.75rem 0;
}
.section--dark .form textarea {
  border: 1px solid rgba(239, 234, 224, 0.35);
  padding: 1rem;
}
.section--dark .form input::placeholder,
.section--dark .form textarea::placeholder { color: rgba(239, 234, 224, 0.55); }

.wishes-label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
  margin: 2.125rem 0 1rem;
}

.wishes { display: flex; gap: 0.625rem; flex-wrap: wrap; }

.wish {
  border: 1px solid rgba(239, 234, 224, 0.35);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  cursor: pointer;
  font-size: 0.9375rem;
  min-height: 44px;
}
.wish:hover { border-color: var(--color-accent-soft); }
.wish input { accent-color: var(--color-accent); margin: 0; width: auto; min-height: 0; }

.section--dark .form__status { color: var(--color-accent-soft); }

@media (min-width: 40em) {
  .field-grid { grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); }
  .legal-section { grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; }
}

/* ==========================================================================
   Kontakt-widget (flydende launcher + kort)
   ========================================================================== */

.cw-launcher {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: 0 14px 36px rgba(18, 34, 26, 0.18);
  cursor: pointer;
  font-size: 0.9375rem;
}
.cw-launcher:hover { border-color: var(--color-accent); color: var(--color-accent-text); }
.cw-launcher img { width: 36px; height: 36px; border-radius: 50%; }
.cw-dot { width: 8px; height: 8px; border-radius: 50%; background: #4C9A5A; flex: 0 0 auto; }

.cw-card {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 91;
  width: calc(100vw - 2rem);
  max-width: 24rem;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 26px 60px rgba(18, 34, 26, 0.26);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
[data-cw-open] .cw-card { opacity: 1; visibility: visible; transform: none; }
[data-cw-open] .cw-launcher { display: none; }

.cw-head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.cw-head img { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.cw-head strong { display: block; font-size: 1rem; color: var(--color-primary); }
.cw-head span { display: block; font-size: 0.8125rem; color: var(--color-muted); }

.cw-close {
  margin-left: auto;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; color: var(--color-muted);
  border-radius: var(--radius-sm);
  flex: 0 0 auto;
}
.cw-close:hover { background: var(--color-band); color: var(--color-primary); }

.cw-channels { list-style: none; margin: 0; padding: 0.875rem 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.cw-channels a {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0;
  min-height: 44px;
  color: var(--color-text);
}
.cw-channels a:hover { color: var(--color-accent-text); }
/* Teksten havde tidligere ingen klasser, så .cw-channels span (0,1,1) slog
   .cw-ico (0,1,0) og gav ikonet display:block + muted farve: SVG'en lå i
   hjørnet af cirklen i stedet for midt i, og var grå. Klasserne her holder de
   to regler adskilt. */
.cw-ico {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-band);
  color: var(--color-primary);
}
.cw-ico svg { display: block; }
.cw-txt { min-width: 0; }
.cw-channels strong {
  display: block;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.cw-sub { display: block; font-size: 0.8125rem; color: var(--color-muted); }

.cw-or {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0 1.25rem;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-muted);
}
.cw-or::before, .cw-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.cw-body { padding: 1rem 1.25rem 1.25rem; }
.cw-body .form { gap: 0.875rem; max-width: none; }
.cw-body .form label { font-size: 0.8125rem; color: var(--color-muted); }
.cw-body .form input, .cw-body .form textarea { font-size: 1rem; }
.cw-note { font-size: 0.75rem; color: var(--color-muted); text-align: center; margin-top: 0.875rem; }
.cw-note a { text-decoration: underline; }

@media (min-width: 40em) {
  .cw-launcher, .cw-card { right: 1.5rem; bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-card { transition: none; }
}