/* ============================================================
   BADEBYEN LYNGDAL BY — scrolldrevet fotoartikkel

   SPESIALDESIGN. Gjengir Claude Design-handoffen
   «design_handoff_badebyen_lyngdal» (26. aug 2026), high-fidelity:
   farger, typografi, spacing, timing og easing er LAASTE og skal
   ikke rettes inn mot husets skala. Derfor er hver skrift-, farge-
   og stoerrelseserklaering markert som unntak etter reglene i
   CLAUDE.md — det er nettopp slike flater unntaksmekanismen finnes
   for. Handoffens designfiler er fasit; endres uttrykket, endre der
   foerst.

   Ett avvik fra handoffen: ingen tekst under 12 px. Etikettene sto paa
   10-11,5 px og er hevet til tekstgulvet som gjelder hele nettstedet
   (mobilgjennomgang, okt 2026).

   Alt her er scopet under .bb — artikkelen deler dokument med
   Typografi-komponenten, og ingenting skal lekke noen vei.

   Klassene speiler handoffens kapitler:
     .bb-hero      01 Aapning         .bb-ut       04 UT
     .bb-arena     02 Tre vann        .bb-hav      05 Havet
     .bb-sirkel    03 Basseng         .bb-elv      06 Elva
     .bb-stabel    03b Soerlandsbadet .bb-tre      07 Tre vann, en by
     .bb-fakta     03c Praktisk       .bb-moment   09 Oeyeblikkene
                                      .bb-finale   10 Finalen
   ============================================================ */

/* Huset setter overflow-x: hidden paa body (styles.css:438). Det gjoer body
   til klippekontekst, og da fester ingen av artikkelens fire sticky-scener —
   maalt: scenen laa paa rect.top -883 der designet laa paa 0, og faktapanelet
   var en tom flate. overflow-x: clip beskytter mot vannrett utglidning
   NOEYAKTIG like godt, men lager ingen klippekontekst. Dette arket lastes
   etter styles.css, saa regelen vinner paa kaskade — og gjelder bare denne
   sida, som er den eneste som laster arket. */
body { overflow-x: clip; }

/* Designet ble tegnet med nettleserens standard box-sizing (content-box);
   huset setter border-box globalt. Alle maksbredder og paddinger i handoffen
   er regnet content-box — 900px maksbredde PLUSS padding, ikke medregnet.
   Ett sted aa gjenopprette forutsetningen er bedre enn aa omregne hver
   eneste verdi og jage avvikene enkeltvis (den foerste var arena-kortene,
   den andre sirkelavsnittets linjefall). */
.bb, .bb *, .bb *::before, .bb *::after { box-sizing: content-box; }

.bb {
  /* Handoffens fargeunivers («Design Tokens» i README-en). Ett navn per
     verdi, her og bare her. rgba-variantene i gradienter og skygger er
     avledninger av de samme fargene. */
  /* farge-unntak: Badebyen-handoffens vann-univers, ikke husets palett */
  --bb-bunn: #04191e;
  /* farge-unntak: Badebyen-handoffens vann-univers, ikke husets palett */
  --bb-bunn-seksjon: #06262e;
  /* farge-unntak: Badebyen-handoffens vann-univers, ikke husets palett */
  --bb-plate-topp: #0b4048;
  /* farge-unntak: Badebyen-handoffens vann-univers, ikke husets palett */
  --bb-plate-finale: #0d4d52;
  /* farge-unntak: Badebyen-handoffens vann-univers, ikke husets palett */
  --bb-plate-finale-bunn: #063038;
  /* farge-unntak: Badebyen-handoffens aksent (isblaa, laast etter fire proever) */
  --bb-acc: #9ec9ff;
  --bb-acc-rgb: 158, 201, 255;
  /* farge-unntak: Badebyen-handoffens blekk paa aksentflate */
  --bb-blekk: #062036;
  /* farge-unntak: Badebyen-handoffens lenke-hover */
  --bb-acc-hover: #a8ffe9;
  /* farge-unntak: Badebyen-handoffens primaertekst */
  --bb-tekst: #e8f4f2;
  /* farge-unntak: Badebyen-handoffens dempede tekst */
  --bb-dempet: #c8dcd8;
  /* farge-unntak: Badebyen-handoffens dempede tekst 2 */
  --bb-dempet-2: #9fc4bd;
  /* farge-unntak: Badebyen-handoffens dempede tekst 3 */
  --bb-dempet-3: #a8c4bf;
  /* farge-unntak: Badebyen-handoffens svake tekst */
  --bb-svak: #7f9a95;

  /* Handoffens to skrifter. Variable snitt (Space Grotesk 300-700,
     Hanken Grotesk 100-900), saa alle vektene i designet er ekte —
     @font-face staar i styles.css etter husets regel. Navnet
     «-display» er baerende: display-skriften har hele vektspennet. */
  /* typografi-unntak: Badebyen-handoffens skrift, ikke husets vokabular */
  --bb-font-display: 'Space Grotesk', sans-serif;
  /* typografi-unntak: Badebyen-handoffens skrift, ikke husets vokabular */
  --bb-font-body: 'Hanken Grotesk', system-ui, sans-serif;

  /* Gjennomgaaende maal fra handoffen. */
  --bb-marg: clamp(18px, 3.4vw, 48px);
  --bb-gap: clamp(12px, 1.8vw, 26px);

  position: relative;
  background: var(--bb-bunn);
  color: var(--bb-tekst);
  font-family: var(--bb-font-body);
  /* Huset setter line-height paa body; designet arver nettleserens normal.
     Uten denne ble bildestabelen 13 px hoeyere enn designfila. */
  line-height: normal;
  overflow: clip;
  -webkit-font-smoothing: antialiased;
}

