/* ==========================================================================
   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: #000;
  --accent-fill-hover: #1A1A1A;
  /* 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: #FFF;
  --accent-glow: rgba(255, 255, 255, .18);
  --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, 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(--cream);
  --btn-fg: var(--ink);
  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: rgba(255, 255, 255, .86); border-color: rgba(255, 255, 255, .86); }

/* Paa hvid bund ville en hvid knap forsvinde. Derfor vendes den om. */
.zone-ice .btn:not(.btn--ghost) { --btn-bg: var(--ink); --btn-fg: var(--cream); border-color: var(--ink); }
.zone-ice .btn:not(.btn--ghost):hover { background: #1A1A1A; border-color: #1A1A1A; }
.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:not(.btn) {
  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:not(.btn):hover, .nav a:not(.btn)[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 {
  /* Hoejden staar eksplicit frem for at komme af inset. Naar scriptet laaser
     scroll paa siden, regner Safari paa iPhone inset om, og panelet blev
     klippet til en lille kasse i toppen med kun det oeverste punkt i. En
     fast hoejde er ikke afhaengig af den udregning. dvh foerst hvor den
     findes, vh som reserve. */
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  height: 100vh;
  height: 100dvh;
  z-index: 99;
  width: min(86vw, 380px);
  background: #0A0A0A;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  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); }

/* Sikkerhedsnettet fra scriptet. Naar panelet har vaeret aabent et oejeblik,
   staar alle punkter der uden at afhaenge af at en overgang blev faerdig. */
.nav[data-vist='true'] a:not(.btn),
.nav[data-vist='true'] .btn {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/* Beder browseren om mindre bevaegelse, springes ind- og udgliden helt over. */
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .nav a:not(.btn),
  .nav .btn { transition: none; opacity: 1; transform: none; }
}

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


.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); }
/* Fire smalle spalter taaler ikke lange overskrifter. "Plads til dine ting"
   braekkede over to linjer, saa brodteksten under den stod lavere end i de
   tre andre felter. Et trin mindre, og alle fire staar paa en linje. */
.movement--tight h3 { font-size: var(--step-1); }
/* Ikonet gaar foer overskriften, saa punktet kan genkendes foer det laeses.
   Samme stoerrelse og samme afstand som i felterne paa holdplanen. */
/* Spalten er smal, og ved omkring 1000 px blev "af" skubbet ned paa en
   tredje linje. Et loft over skriftgraden holder anden linje samlet. */
#gavekort-h { font-size: clamp(1.9rem, 4.2vw, 3rem); }

.movement__item .ikon {
  width: clamp(26px, 2.4vw, 32px);
  height: auto;
  color: var(--accent-text);
  margin-bottom: clamp(.75rem, 1.4vw, 1rem);
}

/* Overskrift med et fyldt ikon foran (hotspot_glyph). Ikonet følger
   skriftgraden, så det står lige så højt som versalerne. */
.glyph-title { display: flex; align-items: center; gap: .4em; }
.glyph { flex: none; width: 1.05em; height: 1.05em; }

/* --- 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(var(--prices-cols, 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%; }
/* Afsnit arver en bundmargen i em, og prisen staar i den stoerste skriftgrad
   paa siden. Det gav 75 tomme pixels mellem tallet og brodteksten. Kortet
   styrer selv afstanden med sit gitter, saa margenen skal vaek. */
.price p { margin-bottom: 0; }

/* Brodteksten skal begynde i samme hoejde paa alle fire kort. De er ikke ens
   i toppen: "pr. maaned" fylder to linjer, og kun pointpakkerne har en
   bonuslinje. Med subgrid arver hvert kort raekkerne fra gitteret, saa navn,
   pris, bonus, brodtekst og knap staar paa linje paa tvaers af kortene. */
@supports (grid-template-rows: subgrid) {
  .prices { grid-auto-rows: auto auto auto 1fr auto; }
  .price {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 1rem;
  }
}

/* --- 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; }
/* Næste hold og profilknappen kommer fra Ferb (site.js) og står kun, når Ferb svarer. */
.member__profile { align-self: flex-start; border: 0; background-color: transparent; padding: 0 0 2px; cursor: pointer; }
/* Ferbs egen facilitatorliste bruges kun til profilerne. Dens :host-display
   slår hidden-attributten ud, så den skjules her. Profilen lægger sig i sin
   egen vært på body og vises stadig. */
ferb-teachers[hidden] { display: none; }

/* --- 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 h2, .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 --------------------------------------------------- */

/* Ferbs kalender står uden ramme og tegner sine egne flader. Kun
   noscript-teksten bruger .embed__fallback. */
.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 ------------------------------------------------ */
/* Vejen til holdplanen skal 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; } }
/* Ferbs svævende log ind-knap står samme sted som bookbaren. Hvor bookbaren
   vises (alle sider uden kalenderen), viger knappen på telefonen. */
@media (max-width: 760px) { body:not(:has(ferb-schedule)) [data-ferb-account-wrapper] { display: none; } }

/* --- 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; }
  /* Paa desktop staar billede og tekst ved siden af hinanden, og der skal
     ikke vaere luft imellem dem. Under hinanden er det omvendt: uden en
     afstand starter overskriften klods op ad billedets underkant. */
  .split--bleed { row-gap: clamp(2.25rem, 9vw, 3.5rem); }

  /* Paa telefon staar billede og tekst over hinanden, og i sidste sektion paa
     movement gav billedet ikke andet end en ekstra skaerm at scrolle forbi
     lige inden vejen videre. Teksten staar alene der. */
  .split--tekst-alene .split__media { display: none; }

  /* Billedet skal ogsaa naa sektionens over- og underkant paa telefon, ikke
     kun ud til siderne. Uden det her staar der et baand af sektionens farve,
     hvidt eller sort, over billedet. Kun naar delingen er det eneste i sin
     .wrap, saa en overskrift ovenfor ikke kan blive overlappet. */
  .wrap > .split--bleed:first-child > .split__media:first-child {
    margin-top: calc(-1 * var(--section-y));
  }
  .wrap > .split--bleed:last-child > .split__media:last-child {
    margin-bottom: calc(-1 * var(--section-y));
  }
}

@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));
    /* Billedet skal ikke laengere bestemme hvor hoej sektionen er. Foer stod
       det med sin egen naturlige hoejde, og paa et staaende billede blev
       raekken dobbelt saa hoej som teksten, saa der laa et stort hvidt felt
       under brodteksten. Nu er billedet taget ud af hoejdeberegningen og
       laegger sig i stedet praecis over det felt teksten selv fylder. */
    position: relative;
    min-height: clamp(420px, 52vh, 620px);
  }

  /* 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;
    position: absolute;
    inset: 0;
  }
  .split--bleed .split__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    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; }

  /* Samme princip naar billedet staar sidst i koden og derfor til hoejre af
     sig selv, uden --reverse. Uden :has() ville reglen ogsaa ramme de blokke
     hvor billedet staar til venstre, og saa vendte teksten den forkerte vej. */
  .split--kant:not(.split--reverse):has(> .split__media:last-child) > div:not(.split__media) { text-align: right; }
  .split--kant:not(.split--reverse):has(> .split__media:last-child) > div:not(.split__media) p { margin-left: auto; }
  .split--kant:not(.split--reverse):has(> .split__media:last-child) > 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) {
  /* To maal styrer hele den lodrette udgave: hvor langt teksten rykkes ind,
     og hvor linjen og cirklerne ligger. De stod foer som to uafhaengige
     vaerdier, og fordi cirklen placeres inde i sit trin, som selv begynder
     efter indrykningen, landede den laengere til hoejre end linjen og oven
     i teksten. Nu regnes cirklens plads ud fra de samme to maal. */
  .tl {
    padding-inline: var(--gutter);
    --tl-indryk: clamp(4.5rem, 16vw, 6rem);
    --tl-linje: clamp(2.25rem, 8vw, 3rem);
  }
  .tl__track {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-left: var(--tl-indryk);
    gap: 1.25rem;
  }
  .tl__track::before {
    left: var(--tl-linje);
    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: calc(var(--tl-linje) - var(--tl-indryk));
    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); } }
