/* ============================================================
   METTE THAISEN – KROPSTERAPI
   base.css  –  FÆLLES styling for ALLE sider

   Hver side loader base.css FØRST og derefter sin egen fil
   (fx css/priser.css). Når to regler rammer det samme og er lige
   "stærke", vinder den, der står SIDST – derfor bygger sidernes
   egne filer ovenpå denne.

   Indhold:
     1. Grundlag  – farver, tekst og sektioner
     2. Header og navigation
     3. Knapper
     4. Hero og sidebanner (topbilleder)
     5. Kort med billede
     6. "Læs mere"-bokse (<details>)
     7. Footer
     8. Galleri-karrusel (lige over footeren)

   NOTER TIL DIG SELV:
   - rem  = størrelse i forhold til skriftstørrelsen (1rem ≈ 16px)
   - @media (min-width: 700px) = "gælder kun på skærme, der er
     mindst 700px brede" (tablet/computer). Uden media query =
     mobil først, og større skærme bygger ovenpå.
   - Vi bruger kun klasser (.navn) i vores selectors. id bruges
     kun til spring-links (#balance, #ro, #nerver, #kontaktinfo).
   ============================================================ */

/* ============================================================
   1. GRUNDLAG
   ============================================================ */

/* Farverne ligger ét sted. Bruges som var(--navn) resten af siden.
   Vil du ændre en farve på hele sitet, skal du kun rette her. */
:root {
  --lyscreme: #f6f2e8;
  --creme: #f5eee2; /* sidens baggrund */
  --sand: #ece1cd; /* lidt mørkere beige til bokse */
  --salvie-lys: #bcd6c9;
  --salvie: #93b9a7;
  --petroleum: #5f8791;
  --petroleum-moerk: #3f5f68; /* footer og mørke bånd */
  --bordeaux: #7c2c48; /* knapper og accent */
  --bordeaux-moerk: #5c1f36; /* hover på bordeaux */
  --tekst: #5a4432; /* varm brun tekst (blødere end sort, men stadig tydelig) */
  --hvid: #fdfbf6; /* en blød, varm "hvid" – ikke skarp hvid */

  /* SKRIFTSTØRRELSER – ét sted for hele sitet, ud fra hierarki.
     Alle overskrifter og tekster bruger disse, så de har samme
     størrelse på alle sider. Tallene bliver større fra 700px (se nedenfor). */
  --fs-h1: 1.9rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.2rem;
  --fs-card: 1.1rem; /* overskrifter inde i kort */
  --fs-p: 1rem; /* almindelig brødtekst */
  --fs-small: 0.95rem; /* tekst i kort, lister, links */
  --fs-note: 0.85rem; /* noter og små knapper */
  --fs-label: 0.75rem; /* små labels med store bogstaver */
  --fs-pris: 1.8rem; /* priser */
}

/* Fra 700px (tablet og computer) er teksten lidt større */
@media (min-width: 700px) {
  :root {
    --fs-h1: 2.6rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --fs-p: 1.05rem;
  }
}

/* box-sizing: border-box betyder, at padding og kant regnes MED i
   bredden. Ellers ville en boks på width: 100% + padding stikke ud
   over siden. Reglen er sat på alle de HTML-tags, vi bruger. */
html,
body,
header,
nav,
main,
section,
footer,
figure,
div,
span,
a,
p,
h1,
h2,
h3,
ul,
ol,
li,
dl,
dt,
dd,
img,
svg,
details,
summary,
blockquote,
cite,
address {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* bløde spring til #anker-links */
  overflow-x: hidden; /* værn mod vandret scrollbar fra billeder, der går ud til kanten */
}

body {
  margin: 0;
  background-color: var(--creme);
  color: var(--tekst);
  font-family: "Poppins", Arial, sans-serif;
  line-height: 1.6;
}

/* Overskrifter */
h1,
h2,
h3 {
  font-family: "Gothic A1", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  margin: 0 0 0.6em 0;
  max-width: 60ch; /* ch = bredden af ét "0" – holder linjerne læsevenlige */
}

h1 {
  font-size: var(--fs-h1);
  margin-top: 2rem;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 900;
}

h3 {
  font-size: var(--fs-h3);
}

/* Ét fremhævet ord i en overskrift: kursiv + accentfarve */
.ord-fremhaevet {
  font-style: italic;
  color: var(--bordeaux);
}

/* Brødtekst */
p {
  max-width: 60ch;
  margin: 0 0 1em 0;
  font-family: "Almarai", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--fs-p);
}

/* Billeder må aldrig blive bredere end deres boks.
   display: block fjerner den lille luft under billeder. */
img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--bordeaux);
}