/* Handoffens tre kjerneanimasjoner. */
@keyframes bb-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes bb-swell { 0%, 100% { transform: scale(1.008); } 50% { transform: scale(1.05); } }
@keyframes bb-float9 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.02); } 50% { transform: translate3d(0, -14px, 0) scale(1.06); } }

.bb a { color: var(--bb-acc); text-decoration: none; }
.bb a:hover { color: var(--bb-acc-hover); }

/* ---------- Husets header, uten klister ----------
   Toms beslutning 27. aug: sida skal ha husets header og footer, men
   headeren skal IKKE vaere fast — den staar oeverst og scroller vekk, saa
   fotoartikkelen faar hele flaten. lister-stripe.css setter position:
   fixed og lastes ETTER dette arket (VillageHeader lenker det i body),
   derfor body-leddet: hoeyere spesifisitet vinner uansett rekkefoelge.
   relative, ikke static — mobilskuffen ankres absolutt til wrappen.
   Handoffens faste «Lyngdal by»-ordmerke (.bb-topp) er fjernet samtidig:
   det var sidas eneste vei tilbake foer headeren kom, og ville ligget
   oppaa stripa. */
body .lister-stripe-wrap { position: relative; }
/* footer.css gir footeren 96px toppmargin — riktig paa kremsidene, men her
   ligger den mellom finalens moerke fjord og footerens moerke flate og
   leser som et fremmed lyst baand. Kant i kant i stedet. */
body .site-footer { margin-top: 0; }

/* ---------- Delte byggeklosser ---------- */
/* Designet er skrevet content-box: max-width 1400 + padding UTENPAA, klemt
   av vinduet — effektiv innholdsbredde ved 1440 er 1344 px. Huset setter
   border-box globalt, og da ble den samme kombinasjonen 1304. Derfor baerer
   SEKSJONENE sidemargen, og indre-boksen er ren maksbredde. */
.bb-indre { max-width: 1400px; margin: 0 auto; }

/* Parallakserammen: 15-19 % overskudd saa kantene ikke avsloeres. */
.bb-par { position: absolute; inset: -17% 0; will-change: transform; }
.bb-par img, .bb-par video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-par--vid { inset: -19% 0; }
.bb-par--16 { inset: -16% 0; }

/* Hoeye smaabilder: img-en selv baerer parallaksen (som i handoffen). */
.bb-parimg {
  position: absolute; left: 0; top: -20%;
  width: 100%; height: 140%;
  object-fit: cover; display: block;
  will-change: transform;
}

.bb-ramme { position: relative; border-radius: 12px; overflow: hidden; }
.bb-figur { margin: 0; }

/* Innfading ved scroll — startverdiene settes av skriptet, dette er
   fallback for uten-JS: alt synlig. */
.bb [data-rise] { opacity: 1; }

