/* ==========================================================================
   HotSpot Sauna
   Designsystemet er bygget om én idé: kontrast. 90 grader mod 4 grader.
   Hver sektion tilhører enten VARMEN (ember) eller KULDEN (ice), og siden
   veksler mellem de to, ligesom en session gør.
   ========================================================================== */

/* --- 1. Fonte ------------------------------------------------------------ */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Neutral gråskala. Kampagnebogens brændte træ og håndklædefarve er
     bevidst lagt væk her: de varme toner blev brunlige på skærm. Farve på
     sitet kommer fra billederne og fra den grønne accent, ikke fra bunden. */
  --ink:        #000;
  --ink-raised: #0F0F0F;
  --ink-line:   rgba(255, 255, 255, .14);
  --cream:      #FFF;
  --cream-70:   rgba(255, 255, 255, .72);
  --cream-50:   rgba(255, 255, 255, .52);

  /* Temperaturfarverne. De bruges kun hvor der faktisk står en temperatur,
     altså på gradtallene og på varmestriben over sessionskortene. */
  --ember:      #C8451C;  /* glød */
  --ember-soft: #E08A3C;  /* lyskæde */
  --ice:        #7FA8B8;  /* is */
  --ice-deep:   #2F6379;  /* koldt kar */

  /* Brugerfladens accent. Grøn kommer fra græskanten i kampagnepaletten.
     Den mørke bruges som flade under cremefarvet tekst, den lyse som tekst
     på mørk bund, fordi den mørke ikke har kontrast nok der. */
  --accent-fill: #3A6B2E;
  --accent-fill-hover: #4A8239;
  /* Grøn tekst på sort. Den kan ikke blive lige så mørk som knapfladen,
     for #3A6B2E mod sort giver kun 3,3 til 1 og er dårligt læsbar. Det her
     er så dybt den kan komme og stadig ramme 5,5 til 1. */
  --accent-text: #5E9046;
  --accent-glow: rgba(58, 107, 46, .24);
  --grass:      #6B7A4B;  /* græskant */

  /* Type. Kampagnen kalder på kondenseret, tung og for stor til rammen.
     Anton gør det arbejde. Inter tager alt hvad der skal læses. */
  --font-display: 'Anton', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, 'Inter', Arial, sans-serif;
  --body-weight: 300;

  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1:  clamp(1.125rem, 1.05rem + .36vw, 1.375rem);
  --step-2:  clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --step-3:  clamp(1.75rem, 1.35rem + 1.9vw, 3rem);
  --step-4:  clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --step-5:  clamp(2.75rem, 1.4rem + 5.6vw, 5.75rem);

  /* Rum */
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 62ch;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --max: 1320px;

  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- 3. Reset og base ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .96;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent-fill); color: var(--cream); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  z-index: 999;
  background: var(--cream); color: var(--ink);
  padding: .75rem 1.25rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.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;
}

/* --- 4. Layout ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }

/* Temperaturzoner. Klasserne sætter både baggrund og de accenter der
   hører til zonen, så alt indhold automatisk hører hjemme. */
.zone-ember {
  background: var(--ink);
  --accent: var(--accent-text);
}
.zone-ice {
  background: #FFF;
  color: #000;
  --accent: var(--accent-fill);
}
.zone-ice .eyebrow { color: var(--accent-fill); }
.zone-ice .lead { color: rgba(0, 0, 0, .72); }
.zone-deep { background: #000; --accent: var(--ice); --accent-soft: var(--ice); }

/* Nabosektioner adskilles ved at den ene er en anelse lysere. Bunden er ren
   sort, så der er ikke noget mørkere at gå til. */
.zone-ember[data-alt] { background: #0F0F0F; }

/* --- 5. Typografiske hjælpere -------------------------------------------- */

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent, var(--accent-text));
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::before {
  content: '';
  width: 2.25rem; height: 1px;
  background: currentColor;
  opacity: .65;
  flex: none;
}

.display {
  font-size: var(--step-5);
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .86;
}
.h2 { font-size: var(--step-4); text-transform: uppercase; letter-spacing: 0; line-height: .9; }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--cream-70);
  max-width: 54ch;
}

/* Bruges til sekundær information: varighed, brødkrumme, småt under et
   afsnit. Almindelig tekst, ikke et mærkat. */
.meta {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--cream-50);
}
.zone-ice .meta { color: rgba(0, 0, 0, .56); }