ul,
ol {
  padding-left: 1.2em;
}

/* SEKTIONER
   Alt hovedindhold ligger i ÉN centreret spalte:
   - max-width holder linjerne kortere på store skærme
   - margin-inline: auto centrerer spalten vandret
   - margin-block giver luft mellem sektionerne
   - padding giver luft indeni sektionen
   Undtagelser med egne regler: header, hero, det farvede bånd
   (.bjaelke) og footer. */
main section,
main .sidebanner {
  max-width: 78rem;
  margin-inline: auto;
  margin-block: 4rem;
  padding: 2.5rem 1.8rem;
}

/* Sektioner med farvet baggrund får ekstra luft indeni.
   Selve farverne sættes i sidernes egne CSS-filer. */
.hvad-er-manuvision,
.forloebets-gang,
.prisvalg,
.tryg-rum {
  padding: 4.5rem 1.8rem;
}

/* --- Tablet: fra 700px og op --- */
@media (min-width: 700px) {
  main section,
  main .sidebanner {
    margin-block: 8rem;
    padding: 4rem 2.5rem;
  }

  .hvad-er-manuvision,
  .forloebets-gang,
  .prisvalg,
  .tryg-rum {
    padding: 6rem 2.5rem;
  }
}

/* --- Computer: fra 1000px og op --- */

/* ============================================================
   2. HEADER OG NAVIGATION

   Header'en har to udgaver, som begge ligger i HTML'en:
   - MOBIL:   logo + burgermenu (.mobilmenu)
   - COMPUTER: logo + links (.skrivebord-links) + Book-knap
   CSS'en viser den ene og skjuler den anden.
   ============================================================ */
header {
  position: relative; /* så mobilmenuen kan placeres ud fra HELE headeren */
  background-color: var(--lyscreme);
  padding: 1rem 1.2rem;
  z-index: 10; /* ligger ovenpå indholdet under headeren */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

/* flex = elementerne ligger på række. space-between skubber logoet
   til venstre og resten til højre. */
header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

/* Logoet er ét billede – vi sætter kun højden, bredden følger med */
.logo img {
  height: 90px;
  width: auto;
}

/* <details> i menuen nulstilles, så de ikke får den sandfarvede
   "Læs mere"-boks fra afsnit 6. */
header nav details {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

/* --- Burgerknappen (mobil) ---
   Vi skjuler teksten "Menu" (font-size: 0) og viser i stedet et
   ikon med ::before. Når menuen er åben (attributten [open] sættes
   automatisk af browseren), skifter ikonet fra ☰ til ✕. */
.mobilmenu-knap {
  list-style: none; /* fjerner standard-trekanten */
  cursor: pointer;
  font-size: 0;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.mobilmenu-knap::-webkit-details-marker {
  display: none; /* fjerner trekanten i Safari/Chrome */
}

.mobilmenu-knap::before {
  content: "☰";
  font-size: 2.3rem;
}

.mobilmenu[open] .mobilmenu-knap::before {
  content: "✕";
}

/* Selve menuboksen: placeres med position: absolute lige under
   headeren (top: 100%) og helt ud til højre. */
.mobilmenu .menu-links {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.6rem;
  z-index: 20; /* ovenpå hero-billedet lige under */
  background-color: var(--hvid);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column; /* links nedad i stedet for på række */
  gap: 0.9rem;
  min-width: 200px;
}

.menu-links a {
  text-decoration: none;
  color: var(--tekst);
  font-size: 1rem;
}

.menu-links a:hover {
  color: var(--bordeaux);
}

/* Book-knappen i mobilmenuen */
.menu-links .book-knap {
  background-color: var(--bordeaux);
  color: var(--hvid);
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  text-align: center;
}

/* "Praktisk information" i mobilmenuen (kun mobil – på computer er
   punkterne helt almindelige links) */
.praktisk-detaljer summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--tekst);
  text-decoration: none;
}

.praktisk-detaljer summary::-webkit-details-marker {
  display: none;
}

.praktisk-detaljer summary::after {
  content: "▾";
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.7em;
}

.praktisk-detaljer[open] summary::after {
  content: "▴";
}

/* Undermenuen rykkes lidt ind og får en streg i venstre side */
.praktisk-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.8rem 0 0 0.8rem;
  border-left: 2px solid var(--sand);
  margin-top: 0.5rem;
}

/* --- Computer-navigationen ---
   Vises først fra 700px (se media query nedenfor). */
.skrivebord-links {
  display: none;
}