/* Kapittelmarkoer: kapittelnavn + animert boelgelinje. */
.bb-marker {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  padding: 0 var(--bb-marg);
  background: var(--bb-bunn);
}
.bb-marker--luft-over { padding-top: clamp(30px, 5vh, 60px); }
.bb-marker--luft-hoy { padding-top: clamp(40px, 7vh, 80px); }
.bb-marker--luft-under { padding-bottom: clamp(30px, 5vh, 60px); }
.bb-marker span {
  flex: none;
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bb-acc);
}
.bb-marker svg { flex: 1; height: 48px; display: block; }
.bb-marker path { fill: none; stroke: rgba(var(--bb-acc-rgb), .42); stroke-width: 1.4; }

/* ---------- 01 Aapning ---------- */
.bb-hero { position: relative; height: 104vh; overflow: hidden; }
.bb-hero__skygge {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,25,30,.56) 0%, rgba(4,25,30,.32) 38%, rgba(4,25,30,.7) 100%);
}
/* Hele blokken faar parallaksen som EN enhet — enkeltelementer i en
   sentrert kolonne driver inn i naboene (handoffens fallgruve 3). */
.bb-hero__tekst {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 clamp(18px, 4vw, 64px);
  will-change: transform;
}
.bb-kicker {
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bb-acc);
  margin-bottom: clamp(16px, 2.6vh, 28px);
  /* Uten skyggen er smaatekstene uleselige mot det lyse vinduet
     (handoffens fallgruve 4 — maalt til ~1,7:1 foer den kom paa). */
  text-shadow: 0 2px 18px rgba(4,25,30,.9);
}
.bb-hero__tittel {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(44px, 9.6vw, 176px);
  line-height: .88;
  letter-spacing: -.04em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
  text-shadow: 0 14px 60px rgba(4,25,30,.55);
}
.bb-hero__sted,
.bb-hero__hint {
  font-family: var(--bb-font-display);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(232,244,242,.9);
  text-shadow: 0 2px 18px rgba(4,25,30,.9);
}
.bb-hero__sted { margin-top: clamp(18px, 3vh, 32px); font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ 12px; }
.bb-hero__hint {
  /* Familien gjentas her selv om fellesregelen over setter den: vaktens
     vektsjekk leser blokk for blokk, og 600 uten familie i SAMME blokk
     leses som en bestilling til broedskriften. */
  font-family: var(--bb-font-display);
  margin-top: clamp(22px, 3.6vh, 40px);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  color: rgba(232,244,242,.94);
  animation: bb-drift 3s ease-in-out infinite;
}
.bb-hero__bolge {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(70px, 11vh, 140px);
  display: block;
}
/* Fyllet bor HER og ikke som fill-attributt: fargevakten skanner ogsaa
   markup, og en hex i et attributt er like hjemloes som en hex i CSS.
   Skriptet leser fill-attributtet bare for aa skille fylt/strek, og et
   manglende attributt leses som fylt — det stemmer for begge disse. */
.bb-hero__bolge path:first-child { fill: rgba(4,25,30,.5); }
.bb-hero__bolge path:last-child { fill: var(--bb-bunn); }

/* ---------- 02 Tre vann (arena-meny) ---------- */
.bb-arena { position: relative; background: var(--bb-bunn); padding: clamp(40px, 7vh, 90px) var(--bb-marg) clamp(60px, 11vh, 130px); }
.bb-arena__inngang {
  margin: 0 0 clamp(34px, 6vh, 70px);
  max-width: 52ch;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(17px, 1.6vw, 24px);
  line-height: 1.58;
  color: var(--bb-dempet);
  text-wrap: pretty;
}
.bb-arena__nett {
  display: grid;
  /* Tre arenaer: én kolonne på telefon, tre ved siden av hverandre ellers.
     auto-fit med 270 px ga to kolonner mellom ca. 600 og 900 px, og det
     tredje kortet sto alene med et tomt felt ved siden av. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
}
@media (min-width: 721px) {
  .bb-arena__nett { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bb-kort {
  display: block;
  position: relative;
  height: min(70vh, 720px);
  border-radius: 10px;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1);
}
.bb-kort .bb-par img { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.bb-kort__skygge { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(4,25,30,.82)); }
.bb-kort__vann {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0;
  transition: height .6s cubic-bezier(.2,1.3,.3,1); /* overshoot = skvulp */
  pointer-events: none;
}
.bb-kort__vann svg {
  position: absolute; left: 0; right: 0; top: -17px;
  width: 100%; height: 22px; display: block; overflow: visible;
}
.bb-kort__vann path { fill: rgba(var(--bb-acc-rgb), .26); }
.bb-kort__vannflate { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bb-acc-rgb), .26), rgba(4,25,30,.6)); }
.bb-kort__ring {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 2px solid rgba(var(--bb-acc-rgb), .85);
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
}
.bb-kort figcaption { position: absolute; left: clamp(14px, 1.6vw, 24px); right: 14px; bottom: clamp(14px, 2vh, 24px); }
.bb-kort__ord {
  display: block;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(20px, 2.4vw, 38px);
  letter-spacing: .02em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
  transition: transform .5s cubic-bezier(.2,1.2,.3,1);
}
.bb-kort__sted {
  display: block;
  margin-top: 5px;
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--bb-dempet-2);
}
.bb-kort__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .35s;
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bb-acc);
}