/* Tal og temperaturer sættes i display-fonten, tabulært */
.temp { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* --- 6. Knapper ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent-fill);
  --btn-fg: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  border-color: rgba(255, 255, 255, .34);
}
.btn--ghost:hover { border-color: var(--cream); background: rgba(255, 255, 255, .07); }
.zone-ice .btn--ghost { --btn-fg: #000; border-color: rgba(0, 0, 0, .26); }
.zone-ice .btn--ghost:hover { border-color: #000; background: rgba(0, 0, 0, .05); }

.btn--ice { --btn-bg: var(--ice); --btn-fg: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Tekstlink med underlinje der vokser */
.link {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent, var(--accent-text));
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.link:hover { background-size: 100% 1px; }
.link::after { content: '→'; transition: transform .25s var(--ease); }
.link:hover::after { transform: translateX(4px); }

/* --- 7. Header ----------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 1rem;
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease),
              padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(0, 0, 0, .88);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--ink-line);
  padding-block: .6rem;
}
/* Tre spalter: menuknap, logo, bookingknap. De to yderste er lige brede,
   så logoet står præcis i midten uanset hvor bred knappen bliver. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.site-header__cta { justify-self: end; }
.brand { justify-self: center; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--cream); }
.brand svg { width: auto; height: 32px; transition: height .3s var(--ease); }
.site-header.is-stuck .brand svg { height: 26px; }
.brand__name {
  font-family: var(--font-display);
  font-size: .9375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.05;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font-family: var(--font-body);
  font-size: var(--step-0);
  letter-spacing: 0;
  text-decoration: none;
  color: var(--cream);
  position: relative;
  padding-block: .3rem;
  transition: color .2s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--accent-text); }
.nav a[aria-current]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-text);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--cream);
  align-items: center; justify-content: center;
}
/* Kun den første span er selve burgeren. Den anden er skjult tekst til
   skærmlæsere og må ikke formes som en streg. */
.nav-toggle span:not(.visually-hidden) {
  display: block; width: 22px; height: 1.5px;
  background: currentColor; position: relative;
  transition: background .2s var(--ease);
}
.nav-toggle span:not(.visually-hidden)::before,
.nav-toggle span:not(.visually-hidden)::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 1.5px; background: currentColor;
  transition: transform .25s var(--ease);
}
.nav-toggle span:not(.visually-hidden)::before { top: -7px; }
.nav-toggle span:not(.visually-hidden)::after { top: 7px; }
.nav-toggle[aria-expanded='true'] span:not(.visually-hidden) { background: transparent; }
.nav-toggle[aria-expanded='true'] span:not(.visually-hidden)::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:not(.visually-hidden)::after { transform: translateY(-7px) rotate(-45deg); }

/* Krydset skal ligge over panelet, ellers kan menuen ikke lukkes igen. */
.nav-toggle { display: flex; position: relative; z-index: 100; justify-self: start; }

/* Mørklægning bag panelet. Den fanger også kliks, så et tryk ved siden af
   menuen lukker den, hvilket er det folk forventer. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-scrim[data-open='true'] { opacity: 1; visibility: visible; }

.nav {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 99;
  width: min(86vw, 380px);
  background: #0A0A0A;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 5.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(101%);
  transition: transform .42s var(--ease);
  border-left: 1px solid rgba(255, 255, 255, .14);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
  --cream: #fff;
  --cream-70: rgba(255, 255, 255, .72);
  --cream-50: rgba(255, 255, 255, .5);
}
.nav[data-open='true'] { transform: translateX(0); }

.nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 1.625rem);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
  padding-block: .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), color .2s var(--ease);
}
.nav[data-open='true'] a:not(.btn) {
  opacity: 1;
  transform: none;
  transition-delay: var(--i, 0ms);
}
.nav a[aria-current]::after { display: none; }
.nav a[aria-current] { color: var(--accent-text); }
.nav a:not(.btn):hover { color: var(--accent-text); }

.nav .btn {
  margin-top: 1.75rem;
  width: 100%;
  padding-block: 1.05rem;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}
.nav[data-open='true'] .btn { opacity: 1; transform: none; transition-delay: var(--i, 0ms); }

.nav__foot {
  margin-top: auto;
  padding-top: 2rem;
  font-size: var(--step--1);
  color: var(--cream-50);
  line-height: 1.7;
}
.nav .nav__foot a:not(.btn) {
  font-family: var(--font-body);
  font-size: var(--step--1);
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  transform: none;
  color: var(--cream-70);
}
.nav .nav__foot p { margin: 0; }

/* Bookingknappen i toppen skjules på små skærme, den står i panelet i
   stedet, og der er allerede en fast bar i bunden. */
@media (max-width: 620px) {
  .site-header__cta { display: none; }
  .site-header__inner { grid-template-columns: 1fr auto 1fr; }
}


/* --- 8. Hero ------------------------------------------------------------- */
/* Centreret om logoet, med HotSpots egen video bagved. Videoen er vertikal,
   så på brede skærme beskæres den kraftigt. Derfor ligger al vægten i
   midten, hvor der altid er billede. */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture,
.hero__media video { display: block; width: 100%; height: 100%; }
.hero__media img,
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .74) 68%, rgba(0, 0, 0, .92) 100%),
    linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .6) 100%);
}

.hero__inner {
  padding-block: 7rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero__logo {
  width: auto;
  height: clamp(58px, 11vw, 104px);
  color: var(--cream);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* To korte linjer fylder allerede meget lodret, så typen skrues ned.
   Cirka en tredjedel mindre end den fulde displaystørrelse. */
.hero__title {
  max-width: 14ch;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 3.75rem);
  line-height: .92;
}

/* Underlinjen bærer søgeordet og byen. Den hører til brødteksten, ikke til
   displayfonten, ellers slås de to linjer om opmærksomheden. */
.display__sub {
  display: block;
  margin: 1.1rem auto 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--cream-50);
}