/* Otte billeder frem for fire. Baandet skal laeses som et glimt af stedet,
   ikke som fire enkeltbilleder, og smallere felter goer det til en stribe. */
@media (min-width: 1100px) { .mood { grid-template-columns: repeat(8, 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; }
}


/* --- Facilitatorer: anker pr. person, næste hold og pladsholder -----------
   Tilføjet 1. oktober 2026. Hver person har id = slug, så forsiden kan linke
   direkte til dem. "Næste hold" fra Ferb står som en pille på billedet (16.
   oktober 2026, før "Se video"), og billedet åbner Ferbs profil (site.js).
   Har Ferb intet billede, står HotSpot-mærket på sort. */

.member { scroll-margin-top: 6rem; }
.member__next {
  position: absolute; left: .75rem; bottom: .75rem; margin: 0;
  display: inline-flex; align-items: center;
  padding: .5em .9em; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  font-size: var(--step--1); font-weight: 600; line-height: 1;
}
.member__next[hidden] { display: none; }
/* Én linje, også på telefonens smalle kort i to kolonner. */
.member__next { white-space: nowrap; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) { .member__next { left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); font-size: .75rem; padding: .5em .8em; } }
.member__placeholder {
  display: grid; place-items: center; aspect-ratio: 4 / 5;
  background: var(--ink); border: 1px solid var(--ink-line); border-radius: inherit;
  /* Fast grå: mærkets felter overlapper, og en gennemsigtig farve viste overlappet. */
  color: #4a4a4a;
}
.member__placeholder svg { width: 22%; height: auto; }
[data-ferb-photo] { cursor: pointer; }