/* ---------- 03 Basseng (sirkelaapning) ---------- */
.bb-sirkel {
  position: relative;
  height: 190vh;
  background: linear-gradient(180deg, var(--bb-bunn) 0%, var(--bb-bunn-seksjon) 55%, var(--bb-bunn) 100%);
}
.bb-sirkel__scene {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bb-sirkel__klipp {
  position: absolute; inset: 0;
  clip-path: circle(14% at 50% 50%);
  will-change: clip-path;
}
.bb-sirkel__klipp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-sirkel__vignett { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, transparent 40%, rgba(4,25,30,.64) 100%); }
.bb-sirkel__tekst { position: relative; max-width: 900px; padding: 0 clamp(18px, 4vw, 64px); text-align: center; }
.bb-sirkel__tekst p:first-child {
  margin: 0;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(19px, 2.1vw, 30px);
  line-height: 1.5;
  color: var(--bb-tekst);
  text-wrap: pretty;
  text-shadow: 0 4px 26px rgba(4,25,30,.85);
}
.bb-sirkel__aaret {
  margin: clamp(22px, 3.4vh, 38px) 0 0;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(38px, 7vw, 112px);
  line-height: .94;
  letter-spacing: -.04em;
  color: var(--bb-acc);
  text-shadow: 0 8px 40px rgba(4,25,30,.75);
}
.bb-sirkel__kreditt {
  position: absolute;
  right: var(--bb-marg); bottom: 24px;
  opacity: 0;
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(232,244,242,.66);
}

/* ---------- 03b Soerlandsbadet (bildestabel) ---------- */
.bb-stabel { position: relative; padding: clamp(40px, 7vh, 90px) var(--bb-marg) clamp(60px, 11vh, 140px); background: var(--bb-bunn); }
.bb-stabel__topp { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(24px, 4vh, 48px); flex-wrap: wrap; }
.bb-stabel__navn {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(18px, 2vw, 30px);
  letter-spacing: .03em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
}
.bb-stabel__under {
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--bb-svak);
}
.bb-stabel__nett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--bb-gap);
  align-items: start;
}
/* Flex-wrap, IKKE grid med span: auto-fit + span N lager 0-piksels
   implisitte spor naar rutenettet kollapser, og bilder forsvinner paa
   mobil (handoffens fallgruve 1). */
.bb-stabel__hoyre { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--bb-gap); }
.bb-stabel__hoyre .bb-figur { flex: 1 1 100%; }
.bb-stabel__hoyre .bb-figur--halv { flex: 1 1 min(100%, 240px); }
.bb-h-stup { height: min(94vh, 960px); }
.bb-h-svev { height: min(46vh, 470px); }
.bb-h-liten { height: min(30vh, 320px); }
.bb-h-boble { height: min(34vh, 360px); }