/* Book-knappen på computer. Den ligger UDENFOR .skrivebord-links,
   som sidste element i header nav.
   TRICK: .skrivebord-links får flex: 1, dvs. den fylder al den
   plads, der er tilbage. Derved bliver Book-knappen skubbet helt ud
   til højre, mens de andre links står centreret i midten. */
.book-knap-desktop {
  display: none;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.55rem 1.4rem;
  border-radius: 30px;
  text-align: center;
  background-color: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--hvid);
  white-space: nowrap; /* teksten må ikke ombrydes */
}

.book-knap-desktop:hover {
  background-color: var(--bordeaux-moerk);
  border-color: var(--bordeaux-moerk);
  color: var(--hvid);
}

/* --- Tablet: burgermenuen forsvinder, almindelige links vises --- */
@media (min-width: 700px) {
  .mobilmenu {
    display: none;
  }

  .skrivebord-links {
    display: flex;
    flex: 1;
    align-items: center;
    flex-wrap: wrap; /* links må skifte linje, hvis der ikke er plads */
    justify-content: center;
    row-gap: 0.6rem;
    column-gap: 1.1rem;
  }

  .skrivebord-links a {
    text-decoration: none;
    color: var(--tekst);
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .skrivebord-links a:hover {
    color: var(--bordeaux);
  }

  .book-knap-desktop {
    display: inline-block;
  }

  header nav {
    gap: 1.2rem;
  }
}

@media (min-width: 1000px) {
  header nav {
    margin: 0;
    gap: 2rem;
  }

  .skrivebord-links {
    flex-wrap: nowrap;
    column-gap: 1.8rem;
  }

  .skrivebord-links a {
    font-size: 0.95rem;
  }
}

/* Linket til den side, man er på. script.js sætter attributten
   aria-current="page" på det rigtige link. Den står EFTER hover-
   reglerne, så den aktuelle side bliver ved med at være mørk. */
.skrivebord-links a[aria-current="page"],
.menu-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 700;
  color: var(--tekst);
}

/* ============================================================
   3. KNAPPER
   .knap      = fyldt bordeaux (bruges til "Book"-knapper)
   .knap-lys  = hvid med blå kant (alle andre knapper)
   ============================================================ */
.knap {
  display: inline-block;
  background-color: var(--bordeaux);
  color: var(--hvid);
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border-radius: 30px; /* så høj værdi = helt runde ender */
  font-size: 0.95rem;
  text-align: center;
  margin-top: 0.5rem;
  margin-inline: auto;
}

.knap:hover {
  background-color: var(--bordeaux-moerk);
}

.knap-lys {
  display: inline-block;
  background-color: var(--hvid);
  color: var(--petroleum-moerk);
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border-radius: 30px;
  font-size: 0.95rem;
  text-align: center;
  margin-top: 0.5rem;
  border: 2px solid var(--petroleum-moerk);
}

.knap-lys:hover {
  background-color: var(--petroleum-moerk);
  color: var(--hvid);
}

/* Tekst-link: understreget link i stedet for knap-look.
   Bruges på forsiden, om-mig og manuvision. Understregningen er en
   border-bottom (ikke text-decoration), så vi selv styrer stregen. */
.tekst-link {
  color: var(--bordeaux);
  font-weight: 600;
  border-bottom: 1.5px solid var(--bordeaux);
  text-decoration: none;
}

.tekst-link:hover {
  color: var(--bordeaux-moerk);
  border-bottom-color: var(--bordeaux-moerk);
}

/* ============================================================
   4. HERO OG SIDEBANNER
   Hero      = forsidens store billede med tekst.
   Sidebanner = det enkle topbillede på de andre sider.
   ============================================================ */

/* Hero går helt ud til skærmens kanter.
   TRICK: 50% er halvdelen af forældrens bredde, 50vw er halvdelen af
   skærmens bredde. calc(50% - 50vw) giver derfor et negativt tal,
   der trækker hero'en ud til kanten. (vw = procent af skærmbredden) */
main .hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 3.5rem;
}

/* Mobil: teksten har luft i siderne, men billedet trækkes ud til
   kanten med negativ margin (-3rem) */
.hero {
  padding: 0 3rem;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 0;
  margin-top: 4rem;
}
.hero h2 {
  font-size: 1rem;
}

.speciel-hero {
  color: var(--petroleum);
  color: var(--petroleum-moerk);
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: bold;
}
.hero figure {
  margin: 0 -3rem;
  height: 56vw; /* vw = procent af skærmbredden, så højden følger bredden */
  overflow: hidden; /* alt der stikker ud af boksen, skjules */
  position: relative;
}

/* Billedet er lavet i de rigtige proportioner (1.6:1), så Mette ser
   naturlig ud. object-fit: cover fylder boksen og beskærer kun i top
   og bund. Ingen strækning eller forskydning, så billedet bliver skarpt. */