.hero__tagline {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  max-width: 30ch;
  font-size: clamp(1.0625rem, .9rem + .5vw, 1.375rem);
  line-height: 1.45;
  color: var(--cream-70);
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  padding: .5rem 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--cream-70);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__rating b { color: var(--cream); font-weight: 600; }
.hero__stars {
  color: var(--ember-soft);
  letter-spacing: .1em;
  font-size: .9em;
}
/* Den sidste stjerne står for de 0,4 og vises derfor kun delvist. */
.hero__stars > span {
  display: inline-block;
  clip-path: inset(0 60% 0 0);
  margin-left: -.05em;
}

.hero .btn-row { justify-content: center; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

@media (max-width: 560px) {
  .hero .btn-row { width: 100%; flex-direction: column; }
  .hero .btn-row .btn { width: 100%; }
}

/* --- 9. Kontrastpanelet -------------------------------------------------- */
/* Tre paneler: varme, kulde, kontrast. Det er sidens tese. */

.contrast {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ink-line);
}
/* Tre paneler i to spalter efterlader et hul. I det interval får det sidste
   panel hele bredden, så rækken lukker. */
@media (min-width: 620px) {
  .contrast { grid-template-columns: 1fr 1fr; }
  .contrast__panel:last-child { grid-column: 1 / -1; min-height: clamp(360px, 40vh, 460px); }
}
@media (min-width: 1000px) {
  .contrast { grid-template-columns: repeat(3, 1fr); }
  .contrast__panel:last-child { grid-column: auto; min-height: clamp(420px, 56vh, 620px); }
}
.contrast__panel {
  position: relative;
  min-height: clamp(420px, 56vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.contrast__panel picture { display: contents; }
.contrast__panel img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.contrast__panel:hover img { transform: scale(1.04); }
.contrast__panel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, .93) 12%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .15) 100%);
}
.contrast__panel--hot::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .93) 12%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .2) 100%);
}
.contrast__panel--cold::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .93) 12%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .2) 100%);
}
.contrast__temp {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: .85;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.contrast__panel--hot .contrast__temp { color: var(--ember-soft); }
.contrast__panel--cold .contrast__temp { color: var(--ice); }
.contrast__panel h3 {
  font-size: var(--step-2);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .75rem;
}
.contrast__panel p { color: var(--cream-70); font-size: var(--step-0); max-width: 34ch; }
.contrast__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.contrast__list li {
  font-size: var(--step--1);
  color: var(--cream-70);
  padding-left: 1.1rem;
  position: relative;
}
.contrast__list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ember-soft);
}
.contrast__panel--cold .contrast__list li::before { background: var(--ice); }
.contrast__panel--both .contrast__list li::before {
  background: linear-gradient(135deg, var(--ice), var(--ember));
}

/* --- 10. Sessionskort ---------------------------------------------------- */

.sessions { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.session {
  color: var(--cream);
  --accent: var(--accent-text);
  display: flex;
  flex-direction: column;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.session:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-4px); }
.session__heat { height: 3px; width: 100%; }
.session--deepslow .session__heat { background: linear-gradient(90deg, var(--ice), #8fa6b4 60%, #b08f76); }
.session--slow .session__heat { background: linear-gradient(90deg, var(--ice), var(--ember-soft)); }
.session--flow .session__heat { background: linear-gradient(90deg, #8fa6b4, var(--ember-soft) 45%, var(--ember)); }
.session__body { padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; flex: 1; gap: .85rem; }
.session__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
}
.session__body p { color: var(--cream-70); font-size: var(--step-0); flex: 1; }
.session__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: .5rem; border-top: 1px solid var(--ink-line);
}

/* --- 11. Split: billede og tekst ----------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split--wide .split__media img { aspect-ratio: 3 / 2; }

/* --- 12. Movement ------------------------------------------------------- */

/* Fire kort, altid. Tidligere auto-fit, men da alle tre brugssteder har
   praecis fire kort gav tre kolonner en raekke med to tomme felter, og de
   tomme felter er synlige fordi gitterets baggrund tegner hairlines. */
.movement { display: grid; gap: 1px; background: var(--ink-line); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .movement { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .movement { grid-template-columns: repeat(4, 1fr); } }
.movement__item {
  background: var(--ink);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: .75rem;
  transition: background .3s var(--ease);
}
.movement__item:hover { background: var(--ink-raised); }
.movement__item h3 { font-size: var(--step-2); text-transform: uppercase; }
.movement__item p { color: var(--cream-70); font-size: var(--step--1); }

/* --- 13. Priser ---------------------------------------------------------- */

/* Fire pakker. Auto-fit gav tre kolonner paa mellemstore skaerme, og saa stod
   Unlimited alene paa anden raekke som om noget manglede. 1, 2 eller 4. */
.prices { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 620px)  { .prices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .prices { grid-template-columns: repeat(4, 1fr); } }

.price {
  color: var(--cream);
  --accent: var(--accent-text);
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  position: relative;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.price:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .2); }
.price--featured { border-color: var(--accent-fill-hover); background: linear-gradient(180deg, var(--accent-glow), var(--ink-raised) 55%); }
.price__flag {
  position: absolute; top: -.7rem; left: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--accent-fill); color: var(--cream);
  font-family: var(--font-body); font-weight: 500; font-size: .75rem;
  padding: .3rem .8rem; border-radius: 999px;
}
.price__name { font-family: var(--font-display); font-size: var(--step-1); text-transform: uppercase; }
.price__amount { font-family: var(--font-display); font-size: var(--step-4); line-height: .95; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price__amount small { font-size: var(--step-0); letter-spacing: .04em; color: var(--cream-50); }
.price__note { font-size: var(--step--1); color: var(--cream-70); flex: 1; }
.price__bonus { color: var(--accent-text); font-size: var(--step--1); }
.price .btn { width: 100%; }

/* --- 14. Team ------------------------------------------------------------ */

.owners { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 760px; }
.owner { display: grid; gap: 1rem; }
.owner img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }

/* Kolonnetallet kommer fra PHP, som vaelger et tal der gaar op i antallet
   af facilitatorer. Saa staar den sidste raekke aldrig halvtom, ogsaa hvis
   listen aendrer laengde. Vaerdierne her er kun fallback. */
.team { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(var(--cols-sm, 2), 1fr); }
@media (min-width: 700px)  { .team { grid-template-columns: repeat(var(--cols-mid, 3), 1fr); } }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.member { display: flex; flex-direction: column; gap: .9rem; }
.member__photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-raised); }
.member__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease); }
.member:hover .member__photo img { transform: scale(1.03); }
.member__role { font-size: var(--step--1); color: var(--cream-50); }
.member__name { font-family: var(--font-display); font-size: var(--step-2); text-transform: uppercase; }
.member__bio { font-size: var(--step--1); color: var(--cream-70); line-height: 1.6; }