/* ---------- 03c Praktisk (vannplate) ---------- */
.bb-fakta { position: relative; height: 250vh; margin-top: -62vh; z-index: 6; }
.bb-fakta__scene { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.bb-fakta__plate {
  position: absolute; inset: 0;
  transform: translateY(100%);
  background: linear-gradient(180deg, var(--bb-plate-topp), var(--bb-bunn) 72%);
  will-change: transform;
}
.bb-fakta__bolge { position: absolute; left: 0; right: 0; top: -42px; width: 100%; height: 46px; display: block; }
.bb-fakta__bolge path { fill: var(--bb-plate-topp); }
.bb-fakta__innhold {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(22px, 3.6vh, 44px);
  padding: clamp(56px, 9vh, 92px) var(--bb-marg) clamp(30px, 5vh, 56px);
  opacity: 0;
}
.bb-fakta__etikett { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 3vh, 34px); }
.bb-fakta__etikett i { width: 30px; height: 1px; background: var(--bb-acc); }
.bb-fakta__etikett span {
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bb-acc);
}
.bb-fakta__tall { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 44px); padding-bottom: clamp(18px, 3vh, 34px); border-bottom: 1px solid rgba(255,255,255,.14); }
.bb-fakta__tall > div { flex: 1 1 150px; min-width: 130px; }
.bb-tall { display: flex; align-items: baseline; gap: 3px; }
.bb-tall b {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(30px, 4vw, 62px);
  line-height: .9;
  letter-spacing: -.04em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
}
.bb-tall i {
  font-family: var(--bb-font-display);
  font-style: normal;
  font-weight: 600;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(13px, 1.2vw, 18px);
  color: var(--bb-acc);
}
.bb-tall + p {
  margin: 8px 0 0;
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--bb-dempet-2);
  max-width: 20ch;
}
.bb-fakta__kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 0 clamp(20px, 3vw, 52px); margin-top: clamp(14px, 2.4vh, 28px); }
.bb-fakta__kolonner > div { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.12); }
.bb-fakta__kolonnenavn {
  margin: 0;
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--bb-tekst);
}
/* :not() holder etiketten utenfor: .bb-fakta__kolonner p har hoeyere
   spesifisitet enn .bb-fakta__kolonnenavn alene, og ville ellers vunnet
   margin og grad over etikett-regelen under. */
.bb-fakta__kolonner p:not(.bb-fakta__kolonnenavn) {
  margin: 5px 0 0;
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 14px;
  line-height: 1.55;
  color: var(--bb-dempet-3);
}
.bb-fakta__bunn { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: clamp(18px, 3vh, 34px); flex-wrap: wrap; }
.bb-fakta__bunn > span {
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--bb-dempet);
}
.bb-fakta__lenke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--bb-acc-rgb), .4);
  background: rgba(var(--bb-acc-rgb), .08);
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 13.5px;
  font-weight: 600;
  transition: background .18s;
}
.bb-fakta__lenke:hover { background: rgba(var(--bb-acc-rgb), .18); }

/* ---------- 04 UT + 06 Elva (kraftord over fullflate) ---------- */
.bb-ut, .bb-elv { position: relative; height: 100vh; overflow: hidden; }
.bb-elv { height: 106vh; }
.bb-ut__skygge { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,30,.42), rgba(4,25,30,.1) 45%, rgba(4,25,30,.5)); }
.bb-elv__skygge { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,30,.38), rgba(4,25,30,.05) 42%, rgba(4,25,30,.62)); }
.bb-kraftord {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.bb-kraftord span {
  font-family: var(--bb-font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
  text-shadow: 0 20px 80px rgba(4,25,30,.55);
}
.bb-kraftord--ut span { font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(72px, 18vw, 300px); }
.bb-kraftord--elva span { font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(58px, 14vw, 240px); text-shadow: 0 20px 80px rgba(4,25,30,.6); }

/* ---------- 05 Havet ---------- */
.bb-hav { position: relative; padding: clamp(30px, 5vh, 60px) var(--bb-marg) clamp(60px, 11vh, 140px); background: var(--bb-bunn); }
.bb-hav__tittel {
  margin: 0 0 clamp(26px, 4.4vh, 52px);
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(46px, 9vw, 150px);
  line-height: .9;
  letter-spacing: -.045em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
}
.bb-hav__stor { height: min(86vh, 880px); }
.bb-hav__stor-figur { margin-bottom: var(--bb-gap); }
.bb-hav__detaljer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--bb-gap); }
.bb-h-detalj { height: min(40vh, 420px); }
.bb-hav__tekstrad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(34px, 6vh, 70px); }
.bb-hav__tekstrad p {
  margin: 0;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(17px, 1.7vw, 25px);
  line-height: 1.55;
  color: var(--bb-dempet);
  text-wrap: pretty;
}
.bb-h-rosfjord { height: min(62vh, 640px); }