/* --- 31. Gusmestervæg på forsiden ----------------------------------------
   Tilføjet 1. oktober 2026. Erstatter billedet i "Det er menneskene, der
   skaber gusen". Seks portrætter popper ind, når sektionen ses, og en ny
   gusmester popper op ca. hvert andet sekund. Hver person linker til sit
   kort på /facilitatorer/#slug. Uden JavaScript står de seks bare der. */

.gwall {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  align-items: start; align-self: center;
}
.gwall__tile { display: block; position: relative; aspect-ratio: 4 / 5; color: #000; text-decoration: none; outline: none; }
.gwall__tile:nth-child(3n+2) { margin-top: 2.25rem; }
.js .gwall__tile { opacity: 0; transform: translateY(40px) scale(.9); }
.js .gwall.is-in .gwall__tile {
  animation: gwallIn .7s cubic-bezier(.2, 1.4, .4, 1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
.gwall__card {
  position: absolute; inset: 0; display: block; overflow: hidden;
  border-radius: var(--radius-lg); background: #E9E7E3;
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), box-shadow .45s, filter .35s;
}
.gwall__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }

/* Personen træder frem, de andre trækker sig lidt tilbage */
.gwall__tile:hover, .gwall__tile:focus-visible { z-index: 2; }
.gwall__tile:hover .gwall__card,
.gwall__tile:focus-visible .gwall__card { transform: scale(1.08) translateY(-6px); box-shadow: 0 22px 44px rgba(0, 0, 0, .28); }
.gwall__tile:hover img, .gwall__tile:focus-visible img { transform: scale(1.04); }
.gwall:hover .gwall__tile:not(:hover) .gwall__card { filter: grayscale(.6) brightness(.9); }
.gwall__tile:focus-visible .gwall__card { outline: 3px solid #000; outline-offset: 3px; }

.gwall__name {
  position: absolute; z-index: 1; left: .6rem; bottom: .6rem; max-width: calc(100% - 1.2rem);
  padding: .45rem .75rem; border-radius: .75rem; background: #FFF; color: #000;
  font-size: .8125rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(150%); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1);
}
.gwall__who { display: block; overflow: hidden; text-overflow: ellipsis; }
.gwall__more { display: block; max-height: 0; opacity: 0; overflow: hidden; font-weight: 400; font-size: .75rem; transition: max-height .4s, opacity .3s; }
.gwall__tile:hover .gwall__name, .gwall__tile:focus-visible .gwall__name, .gwall__tile.is-live .gwall__name { transform: none; }
.gwall__tile:hover .gwall__more, .gwall__tile:focus-visible .gwall__more { max-height: 1.6em; opacity: 1; }

.gwall__card .is-next { opacity: 0; }
.gwall__tile.is-swap .is-next { animation: gwallSwap .75s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.gwall__tile.is-swap .gwall__card { animation: gwallBump .75s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes gwallIn { to { opacity: 1; transform: none; } }
@keyframes gwallSwap { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } }
@keyframes gwallBump { 40% { transform: scale(1.04); } }

/* På store skærme får væggen mere plads end teksten og går helt ud til
   højre kant af indholdet, så portrætterne fylder mere. */
@media (min-width: 900px) {
  .split--bleed:has(> .gwall) { grid-template-columns: .8fr 1.2fr; }
  .split--bleed > div.gwall {
    padding-inline: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
    margin-right: calc(-1 * var(--bleed));
    gap: 1rem;
  }
  .gwall__tile:nth-child(3n+2) { margin-top: 3rem; }
  .gwall__name { font-size: .9375rem; left: .8rem; bottom: .8rem; }
}
@media (max-width: 899px) {
  .gwall { gap: .5rem; }
  .gwall__tile:nth-child(3n+2) { margin-top: 1.25rem; }
}
/* På telefon kan man ikke holde musen over, så navnene står altid fremme */
@media (hover: none) { .gwall__name { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .gwall__tile, .js .gwall.is-in .gwall__tile { animation: none; opacity: 1; transform: none; }
  .gwall__tile.is-swap .is-next, .gwall__tile.is-swap .gwall__card { animation: none; opacity: 1; }
  .gwall__card, .gwall__card img, .gwall__name, .gwall__more { transition: none; }
}


/* --- 32. Sessioner: manifest og "Det gør varmen og kulden ved dig" ------
   Tilføjet 2. oktober 2026. Manifestet er et billede i fuld bredde med en
   kort tekst centreret ovenpå. Virker-kortene er tre billeder med en
   overskrift og en forsigtigt formuleret tekst om effekten. */

.manifest {
  position: relative; display: grid; place-items: center; overflow: hidden;
  min-height: clamp(460px, 72vh, 720px); color: #FFF; background: #000;
}
.manifest picture, .manifest img { position: absolute; inset: 0; width: 100%; height: 100%; }
.manifest img { object-fit: cover; object-position: 50% 35%; }
.manifest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55)); }
.manifest__text {
  position: relative; z-index: 1; max-width: 44ch; padding-inline: var(--gutter);
  text-align: center; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55;
}
.manifest__text p + p { margin-top: 1rem; }
.manifest__text strong { font-weight: 600; }