/* --- 15. Accordion (sessionsforløb) -------------------------------------- */

.steps { display: grid; gap: 1px; background: var(--ink-line); border-block: 1px solid var(--ink-line); }
.step { background: var(--ink); }
.step__head {
  width: 100%; display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2.5vw, 1.9rem) 0;
  background: none; border: 0; color: inherit; cursor: pointer; text-align: left;
  font-family: var(--font-body);
}
.step__num { font-size: var(--step--1); color: var(--accent-text); flex: none; }
.step__title { font-family: var(--font-display); font-size: var(--step-2); text-transform: uppercase; flex: 1; }
.step__time { font-size: var(--step--1); color: var(--cream-50); flex: none; }
.step__sign { flex: none; width: 14px; height: 14px; position: relative; }
.step__sign::before, .step__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--cream-70);
  transition: transform .3s var(--ease);
}
.step__sign::after { transform: rotate(90deg); }
.step[data-open='true'] .step__sign::after { transform: rotate(0); }
.step__panel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.step[data-open='true'] .step__panel { grid-template-rows: 1fr; }
.step__panel > div { min-height: 0; }
.step__panel p { color: var(--cream-70); padding-bottom: 1.75rem; max-width: 66ch; }

/* --- 16. Forplejning og events ------------------------------------------- */

.cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Kortene er mørke uanset hvilken zone de står i. Uden en egen tekstfarve
   arver de zonens, og i en lys sektion gav det sort tekst på næsten sort
   kort. Derfor sætter kortet selv både bund og tekst. */
.card {
  display: flex; flex-direction: column;
  background: var(--ink-raised);
  color: var(--cream);
  --accent: var(--accent-text);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .2); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__body { padding: clamp(1.4rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.card__body h3 { font-size: var(--step-1); text-transform: uppercase; letter-spacing: .01em; }
.card__body p { font-size: var(--step--1); color: var(--cream-70); flex: 1; }
.card .meta { color: var(--cream-50); }
.card a { color: inherit; }

/* --- 17. Booking-embed --------------------------------------------------- */

/* Kalenderen kommer fra Bookli og er selv mørk, så rammen holdes neutral.
   Højden sættes af site.js ud fra det embedden selv melder. Indtil da står
   en startshøjde, så der ikke er et tomt hul mens den loader. */
.embed {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-raised);
  transition: height .3s var(--ease);
}
.embed__frame {
  width: 100%;
  height: 560px;
  border: 0;
  display: block;
  transition: height .25s var(--ease);
}
.embed__fallback { padding: clamp(2rem, 5vw, 4rem); text-align: center; }

/* --- 18. Footer ---------------------------------------------------------- */

.site-footer { background: #000; border-top: 1px solid var(--ink-line); padding-block: clamp(3.5rem, 6vw, 5.5rem) 0; overflow: hidden; }

/* Navnet i fuld bredde nederst. Bunden af bogstaverne skaeres af sidekanten,
   saa det laeser som et praeg i papiret og ikke som en overskrift der er
   blevet for stor. Stoerrelsen er i vw, saa ordet altid spaender bredden,
   og line-height er sat lavere end 1 for at fjerne luften over versalerne. */
.footer__wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 31.6vw;
  line-height: .8;
  letter-spacing: -.012em;
  text-align: center;
  color: var(--cream);
  margin-top: clamp(2rem, 5vw, 4rem);
  margin-bottom: -.055em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer__brand svg { height: 40px; width: auto; color: var(--cream); margin-bottom: 1.25rem; }
.footer h4 {
  font-family: var(--font-display); font-size: var(--step-0);
  text-transform: uppercase; color: var(--cream);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; color: var(--cream-70); transition: color .2s var(--ease); font-size: var(--step--1); }
.footer a:hover { color: var(--cream); }
.footer address { font-style: normal; color: var(--cream-70); font-size: var(--step--1); line-height: 1.8; }
.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid var(--ink-line);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .8125rem; color: var(--cream-50);
}

/* --- 19. Mobil bookingbar ------------------------------------------------ */
/* Konverteringen sker i Bookli, ikke her. Derfor skal vejen dertil altid
   være ét tryk væk på telefonen, hvor størstedelen af trafikken er. */

.bookbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--ink-line);
  display: none;
  align-items: center;
  gap: 1rem;
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.bookbar.is-visible { transform: translateY(0); }
.bookbar__text { flex: 1; min-width: 0; }
.bookbar__text strong { display: block; font-family: var(--font-display); font-size: var(--step-0); text-transform: uppercase; }
.bookbar__text span { font-size: .75rem; color: var(--cream-50); }
.bookbar .btn { padding-inline: 1.25rem; }
@media (max-width: 760px) { .bookbar { display: flex; } body { padding-bottom: 0; } }