/* ---------- 06b Elva, detaljer ---------- */
.bb-elvdetalj { position: relative; padding: clamp(40px, 7vh, 90px) var(--bb-marg) clamp(60px, 11vh, 140px); background: var(--bb-bunn); }
.bb-elvdetalj .bb-indre { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--bb-gap); }
.bb-h-elv { height: min(58vh, 600px); }
.bb-h-elv-stor { height: min(64vh, 660px); }
/* Nabobilder faar swell forskjoevet, saa flaten aldri staar stille. */
.bb-swell-1 { animation: bb-swell 11s ease-in-out infinite 0s; }
.bb-swell-2 { animation: bb-swell 9s ease-in-out infinite 1.4s; }
.bb-swell-3 { animation: bb-swell 13s ease-in-out infinite .7s; }
.bb-swell-4 { animation: bb-swell 15s ease-in-out infinite 2.1s; }
.bb-swell-5 { animation: bb-swell 10s ease-in-out infinite 3s; }

/* ---------- 07 Tre vann, en by ---------- */
.bb-tre { position: relative; height: 100vh; overflow: hidden; background: var(--bb-bunn); }
.bb-tre video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: .52;
  filter: saturate(.8);
}
.bb-tre__skygge { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(4,25,30,.22), rgba(4,25,30,.82)); }
.bb-tre__innhold {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(24px, 4vh, 52px);
  padding: 0 var(--bb-marg);
}
.bb-tre__tittel {
  margin: 0;
  text-align: center;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(40px, 8vw, 140px);
  line-height: .92;
  letter-spacing: -.045em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
}
.bb-tre__mini { display: flex; gap: clamp(10px, 1.6vw, 22px); width: min(1200px, 100%); }
.bb-tre__mini div { flex: 1; height: clamp(90px, 16vh, 180px); border-radius: 8px; overflow: hidden; }
.bb-tre__mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 09 Oeyeblikkene ---------- */
.bb-moment {
  position: relative;
  --bb-moment-luft: clamp(24px, 5vh, 56px);
  /* 100 + 9 kort x 62vh («momentPace» i handoffen). */
  height: 658vh;
  background: radial-gradient(1100px 720px at 50% 34%, rgba(13,77,82,.4), transparent 70%), var(--bb-bunn);
}
/* Tittelen har sin egen plass øverst i scenen, og kortene bruker høyden som
   er igjen. Med tittelen absolutt plassert over en scene som var sentrert
   på hele høyden, la første kort seg over slutten av «Øyeblikkene» (målt
   1024 og 1440 px, 1. okt 2026). */