.virker { background: #F2F1EF; color: #000; }
.virker__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(3, 1fr); }
.virker__card img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); }
.virker__card h3 { margin-top: 1.25rem; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; }
.virker__card p { margin-top: .6rem; color: rgba(0, 0, 0, .72); font-size: 1rem; line-height: 1.6; max-width: 40ch; }
.virker__note { margin-top: clamp(1.5rem, 3vw, 2.5rem); font-size: .875rem; color: rgba(0, 0, 0, .56); max-width: 70ch; }
@media (max-width: 899px) { .virker__grid { grid-template-columns: 1fr; } }

/* Facilitatorportrættet skal vise ansigtet, ikke maven */
.split__media--portrait img { object-position: 50% 25%; }


/* --- 33. Tidslinjen afsløres trin for trin --------------------------------
   Tilføjet 2. oktober 2026. Når tidslinjen ses, tegnes en lys streg fra
   Ankomst og frem, og hvert trin popper ind, når stregen når det. Klassen
   .tl--anim sættes af site.js. Uden JavaScript, eller med reduceret
   bevægelse, står hele tidslinjen bare der som før. */

.tl__track::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px; background: var(--accent-text);
  transform-origin: left center; transform: scaleX(var(--tl-p, 1));
  transition: transform .6s var(--ease); pointer-events: none;
}
.tl--anim .tl__track::after { transform: scaleX(var(--tl-p, 0)); }
/* Cirklerne ligger oven på stregen, så den løber bag billederne. */
.tl__track::after { z-index: 0; }
.tl__dot { z-index: 1; }