/* --- 20. Bevægelse ------------------------------------------------------- */

/* Indtoningen er en forbedring, ikke en forudsætning. Reglerne hænger på
   .js, som sættes af et lille inline-script i head. Fejler JavaScript, eller
   er det slået fra, står alt indhold der bare med det samme. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --- 21. Print ----------------------------------------------------------- */

@media print {
  .site-header, .bookbar, .nav-toggle, .hero__media { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- 22. Accordion i lyse zoner ------------------------------------------ */
/* Trin-blokken arver mørk baggrund fra standardtemaet. I en lys sektion skal
   den vende om, ellers ligger der en sort kasse midt i cremen. */

.zone-ice .steps { background: rgba(0, 0, 0, .12); border-color: rgba(0, 0, 0, .12); }
.zone-ice .step { background: #FFF; }
.zone-ice .step__panel p { color: rgba(0, 0, 0, .72); }
.zone-ice .step__time { color: rgba(0, 0, 0, .5); }
.zone-ice .step__sign::before,
.zone-ice .step__sign::after { background: rgba(0, 0, 0, .6); }
.zone-ice .step__num { color: var(--accent-fill); }

/* ==========================================================================
   23. Bevægelse

   Kampagnen siger bevægelsesuskarphed, ikke slowmotion. Alt herunder er
   hurtigt, kort og motiveret af indholdet. Intet kører i loop bare fordi
   det kan, og hele blokken slås fra ved prefers-reduced-motion nederst.
   ========================================================================== */

/* --- Heltebilledet trækker sig langsomt tættere på ---------------------- */

@keyframes hero-drift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.js .hero__media img,
.js .hero__video {
  animation: hero-drift 20s var(--ease) forwards;
}

/* --- Overskriften rejser sig linje for linje ---------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.js .hero__inner > * {
  animation: rise .8s var(--ease) both;
}
.js .hero__logo { animation-delay: .1s; }
.js .hero .display { animation-delay: .24s; }
.js .hero__tagline { animation-delay: .38s; }
.js .hero__rating { animation-delay: .5s; }
.js .hero .btn-row { animation-delay: .6s; }

/* --- Termometeret fyldes fra koldt mod varmt ---------------------------- */


/* --- Varmestriben over sessionskortene skydes ind ----------------------- */

.session__heat { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.js .session.is-in .session__heat,
.js [data-reveal].is-in .session__heat { transform: scaleX(1); }

/* --- Knapper får en flade der fejer henover ---------------------------- */

.btn { position: relative; overflow: hidden; z-index: 0; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-fill-hover);
  transform: translateX(-101%);
  transition: transform .4s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn--ghost::before { background: rgba(255, 255, 255, .1); }
.zone-ice .btn--ghost::before { background: rgba(0, 0, 0, .07); }

/* --- Kort løfter sig og billedet trækker sig sammen -------------------- */

.card img, .split__media img, .member__photo img {
  transition: transform .7s var(--ease);
}
.card:hover img, .member:hover .member__photo img { transform: scale(1.04); }


/* --- Gradtallene tælles op --------------------------------------------- */

.contrast__temp { font-variant-numeric: tabular-nums; }

/* --- Header krymper og får bund ---------------------------------------- */

.site-header { will-change: padding, background; }

/* --- Trinene folder sig ud med indhold der glider ind ------------------ */

.step__panel > div > p {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .35s var(--ease) .08s, transform .35s var(--ease) .08s;
}
.step[data-open='true'] .step__panel > div > p { opacity: 1; transform: none; }

/* --- Alt ovenstående slås fra hvis brugeren har bedt om ro ------------- */

@media (prefers-reduced-motion: reduce) {
  .js .hero__media img,
  .js .hero__video,
  .js .hero__inner > *,
  .session__heat { transform: scaleX(1); }
  .step__panel > div > p { opacity: 1; transform: none; }
  .btn::before { display: none; }
}

/* --- 24. Sociale ikoner --------------------------------------------------- */
/* Samme komponent i menuen og i footeren, så de aldrig kommer ud af trit. */

/* Ikonerne stod som små glyffer inde i store tomme ringe og forsvandt mod
   det sorte. Nu er selve mærket det synlige, ringen er væk, og feltet man
   kan trykke på er stadig 44 px. */
.social { display: flex; gap: .35rem; }
.social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--cream);
  transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.social a:hover {
  color: var(--accent-text);
  background: rgba(255, 255, 255, .08);
  transform: translateY(-2px);
}
.social svg { width: 22px; height: 22px; }

/* Fokusmarkeringen skal følge cirklen, ikke sidde som et firkantet felt. */
.social a:focus-visible { outline-offset: 0; border-radius: 50%; }

.social--footer { margin-top: 1.25rem; }
.social--nav { margin-bottom: 1.5rem; }

/* --- 25. De tre runder --------------------------------------------------- */
/* Tre kolonner, alt synligt på én gang. Forløbet skal kunne overskues uden
   at klikke, fordi det er præcis det en førstegangsgæst er usikker på. */

.rounds {
  display: grid;
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .rounds { grid-template-columns: repeat(3, 1fr); }
  /* Fire trin i et tre-spalters gitter efterlader to tomme felter og ser
     halvfærdigt ud. To og to indtil der er plads til alle fire. */
  .rounds--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .rounds--four { grid-template-columns: repeat(4, 1fr); }
}

/* Runderne er mørke uanset hvilken sektion de står i, ligesom kortene og
   prisboksene. Uden en egen tekstfarve ville de arve en lys zones sorte
   tekst og forsvinde. */
.round {
  background: var(--ink);
  color: var(--cream);
  --accent: var(--accent-text);
  display: flex;
  flex-direction: column;
}
.round__media { overflow: hidden; }
.round__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.round:hover .round__media img { transform: scale(1.04); }

.round__body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}

.round__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--accent, var(--accent-text));
  margin: 0;
}
.round__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  margin: 0;
}
.round__time { font-size: var(--step--1); color: var(--cream-50); margin: 0; }