.bb-moment__scene { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.bb-moment__topp { position: relative; z-index: 4; pointer-events: none; padding: clamp(74px, 12vh, 120px) var(--bb-marg) 0; }
.bb-moment__tittel {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(30px, 5vw, 80px);
  line-height: .98;
  letter-spacing: -.04em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
}
.bb-moment__senter { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.bb-momentkort {
  position: absolute;
  margin: 0;
  width: clamp(280px, 46vw, 660px);
  /* Aldri høyere enn rommet under tittelen, med luft over og under. */
  height: min(68vh, calc(100% - 2 * var(--bb-moment-luft)), 720px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 44px 130px rgba(0,0,0,.6);
  will-change: transform, opacity, filter;
}
.bb-momentkort > div:first-child { position: absolute; inset: -4%; }
.bb-momentkort img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-momentkort__skygge { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(4,25,30,.9)); }
.bb-momentkort figcaption { position: absolute; left: clamp(16px, 1.8vw, 30px); right: 16px; bottom: clamp(16px, 2.6vh, 30px); }
.bb-momentkort__navn {
  display: block;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(20px, 2.5vw, 42px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
}
.bb-momentkort__nr {
  display: block;
  margin-top: 7px;
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--bb-acc);
}
.bb-moment__strek {
  position: absolute; right: var(--bb-marg); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 11px; align-items: flex-end;
  z-index: 5; pointer-events: none;
}
.bb-moment__strek span {
  width: 26px; height: 2px;
  border-radius: 2px;
  background: rgba(232,244,242,.22);
  transition: background .45s, width .45s;
}

/* ---------- 10 Finalen ---------- */
.bb-finale { position: relative; height: 170vh; background: var(--bb-bunn-seksjon); }
.bb-finale__scene {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.bb-finale .bb-par { inset: -18% 0; }
.bb-finale__skygge { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,30,.5), rgba(4,25,30,.18) 40%, rgba(4,25,30,.72)); }
.bb-finale__vann {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 14%;
  background: linear-gradient(180deg, rgba(13,77,82,.88), rgba(6,48,56,.96));
  will-change: height;
}
.bb-finale__vann svg { position: absolute; left: 0; right: 0; top: -40px; width: 100%; height: 44px; display: block; }
.bb-finale__vann path { fill: rgba(13,77,82,.88); }
.bb-finale__tekst { position: relative; text-align: center; padding: 0 clamp(18px, 4vw, 64px); max-width: 1100px; margin-bottom: clamp(56px, 10vh, 110px); }
.bb-finale__inngang {
  margin: 0 0 clamp(22px, 3.6vh, 40px);
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(17px, 1.8vw, 26px);
  line-height: 1.5;
  color: var(--bb-tekst);
  text-wrap: pretty;
  text-shadow: 0 4px 26px rgba(4,25,30,.7);
}
.bb-finale__tittel {
  margin: 0;
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(56px, 13vw, 230px);
  line-height: .9;
  letter-spacing: -.05em;
  color: #fff; /* farge-unntak: Badebyen-handoffens hvite display-tekst */
  text-shadow: 0 16px 70px rgba(4,25,30,.6);
}
.bb-finale__linje {
  margin: clamp(18px, 3vh, 32px) 0 0;
  font-size: /* typografi-unntak: Badebyen-handoffens laaste skala */ clamp(15px, 1.4vw, 21px);
  color: var(--bb-dempet);
  letter-spacing: .03em;
}
.bb-cta {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: clamp(30px, 5vh, 56px);
  padding: 19px 34px;
  border-radius: 999px;
  background: var(--bb-acc);
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 15px;
  font-weight: 600;
  transition: transform .18s, box-shadow .18s;
}
.bb .bb-cta, .bb .bb-cta:hover { color: var(--bb-blekk); }
.bb-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(var(--bb-acc-rgb), .34); }

.bb-kreditter {
  position: absolute;
  left: var(--bb-marg); right: var(--bb-marg);
  bottom: clamp(20px, 3.4vh, 38px);
  z-index: 4;
  opacity: 0;
  will-change: opacity, transform;
}
.bb-kreditter__rad { display: flex; align-items: flex-start; gap: clamp(16px, 2.6vw, 44px); flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.bb-kreditter__etikett {
  flex: none;
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--bb-acc-rgb), .85);
  padding-top: 2px;
}
.bb-kreditter__rad > div { min-width: 160px; }
.bb-kreditter__rad b {
  display: block;
  font-family: var(--bb-font-display);
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--bb-tekst);
}
.bb-kreditter__rad p {
  margin: 3px 0 0;
  /* typografi-unntak: Badebyen-handoffens laaste skala */
  font-size: 12px;
  line-height: 1.45;
  color: rgba(232,244,242,.62);
}
.bb-kreditter__rad p.bb-kreditter--venter { color: rgba(232,244,242,.5); }

/* ---------- Mobil — verdiene er MOBILARKETS, ikke gjetning.
   «Badebyen mobil.dc.html» er diffet mot desktoparket, og hver regel her
   er et avvik derfra. Terskelen 720px er husets. ---------- */