.hero figure img {
  position: absolute;
  inset: 0; /* inset: 0 = top, højre, bund og venstre er alle 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* På tablet/computer ligger teksten oven på billedet i højre side.
   Et blødt, lyst slør over højre side sørger for, at teksten altid
   kan læses. */
@media (min-width: 700px) {
  .hero figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 40%, rgba(245, 238, 226, 0.6) 100%);
    pointer-events: none;
  }
  .speciel-hero {
    color: var(--petroleum-moerk);
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 1rem;
    font-weight: bold;
  }
}
.hero-tekst .kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--petroleum-moerk);
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  text-align: center;
}

.hero h2 {
  font-size: 1rem;
  margin-bottom: 2rem;
}

.overskrift_ul {
  margin-bottom: 0;
}

.hero p {
  font-size: var(--fs-h2);
  margin-bottom: 2px;
}
.hero ul {
  margin-top: 0;
}
.speciel-hero {
  margin-bottom: 2rem;
}

.hero li p {
  font-size: 1rem;
}

/* Række af knapper */
.hero-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Sidebanner: kun et billede øverst, ingen tekst ovenpå */
.sidebanner {
  padding: 0;
}

.sidebanner figure {
  margin: 0;
}

.sidebanner figure img {
  width: 100%;
  height: 50vw;
  max-height: 320px;
  object-fit: cover; /* fylder boksen og beskærer i stedet for at strække */
}

.sidebanner-tekst {
  padding: 1.8rem 1.2rem;
}

/* --- Tablet: teksten lægges ovenpå billedet i højre side --- */
@media (min-width: 700px) {
  .hero-tekst .kicker {
    margin-bottom: 3rem;
    margin-top: 0;
    padding-top: 0;
  }
  main .hero {
    position: relative; /* gør at .hero-tekst kan placeres inde i den */
    padding: 0;
    margin-bottom: 4.5rem;
  }

  .hero figure {
    margin: 0;
    height: 55vw;
    min-height: 480px;
    max-height: 900px;
  }

  .hero-tekst {
    position: absolute;
    top: 50%;
    right: 7%;
    transform: translateY(-50%); /* centrerer lodret */
    width: 34%;
    padding: 0;
  }

  .hero .hero-knapper {
    justify-content: flex-start;
  }

  main .sidebanner {
    padding: 0;
  }

  .sidebanner figure img {
    height: 30vw;
    max-height: 340px;
  }

  .sidebanner-tekst {
    padding: 2.5rem 3rem;
  }
  .hero p {
    margin-top: 4rem;
    font-weight: bold;
    margin-bottom: 2px;
  }
  .hero ul {
    margin-top: 0;
  }
  .hero h1 {
    margin-bottom: 0;
  }
}

/* ============================================================
   5. KORT MED BILLEDE
   .billede-kort  = sektionen (forside: .om-mig-kort og
                    .forloeb-kort, om mig: .historie)
   .kort-indhold  = wrapper med billede + tekst
   .kort-billede  = billedet, .kort-tekst = tekstdelen
   ============================================================ */
.billede-kort {
  text-align: start;
}

.forloeb-kort img,
.historie img {
  border-radius: 16px;
  margin: 1.2rem auto;
  width: 100%;
  height: auto;
}

/* --- Tablet: billede og tekst side om side --- */
@media (min-width: 700px) {
  .kort-indhold {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
  }

  /* Billede og tekst deler pladsen ligeligt.
     min-width: 0 forhindrer, at et stort billede presser teksten
     for smal. */
  .kort-billede,
  .kort-tekst,
  .historie-tekst,
  .historie-venstre {
    flex: 1;
    min-width: 0;
  }

  .billede-kort img {
    margin: 0;
    width: 100%;
    height: 360px;
    object-fit: cover;
  }
}

/* ============================================================
   6. "LÆS MERE"-BOKSE (<details>)
   Bruges på forløb-, priser- og om mig-siden.
   ============================================================ */
details {
  background-color: var(--sand);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 0.6rem 0 1.2rem 0;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--petroleum-moerk);
}

details p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   7. FOOTER (ens på alle sider)
   ============================================================ */
/* Book-bånd lige over galleriet: en lidt lysere blå end footeren, uden
   mellemrum, så bånd, galleri og footer hænger sammen. */
.book-band {
  background-color: var(--petroleum);
  color: var(--hvid);
  text-align: center;
  padding: 3.5rem 1.8rem 4rem;
  margin: 0;
}

.book-band h2 {
  color: var(--hvid);
  margin: 0 auto 0.6rem;
}