.round__text { font-size: var(--step-0); color: var(--cream-70); margin: 0; flex: 1; }

/* Pausen mellem runderne. Den hører til runden, men er ikke selve runden,
   så den skilles ud med en streg. */
.round__after {
  margin: .4rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--ink-line);
  font-size: var(--step--1);
  color: var(--cream-50);
}

/* --- 26. FAQ ------------------------------------------------------------- */
/* Spørgsmål er ikke overskrifter. De kørte i displayfonten og lignede ni
   plakater på stribe. Her er de almindelig tekst, tættere, og plusset er
   en synlig knap frem for et løst tegn ude i kanten. */

/* .faq og .steps sidder på det samme element. Derfor .steps.faq og ikke
   ".faq .steps", som ville lede efter en .steps INDE I en .faq. */
.steps.faq {
  background: none;
  border: 0;
  border-top: 1px solid var(--ink-line);
  border-radius: 0;
  gap: 0;
}
.faq .step {
  background: transparent;
  border-bottom: 1px solid var(--ink-line);
}

.faq .step__head {
  gap: 1.5rem;
  padding: 1.15rem 0;
  align-items: center;
  transition: color .2s var(--ease);
}
.faq .step__head:hover { color: var(--accent-text); }

.faq .step__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

/* Plusset bliver til en cirkel, så det ligner noget man kan trykke på. */
.faq .step__sign {
  width: 30px;
  height: 30px;
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  transition: border-color .2s var(--ease), transform .3s var(--ease);
}
.faq .step__head:hover .step__sign { border-color: var(--accent-text); }
.faq .step[data-open='true'] .step__sign { transform: rotate(180deg); }
.faq .step__sign::before,
.faq .step__sign::after { inset: 50% 9px auto; }

.faq .step__panel p { padding-bottom: 1.35rem; font-size: var(--step-0); }

/* --- 27. Mailvalg -------------------------------------------------------- */
/* Native <dialog>. Ingen bibliotek, og browseren klarer selv fokusfælde,
   Escape og at resten af siden bliver inaktiv. */

.maildlg {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--cream);
  max-width: min(94vw, 460px);
  width: 100%;
}
.maildlg::backdrop {
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.maildlg__inner {
  position: relative;
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: left;
}

.maildlg__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-transform: uppercase;
  margin: 0 0 .75rem;
}
.maildlg__text { color: var(--cream-70); font-size: var(--step-0); margin: 0 0 1.5rem; }

.maildlg__actions { display: grid; gap: .6rem; }
.maildlg__actions .btn { width: 100%; }

.maildlg__note {
  margin: 1.5rem 0 0;
  font-size: var(--step--1);
  color: var(--cream-50);
}
.maildlg__note span { color: var(--cream-70); }

.maildlg__close {
  position: absolute;
  top: .75rem; right: .75rem;
  width: 38px; height: 38px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--cream-50);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.maildlg__close:hover { color: var(--cream); background: rgba(255, 255, 255, .08); }

@media (prefers-reduced-motion: no-preference) {
  .maildlg[open] .maildlg__inner { animation: maildlg-in .25s var(--ease); }
  @keyframes maildlg-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* --- 28. Praktiske punkter ----------------------------------------------- */
/* Fem korte ting man skimmer før man tager afsted. Derfor et gitter med
   luft, ikke en tekstblok. */

.facts {
  display: grid;
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: 1fr;
}
/* Fem er et primtal, saa to kolonner ville altid efterlade et tomt felt i
   sidste raekke, og felterne har synlige skillelinjer. Derfor kun en eller fem. */
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(5, 1fr); } }

.fact {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}
/* Ikonet gaar foer overskriften, saa punktet kan genkendes foer det laeses. */
.fact .ikon {
  width: clamp(26px, 2.4vw, 32px);
  height: auto;
  color: var(--accent-text);
  margin-bottom: clamp(.75rem, 1.4vw, 1rem);
}
.fact__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  margin: 0 0 .5rem;
  color: var(--accent-text);
}
.fact__text { font-size: var(--step--1); color: var(--cream-70); margin: 0; }