@media (max-width: 720px) {
  .bb { --bb-marg: clamp(16px, 4vw, 48px); }
  .bb-hero { height: 92vh; }
  .bb-hero__tittel { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(40px, 13vw, 176px); }
  .bb-kort { height: min(58vh, 720px); }
  /* Paa telefon har hintet ingen hover aa komme tilbake fra — det blir staaende. */
  .bb-kort__hint { opacity: 1; transform: none; }
  .bb-sirkel__aaret { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(40px, 12vw, 112px); }
  .bb-h-stup { height: min(64vh, 960px); }
  .bb-h-svev { height: min(40vh, 470px); }
  .bb-h-liten { height: min(28vh, 320px); }
  .bb-h-boble { height: min(32vh, 360px); }
  .bb-fakta { height: 230vh; margin-top: -52vh; }
  .bb-fakta__innhold {
    justify-content: flex-start;
    gap: clamp(16px, 2.6vh, 44px);
    padding: clamp(46px, 7vh, 92px) var(--bb-marg) clamp(24px, 4vh, 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bb-fakta__tall > div { flex: 1 1 44%; min-width: 120px; }
  .bb-fakta__kolonner > div { padding: 10px 0; }
  .bb-kraftord--ut span { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(64px, 24vw, 300px); }
  .bb-hav__tittel { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(42px, 14vw, 150px); }
  .bb-hav__stor { height: min(58vh, 880px); }
  .bb-h-detalj { height: min(36vh, 420px); }
  .bb-h-rosfjord { height: min(48vh, 640px); }
  .bb-kraftord--elva span { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(54px, 20vw, 240px); }
  .bb-h-elv { height: min(46vh, 600px); }
  .bb-h-elv-stor { height: min(50vh, 660px); }
  .bb-tre__tittel { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(36px, 12vw, 140px); }
  .bb-moment__tittel { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(28px, 8vw, 80px); }
  .bb-momentkort { width: min(88vw, 660px); height: min(62vh, calc(100% - 2 * var(--bb-moment-luft)), 720px); }
  .bb-finale__tittel { font-size: /* typografi-unntak: Badebyen-handoffens mobilark */ clamp(48px, 17vw, 230px); }
}

/* ---------- Redusert bevegelse ----------
   Skriptet leser samme medieregel og setter parallaksen til 0, dropper
   vipp/ringvirkning og gjoer hopp direkte; dette slaar av CSS-sida. */
@media (prefers-reduced-motion: reduce) {
  .bb *, .bb *::before, .bb *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Kontrast over bilde (pikselmaaling 29. sep 2026) ----------
   Et mykt, lokalt sloer rett bak smaatekstene som staar over lyse partier
   i bildene. Tekst, farger og plassering er uendret; bare bunnen rett bak
   bokstavene blir moerkere. Maalt mot de faktiske pikslene med
   scripts/maal-tekst-over-bilde.mjs. */
.bb-kicker,
.bb-hero__sted,
.bb-hero__hint,
.bb-kort__sted,
.bb-sirkel__tekst,
.bb-finale__inngang,
.bb-finale__linje { position: relative; isolation: isolate; }
.bb-kort__sted,
.bb-finale__inngang,
.bb-finale__linje { width: fit-content; }
.bb-finale__inngang,
.bb-finale__linje { margin-inline: auto; }
.bb-kicker::before,
.bb-hero__sted::before,
.bb-hero__hint::before,
.bb-kort__sted::before,
.bb-finale__inngang::before,
.bb-finale__linje::before {
  content: '';
  position: absolute;
  inset: -1.8em -3em;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(4,25,30,.8), rgba(4,25,30,.6) 35%, rgba(4,25,30,.24) 70%, rgba(4,25,30,0));
}
.bb-sirkel__tekst::before {
  content: '';
  position: absolute;
  inset: -14% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(4,25,30,.78), rgba(4,25,30,.55) 60%, rgba(4,25,30,0));
}
/* Etiketten oeverst staar over det lyseste partiet (taket) og trenger mer. */
.bb-kicker::before {
  background: radial-gradient(closest-side, rgba(4,25,30,.9), rgba(4,25,30,.84) 45%, rgba(4,25,30,.34) 76%, rgba(4,25,30,0));
}
/* De store titlene trenger bare litt: et svakt, bredt sloer bak dem. */
.bb-hero__tittel,
.bb-finale__tittel { position: relative; isolation: isolate; }
.bb-hero__tittel::before,
.bb-finale__tittel::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(4,25,30,.45), rgba(4,25,30,.3) 60%, rgba(4,25,30,0));
}

/* Faktaboksen er alltid framme naar noe i den har fokus, ogsaa foer
   skriptet har rukket aa rulle (grundig test 29. sep 2026). */
.bb-fakta:focus-within .bb-fakta__plate { transform: none !important; }
.bb-fakta:focus-within .bb-fakta__innhold { opacity: 1 !important; transform: none !important; }