.tl--anim .tl__dot {
  opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.2, 1.4, .4, 1), box-shadow .3s var(--ease);
}
.tl--anim .tl__step::before { transform: scaleY(0); transition: transform .35s var(--ease) .15s; }
.tl--anim .tl__step--over::before { transform-origin: bottom; }
.tl--anim .tl__step--under::before { transform-origin: top; }
.tl--anim .tl__card { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease) .25s, transform .5s var(--ease) .25s; }
.tl--anim .tl__step--over .tl__card { transform: translateY(-12px); }

.tl--anim .tl__step.is-on .tl__dot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tl--anim .tl__step.is-on::before { transform: scaleY(1); }
.tl--anim .tl__step.is-on .tl__card { opacity: 1; transform: none; }
.tl--anim .tl__step.is-on:hover .tl__dot { transform: translate(-50%, -50%) scale(1.06); }
.tl__step.is-now .tl__dot { box-shadow: 0 0 0 3px var(--accent-text); }

@media (max-width: 999px) {
  .tl__track::after {
    left: var(--tl-linje); right: auto; top: 1.5rem; bottom: 1.5rem;
    width: 2px; height: auto; margin: 0 0 0 -1px;
    transform-origin: top center; transform: scaleY(var(--tl-p, 1));
  }
  .tl--anim .tl__track::after { transform: scaleY(var(--tl-p, 0)); }
  .tl--anim .tl__dot { transform: translate(-50%, 0) scale(.6); }
  .tl--anim .tl__step.is-on .tl__dot { transform: translate(-50%, 0) scale(1); }
  .tl--anim .tl__step.is-on:hover .tl__dot { transform: translate(-50%, 0) scale(1.06); }
  .tl--anim .tl__step--over .tl__card { transform: translateY(12px); }
}


/* --- 34. Silkeborg: teaser-side og "Psst"-boks ---------------------------
   Tilføjet 7. oktober 2026. Sort/hvid som resten af sitet: damp der stiger
   op og vandlinjer i bunden i stedet for billeder, indtil der er fotos fra
   Silkeborg. .psst er den lille boks nederst til venstre (site.js). */