.book-band p {
  color: var(--hvid);
  margin: 0 auto 1.6rem;
  max-width: 26rem;
}

/* Hvid knap, så den står tydeligt mod den blå baggrund */
.book-band .knap {
  display: inline-block;
  width: auto;
  margin: 0;
  background-color: var(--hvid);
  color: var(--bordeaux);
}

.book-band .knap:hover {
  background-color: var(--sand);
}

@media (min-width: 700px) {
  .book-band {
    padding: 5rem 2.5rem 5.5rem;
  }
}

footer {
  background-color: var(--petroleum-moerk);
  color: var(--hvid);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  text-align: center;
  margin: 0;
  padding: 4rem;
}

/* .footer-top samler logo + kontakt + adresse. På computer ligger
   de tre ved siden af hinanden, og CVR-linjen står for sig selv
   nedenunder. */
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  width: 100%;
}

.footer-cvr {
  width: 100%;
  max-width: none; /* p har ellers max-width: 60ch, som gjorde linjen for smal til at centrere */
  text-align: center;
  margin: 0;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--fs-note);
  opacity: 0.7;
}

footer h2 {
  color: var(--hvid);
  font-size: var(--fs-h2);
  margin: 0 0 0.3rem 0;
}

.footer-logo img {
  width: 170px;
  max-width: 100%;
  margin: 2rem auto;
}

footer p {
  margin: 0.3rem 0;
  font-size: var(--fs-small);
}

.footer-kontakt p,
.footer-adresse p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.footer-kontakt img,
.footer-adresse img {
  width: 16px;
  height: 16px;
}

.footer-mail {
  margin-bottom: 3rem;
}

footer a {
  color: var(--hvid);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Tablet: footeren bliver til én vandret linje --- */
@media (min-width: 700px) {
  footer {
    align-items: stretch; /* så .footer-top og .footer-cvr fylder hele bredden */
    text-align: left;
    padding-inline: 6rem;
    padding-block: 8rem;
  }

  .footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-cvr {
    text-align: center;
    margin-top: 1.5rem;
  }

  .footer-logo {
    text-align: left;
    flex-shrink: 0; /* logoet må ikke skrumpe */
  }

  .footer-logo img {
    margin: 0;
  }

  .footer-mail {
    margin: 0;
  }

  .footer-kontakt p,
  .footer-adresse p {
    justify-content: flex-start;
  }
}

/* ============================================================
   8. GALLERI-KARRUSEL
   Ligger altid lige over footeren uden mellemrum, så den ser ud
   som en forlængelse af den.

   SÅDAN VIRKER DEN: billederne ligger to gange i HTML (sæt 1 og
   sæt 2). Rækken glider 50% til venstre og starter så forfra – da
   sæt 2 er en kopi af sæt 1, ser det ud som en uendelig løkke.
   ============================================================ */
.galleri {
  margin-top: 0; /* galleriet sidder lige under book-båndet */
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}

.galleri .deko-blad {
  display: block;
  margin: 0 auto 0.8rem;
  color: var(--salvie);
  opacity: 0.8;
}

/* Rammen om billederne går helt ud til skærmens kanter (samme
   calc-trick som hero). overflow: hidden skjuler det, der glider
   ud af rammen. mask-image laver en blød udtoning i begge sider. */
.galleri-billeder {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

/* Sporet er lige så bredt som alle billederne tilsammen
   (max-content) og glider via en animation (se @keyframes). */
.galleri-billeder .karrusel-spor {
  display: flex;
  width: max-content;
  animation: karrusel-scroll 50s linear infinite; /* lavere tal = hurtigere */
  will-change: transform;
}

.galleri-billeder img {
  height: 260px;
  width: auto;
  flex: 0 0 auto; /* billederne må hverken vokse eller skrumpe */
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 14px 30px rgba(63, 95, 104, 0.16);
  display: block;
}

@keyframes karrusel-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* -50% fordi billederne ligger to gange */
  }
}

/* Hvis brugeren har slået animationer fra i sit system (mange gør
   på mobil), stopper vi animationen. Så kan man i stedet swipe
   sidelæns, og de gentagne billeder (sæt 2) skjules. */
@media (prefers-reduced-motion: reduce) {
  .galleri-billeder {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .galleri-billeder .karrusel-spor {
    animation: none;
  }

  .galleri-billeder .karrusel-spor img[aria-hidden="true"] {
    display: none;
  }
}

/* --- Tablet: lidt større --- */
@media (min-width: 700px) {
  .galleri .deko-blad {
    width: 36px;
    height: 36px;
  }

  .galleri-billeder img {
    height: 320px;
  }
}