/* --- 29. Fuldbredde-billeder --------------------------------------------- */
/* På en landingsside skal de store billeder gå helt ud til kanten og ikke
   ligge som indskudte kort med luft omkring.

   Afstanden ud til kanten er sidens margen plus det der er tilovers når
   indholdet er smallere end vinduet. At regne med 50% virker ikke her,
   fordi elementet kun fylder én kolonne i gitteret og ikke halvdelen af
   siden. */

.split--bleed {
  --bleed: calc(var(--gutter) + max(0px, (100vw - var(--max)) / 2));
  gap: 0;
  align-items: stretch;
}

@media (max-width: 899px) {
  .split--bleed .split__media {
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }
  .split--bleed .split__media img { aspect-ratio: 4 / 3; }
}

@media (min-width: 900px) {
  /* Billedet skal flugte med tekstspaltens top og bund. Med center blev
     mediefeltet kun saa hoejt som billedets egen hoejde, og saa svaevede
     det midt i sektionen uden at hoere sammen med teksten. */
  .split--bleed { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split--bleed .split__media { border-radius: 0; }

  /* Billedet skal ogsaa naa sektionens over- og underkant, ikke kun dens
     sider. Den negative lodrette margen ophaever praecis sektionens egen
     luft, saa billedet gaar fra kant til kant og teksten beholder sin. */
  .split--bleed .split__media { margin-block: calc(-1 * var(--section-y)); }

  /* Hvilken vej billedet skal bryde ud afhænger af hvilken side det står i,
     og det varierer mellem skabelonerne. Uden --reverse følger den visuelle
     rækkefølge DOM-rækkefølgen. Med --reverse flyttes billedet til anden
     kolonne med order, uanset hvor det står i koden. */
  .split--bleed:not(.split--reverse) .split__media:first-child {
    margin-left: calc(-1 * var(--bleed));
  }
  .split--bleed:not(.split--reverse) .split__media:last-child {
    margin-right: calc(-1 * var(--bleed));
  }
  .split--bleed.split--reverse .split__media {
    margin-left: 0;
    margin-right: calc(-1 * var(--bleed));
  }
  /* <picture> er inline og har derfor ingen hoejde. Uden det her falder
     billedet tilbage paa sin minimumshoejde og svaever midt i spalten med
     hvidt over og under. Samme faelde som i heltebilledet. */
  .split--bleed .split__media picture { display: block; height: 100%; }
  .split--bleed .split__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    min-height: clamp(420px, 52vh, 620px);
    object-fit: cover;
  }
  .split--bleed > div:not(.split__media) { padding-inline: clamp(1rem, 3.5vw, 3rem); }

  /* Tekstens lige kant vender mod billedet. Ligger billedet til hoejre, saettes
     teksten hoejrestillet, saa de to moedes paa en ren linje i stedet for en
     takket. Kun paa .split--kant, fordi det koster paa laesbarheden. */
  .split--kant.split--reverse > div:not(.split__media) { text-align: right; }
  .split--kant.split--reverse > div:not(.split__media) p { margin-left: auto; }
  .split--kant.split--reverse > div:not(.split__media) .btn-row { justify-content: flex-end; }
}

.section:has(.split--bleed) { overflow: hidden; }

/* --- 30. Videre til næste side ------------------------------------------- */
/* Hver side ender med en vej videre, så man kan komme hele vejen rundt uden
   at bruge menuen. Det holder folk i gang, og det giver Google en tydelig
   rækkefølge mellem siderne. */

.next {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--cream);
  isolation: isolate;
  min-height: clamp(280px, 38vh, 420px);
}
.next img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.next:hover img { transform: scale(1.04); }
.next::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.9) 10%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.6) 100%);
}
.next__inner {
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.next__label {
  font-size: var(--step--1);
  color: var(--cream-50);
  margin: 0 0 .5rem;
}
.next__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  text-transform: uppercase;
  line-height: .95;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.next__title::after {
  content: '→';
  font-family: var(--font-body);
  font-size: .6em;
  transition: transform .3s var(--ease);
}
.next:hover .next__title::after { transform: translateX(8px); }
.next__text { color: var(--cream-70); margin: .75rem 0 0; max-width: 48ch; }

/* --- 31. Tidslinjen ------------------------------------------------------ */
/* Trinene ligger skiftevis over og under en fælles linje, med et rundt
   billede på selve linjen ved hvert trin. Cirklen kan være stor uden at
   tvinge sektionen i højden, fordi den deler plads med linjen i stedet for
   at ligge oven over teksten.

   Sektionen bryder ud i fuld bredde. Syv trin indenfor sidens margen ville
   give omkring 150 px per trin, og der kan der ikke stå noget. */

/* Tidslinjen ligger allerede uden for .wrap, altså i fuld bredde. Den skal
   derfor kun have en indvendig margen, ikke negative margener oveni. */
.tl { padding-inline: clamp(1.5rem, 3.5vw, 4rem); }

.tl__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  position: relative;
  min-height: 470px;
}

.tl__track::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--ink-line);
}