.sk-hero { position: relative; overflow: hidden; min-height: min(92vh, 860px); display: grid; align-items: end; color: #FFF;
  background: radial-gradient(120% 80% at 70% 115%, #2a2a2a 0%, #111 40%, #000 75%); }
.sk-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(transparent, #000 60%); mask-image: linear-gradient(transparent, #000 60%);
  animation: skRipple 6s linear infinite; }
@keyframes skRipple { to { background-position: 0 28px; } }
.sk-steam { position: absolute; inset: 0; pointer-events: none; }
.sk-steam span { position: absolute; bottom: -20%; width: 34vmax; height: 34vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent); filter: blur(18px); opacity: 0;
  animation: skRise 14s ease-in infinite; }
.sk-steam span:nth-child(1) { left: 5%; }
.sk-steam span:nth-child(2) { left: 35%; width: 28vmax; height: 28vmax; animation-delay: 3.5s; }
.sk-steam span:nth-child(3) { left: 62%; animation-delay: 7s; }
.sk-steam span:nth-child(4) { left: 80%; width: 24vmax; height: 24vmax; animation-delay: 10.5s; }
@keyframes skRise { 0% { transform: translateY(0) scale(.7); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-110vh) scale(1.4); opacity: 0; } }
.sk-hero .wrap { position: relative; z-index: 1; padding-top: clamp(7rem, 12vw, 10rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.sk-hero .eyebrow { color: rgba(255, 255, 255, .7); }
.sk-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(4rem, 13vw, 11rem); line-height: .86; margin: 0; }
.sk-title em { font-style: normal; color: transparent; -webkit-text-stroke: 2px #FFF; }
.sk-lead { margin-top: 1.5rem; max-width: 40ch; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: rgba(255, 255, 255, .85); }
.sk-badge { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; padding: .75rem 1.15rem; border-radius: 999px;
  background: #FFF; color: #000; font-weight: 600; font-size: .95rem; }
.sk-badge b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.sk-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #000; animation: skPulse 1.8s infinite; }
@keyframes skPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .45); } 70% { box-shadow: 0 0 0 .7rem rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
.sk-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.sk-fact { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--ink-line); border-radius: var(--radius-lg); background: var(--ink-raised); }
.sk-fact .num { font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1; color: #FFF; }
.sk-fact h3 { margin: .75rem 0 .5rem; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 2vw, 1.75rem); }
.sk-fact p { color: var(--cream-70); margin: 0; }
.sk-fact--plain { display: grid; align-items: center; }
.sk-fact--plain h3 { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); line-height: .95; }
.sk-where { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sk-pin { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background: radial-gradient(60% 60% at 50% 50%, #2a2a2a, #000); }
.sk-pin::before { content: ""; position: absolute; inset: -40%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .12) 0 1px, transparent 1px 34px); animation: skWaves 9s linear infinite; }
@keyframes skWaves { to { transform: scale(1.25); opacity: .4; } }
.sk-pin span { position: relative; padding: .7rem 1.1rem; border-radius: 999px; background: #FFF; color: #000; font-weight: 600; }
/* Rigtige billeder fra Silkeborg (7. oktober 2026). Søen fylder hele toppen,
   og en mørk gradient holder teksten læsbar. Vandlinjerne er ikke nødvendige
   ovenpå et rigtigt foto af søen. Månebilledet ligger i boksen ved adressen. */
.sk-hero--photo { background: #000; }
.sk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.sk-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .9) 100%); }
.sk-hero--photo .sk-title, .sk-hero--photo .sk-lead, .sk-hero--photo .eyebrow, .sk-hero--photo .meta { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.sk-hero--photo .sk-title em { -webkit-text-stroke-width: 2.5px; }
.sk-hero--photo::after { display: none; }
.sk-hero--photo .sk-steam span { background: radial-gradient(closest-side, rgba(255, 255, 255, .09), transparent); }
.sk-pin--photo { aspect-ratio: 4 / 5; background: #000; }
.sk-pin--photo::before { display: none; }
.sk-pin__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.sk-pin--photo span { position: absolute; left: 1rem; bottom: 1rem; }
/* Bookbaren siger "Fra 165 kr." for Aarhus og skal ikke stå på Silkeborg-siden */
/* "og snart Silkeborg" i forsidens overskrift står i kursiv */
.display__sub em { font-style: italic; }
body:has(.sk-hero) .bookbar { display: none; }
/* På holdplanen står kalenderen selv for booking, og bookbaren ville dække dens knapper. */
body:has(ferb-schedule) .bookbar { display: none; }
/* Billedet øverst i Ferbs klassevindue toner Ferb med kalenderens accentfarve.
   Den er hvid her, så knapper og valgte dage står rent, men det gjorde
   billedet mælket. Billedet toner i stedet mod sort, som resten af sitet. */
ferb-schedule,
[data-ferb-class-detail-host] {
  --ferb-detail-hero-base: #000;
  --ferb-detail-hero-tint-start: rgba(0, 0, 0, .35);
  --ferb-detail-hero-tint-end: rgba(0, 0, 0, .52);
}
/* Man kan ikke booke Silkeborg endnu, så "Book saunagus" (Aarhus) skjules i
   headeren og menuen på Silkeborg-siden, indtil booking åbner. */
body:has(.sk-hero) .site-header__cta,
body:has(.sk-hero) .site-header nav .btn { display: none; }
@media (max-width: 899px) { .sk-facts, .sk-where { grid-template-columns: 1fr; } }

.psst { position: fixed; z-index: 90; left: clamp(.75rem, 2vw, 1.5rem); bottom: calc(var(--psst-bottom, 0px) + clamp(.75rem, 2vw, 1.5rem));
  display: flex; align-items: flex-start; gap: .75rem; width: min(330px, calc(100vw - 1.5rem)); padding: 1rem 2.75rem 1rem 1rem;
  background: #000; color: #FFF; border: 1px solid var(--ink-line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  font-size: .95rem; line-height: 1.45; opacity: 0; transform: translateX(-24px);
  transition: opacity .4s var(--ease), transform .55s cubic-bezier(.2, 1.3, .4, 1), bottom .3s var(--ease); }
.psst.is-open { opacity: 1; transform: none; }
.psst__dot { flex: none; margin-top: .45rem; width: .5rem; height: .5rem; border-radius: 50%; background: #FFF; animation: psstPulse 1.8s infinite; }
@keyframes psstPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } 70% { box-shadow: 0 0 0 .55rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.psst p { margin: 0; }
.psst b { font-weight: 600; }
.psst a { color: #FFF; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.psst__close { position: absolute; top: .45rem; right: .45rem; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .7); font-size: .95rem; cursor: pointer; }
.psst__close:hover { background: rgba(255, 255, 255, .1); color: #FFF; }

/* Tydeligere udgave (7. oktober 2026): hvid boks med sort tekst, der står
   ud mod de mørke sektioner, og et lille "vink", når den dukker op. */
.psst { width: min(380px, calc(100vw - 1.5rem)); padding: 1.15rem 3rem 1.15rem 1.15rem; background: #FFF; color: #000;
  border: 0; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .08); font-size: 1.05rem; }
.psst.is-open { animation: psstWave 1.2s cubic-bezier(.36, .07, .19, .97) .7s 1; }
@keyframes psstWave { 0%, 100% { transform: none; } 20% { transform: rotate(-2deg) scale(1.03); } 40% { transform: rotate(2deg) scale(1.03); } 60% { transform: rotate(-1deg); } 80% { transform: rotate(1deg); } }
.psst b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; text-transform: uppercase; margin-right: .2rem; }
.psst a { color: #000; }
.psst__dot { background: #000; margin-top: .55rem; animation-name: psstPulseDark; }
@keyframes psstPulseDark { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .45); } 70% { box-shadow: 0 0 0 .55rem rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } }
.psst__close { color: rgba(0, 0, 0, .55); }
.psst__close:hover { background: rgba(0, 0, 0, .07); color: #000; }
@media (prefers-reduced-motion: reduce) { .psst.is-open { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .sk-steam { display: none; }
  .sk-hero::after, .sk-dot, .sk-pin::before, .psst__dot { animation: none; }
  .psst { transition: none; }
}

/* --- Topstribe: nyt bookingsystem (16. oktober 2026) ----------------------
   Samme udtryk som psst-boksen: hvid bund, sort tekst og overskriften i
   displayfonten. Striben står øverst og ruller væk med siden. Headeren står
   lige under den og rykker op i toppen, når den bliver kompakt. Fjernes, når
   overgangen er overstået: denne blok, striben i header.php og
   hotspot_strip(). */
body.has-strip { --strip-h: 2.5rem; padding-top: var(--strip-h); }
.strip {
  position: absolute; inset: 0 0 auto; z-index: 97; height: var(--strip-h);
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding-inline: var(--gutter); background: #FFF; color: #000;
  font-size: var(--step--1); text-decoration: none; white-space: nowrap;
}
.strip b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; }
.strip span { text-decoration: underline; text-underline-offset: 3px; }
.strip span::after { content: ' \2192'; display: inline-block; margin-left: .25em; text-decoration: none; }
.site-header { top: var(--strip-h, 0px); transition-property: background, backdrop-filter, padding, border-color, top; }
.site-header.is-stuck { top: 0; }
/* Menupanelet starter i toppen af skærmen og skal også gå fri af striben. */
.site-header:not(.is-stuck) .nav { padding-top: calc(5.5rem + var(--strip-h, 0px)); }
/* Det lukkede panel ligger lige uden for skærmen, men skyggen faldt ind over
   højre kant og gjorde striben og hvide knapper grå. */
.nav:not([data-open='true']) { box-shadow: none; }

/* Klikker man på Min profil, før Ferbs script er hentet, venter linket på det. */
[data-ferb-account][aria-busy='true'] { opacity: .5; cursor: progress; }