/* To faste raekker, en over og en under linjen. Kortet forankres i toppen af
   sin raekke, ikke op mod linjen. Det er det der goer at alle overskrifter
   staar i samme hoejde: tid og titel faar samme afstand til raekkens top,
   uanset hvor lang teksten under dem er. */
.tl__step {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
}

/* Det runde billede sidder midt på linjen. */
.tl__dot {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(76px, 8vw, 116px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--accent-text);
  transition: transform .4s var(--ease), box-shadow .3s var(--ease);
}
/* Samme <picture>-faelde som i heltebilledet og i de delte sektioner:
   wrapperen er inline og har ingen hoejde, saa billedet fyldte ikke
   cirklen ud og efterlod en ring af baggrund indeni. */
.tl__dot picture { display: block; width: 100%; height: 100%; }
.tl__dot img { width: 100%; height: 100%; object-fit: cover; }
.tl__step:hover .tl__dot {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 2px var(--accent-text);
}

/* Stregen mellem cirklen og teksten. */
.tl__step::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--ink-line);
}
.tl__step--over::before  { bottom: calc(50% + clamp(38px, 4vw, 58px)); height: 26px; }
.tl__step--under::before { top: calc(50% + clamp(38px, 4vw, 58px)); height: 26px; }

.tl__card {
  width: 100%;
  padding-inline: clamp(.5rem, 1vw, 1rem);
  text-align: center;
  align-self: start;
}
.tl__step--over  .tl__card { grid-row: 1; }
/* Under linjen skal kortet forbi cirklen og stregstumpen foerst. */
.tl__step--under .tl__card { grid-row: 2; padding-top: clamp(68px, 7vw, 92px); }

.tl__time { margin: 0 0 .3rem; font-size: var(--step--1); color: var(--accent-text); }
.tl__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-transform: uppercase;
  margin: 0 0 .4rem;
  line-height: 1.05;
}
.tl__text { margin: 0 auto; font-size: var(--step--1); line-height: 1.5; color: var(--cream-70); max-width: 22ch; }

/* Under 1000 px bliver det en lodret liste. Syv trin ved siden af hinanden
   er ulæseligt, og cirklen flytter ud i venstre side som et mærke. */
@media (max-width: 999px) {
  .tl { padding-inline: var(--gutter); }
  .tl__track {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-left: clamp(4.5rem, 16vw, 6rem);
    gap: 1.25rem;
  }
  .tl__track::before {
    left: clamp(2.25rem, 8vw, 3rem);
    right: auto; top: 1.5rem; bottom: 1.5rem;
    width: 1px; height: auto;
  }
  /* Den lodrette liste har ikke to sider af en linje, saa de to faste
     raekker og afstanden ned forbi cirklen nulstilles her. */
  .tl__step { height: auto; grid-template-rows: auto; justify-items: stretch; }
  .tl__step::before { display: none; }
  .tl__dot {
    top: 0; left: clamp(2.25rem, 8vw, 3rem);
    width: clamp(56px, 14vw, 72px);
    transform: translate(-50%, 0);
  }
  .tl__step:hover .tl__dot { transform: translate(-50%, 0) scale(1.06); }
  .tl__card,
  .tl__step--over .tl__card,
  .tl__step--under .tl__card {
    grid-row: auto;
    align-self: auto;
    text-align: left;
    padding-inline: 0;
    padding-top: 0;
    min-height: clamp(56px, 14vw, 72px);
  }
  .tl__text { margin: 0; max-width: none; }
  .tl__title { font-size: var(--step-1); }
}

/* --- 32. Stemningsbilleder ----------------------------------------------- */
/* Ingen overskrift og ingen tekst. Nogle ting skal ses, ikke forklares. */

.mood {
  display: grid;
  gap: 1px;
  background: var(--ink-line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .mood { grid-template-columns: repeat(4, 1fr); } }

.mood__item { margin: 0; overflow: hidden; background: var(--ink); }
.mood__item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.mood__item:hover img { transform: scale(1.05); }

/* --- 33. Samtykke --------------------------------------------------------
   Banneret ligger i bunden, ikke som et overlay midt paa siden. Man skal
   kunne laese hvad man siger ja til uden at faa indholdet spaerret.

   De to knapper har bevidst samme stoerrelse og samme afstand. Det er ikke
   en detalje: et samtykke hvor nej er svaerere end ja, er ikke gyldigt. */

.samtykke {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--ink-raised);
  border-top: 1px solid var(--ink-line);
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter);
  animation: samtykke-op .4s var(--ease) both;
}
@keyframes samtykke-op { from { transform: translateY(100%); } to { transform: none; } }

.samtykke__inner {
  max-width: var(--max);
  margin-inline: auto;
  display: grid;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 860px) {
  .samtykke__inner { grid-template-columns: 1fr auto; }
}

.samtykke__tekst {
  margin: 0;
  max-width: 72ch;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--cream-70);
}
.samtykke__tekst a { color: var(--accent-text); }

.samtykke__knapper { display: flex; gap: .75rem; flex-wrap: wrap; }
.samtykke__knapper .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
@media (min-width: 520px) { .samtykke__knapper .btn { flex: 0 0 auto; } }

/* Bundbaren til booking maa ikke ligge oven i banneret. Banneret staar efter
   bookbaren i DOM, saa en soeskendevaelger virker ikke den vej. */
body:has(.samtykke:not([hidden])) .bookbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .samtykke { animation: none; }
}