/* =========================================================
   Grocott Fysioterapi – Designsystem (globale regler)
   - Mobile-first
   - BEM på dansk: .blok__element--variant
   - 8-point grid til al spacing
   ========================================================= */

/* Google Fonts loaded via <link> in HTML for faster render (avoids @import chain-delay) */

:root {
  /* ---------- Farver: primær (blå) ---------- */
  --blue-100: #194470;   /* mørk – bærende elementer, nav, sekundære knapper */
  --blue-200: #30B1D9;   /* fremhæv info */
  --blue-300: #D1E2EB;   /* lyse sektionsadskillere, dekoration */

  /* ---------- Accent (orange) – KUN til CTA / vigtigste handlinger ---------- */
  --orange-100: #F2921D;
  --orange-200: #FF9E1F;   /* hover – primær CTA */
  --orange-300: #FFD600;   /* hover – ekstra fremhævning */

  /* ---------- Neutrale ---------- */
  --neutral-100: #292929;   /* off-black / skriftfarve */
  --neutral-200: #707070;   /* sekundær tekst, detaljer */
  --neutral-300: #E8E8E8;   /* skillelinjer, borders, pagination */
  --neutral-400: #FFFFFF;   /* baggrund */

  /* ---------- System / feedback ---------- */
  --system-green: #00B579;
  --system-red:   #E03838;

  /* ---------- Spacing (8-point grid, rem skalerer med browser-font) ---------- */
  --space-4:    0.25rem;   /* undtagelse: kun ikoner/badges */
  --space-8:    0.5rem;
  --space-16:   1rem;
  --space-24:   1.5rem;    /* standard mellem elementer */
  --space-32:   2rem;
  --space-40:   2.5rem;    /* standard mellem sektioner */
  --space-48:   3rem;
  --space-56:   3.5rem;
  --space-64:   4rem;
  --space-72:   4.5rem;
  --space-80:   5rem;
  --space-88:   5.5rem;
  --space-96:   6rem;
  --space-104:  6.5rem;
  --space-120:  7.5rem;
  --space-128:  8rem;

  /* ---------- Global side-luft ---------- */
  --page-gutter: var(--space-16);

  /* ---------- Form ---------- */
  --radius: 0.5rem;

  /* ---------- Navbar-effekter ---------- */
  --color-navbar-glass: var(--blue-300);
  --shadow-navbar: 0 8px 20px rgba(0, 0, 0, 0.08);

  /* ---------- Bagudkompatibilitet (gamle navne, så navbar stadig virker) ---------- */
  --color-blue100:    var(--blue-100);
  --color-blue200:    var(--blue-200);
  --color-blue300:    var(--blue-300);
  --color-orange100:  var(--orange-100);
  --color-neutral100: var(--neutral-100);
  --color-neutral200: var(--neutral-200);
  --color-neutral300: var(--neutral-300);
  --color-neutral400: var(--neutral-400);
  --color-bg:         var(--neutral-400);
}

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

/* ---------- Body (mobile-first: 16px / Regular) ---------- */
html,
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--neutral-100);
  background-color: var(--neutral-400);
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  section,
  section.visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ---------- Typografi (mobile-first) ---------- */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-16);
  color: var(--blue-100);
  line-height: 1.2;
}

/* Proximity principle: headings bind to content below, not above */
h2:not(:first-child),
h3:not(:first-child),
h4:not(:first-child) {
  margin-top: var(--space-40);
}

h1 {
  font-family: "Report", "IBM Plex Sans", sans-serif;
  font-size: 2rem;           /* 32px mobil */
  font-weight: 700;
}

h2 {
  font-size: 1.75rem;        /* 28px mobil */
  font-weight: 600;
}

h3 {
  font-size: 1.375rem;       /* 22px */
  font-weight: 600;
}

h4 {
  font-size: 1.125rem;       /* 18px */
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-16);
}

ul,
ol {
  margin: 0 0 var(--space-16);
  padding-left: var(--space-24);
}

/* Give CTA buttons breathing room after text/lists */
p + .knap,
ul + .knap,
ol + .knap {
  margin-top: var(--space-24);
}

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

main img:not(.hero__billede):not(.kontakt-modal__logo) {
  max-width: 100%;
  margin-inline: auto;
}

@media (max-width: 767px) {
  main img:not(.hero__billede):not(.kontakt-modal__logo):not(.anmeldelse-kort__billede) {
    max-width: 90%;
  }

  .behandlinger-hero--tilforaeldre ~ .hold-split .hold-split__billede-wrapper {
    width: 100%;
    max-width: none;
  }

  .behandlinger-hero--tilforaeldre ~ .hold-split .hold-split__billede {
    width: 100%;
    max-width: 100%;
  }
}

a {
  color: var(--blue-100);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--blue-200);
}

a:focus-visible {
  outline: 2px solid var(--orange-100);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ---------- Knapper (CTA = orange, sekundær = blå) ---------- */
.knap {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  min-height: 48px;
  padding: 0.75em 1.5em;
  border: none;
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: filter 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.knap:hover {
  text-decoration: none;
}

.knap:disabled,
.knap[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.knap--primaer {
  background-color: var(--orange-100);
  color: var(--neutral-400);
  border: none;
}

.knap--primaer:hover,
.knap--primaer:focus {
  background-color: #FF9E1F;
  color: var(--neutral-400);
  text-decoration: none;
}

.knap--sekundaer {
  background-color: transparent;
  color: var(--orange-100);
  border: 2px solid var(--orange-100);
}

.knap--sekundaer:hover,
.knap--sekundaer:focus {
  background-color: #FFD600;
  border-color: #FFD600;
  color: var(--neutral-100);
  text-decoration: none;
}

.knap:focus-visible {
  outline: 2px solid var(--blue-100);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .knap {
    display: inline-block;
    width: auto;
    min-height: 40px;
  }
}

/* ---------- Sektion / indholdscontainer ---------- */
.sektion {
  padding: var(--space-40) var(--page-gutter);
}

.sektion + .sektion {
  padding-top: 0;
}

.sektion__indhold {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Feedback / fejlmeddelelser ---------- */
.fejl {
  color: var(--system-red);
  font-size: 0.875rem;
  margin-top: var(--space-8);
}

.succes {
  color: var(--system-green);
  font-size: 0.875rem;
  margin-top: var(--space-8);
}

/* ---------- Tilgængelighed: skjul visuelt men behold for skærmlæsere ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Komponenter
   ========================================================= */

/* ─---------------------------- Navbar --------------------- */
.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px var(--page-gutter);
  position: relative;
  background-color: var(--color-navbar-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-neutral300);
  box-shadow: var(--shadow-navbar);
  z-index: 1200;
}

.navbar__logo {
  margin: 0 auto;
  height: 38px;
  display: block;
}

.navbar__tilbage {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  color: var(--color-blue100);
  text-decoration: none;
}

.navbar__burger {
  display: flex;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  align-items: center;
  background-image: linear-gradient(var(--color-blue100), var(--color-blue100));
  background-repeat: no-repeat;
  background-size: 18px 2px;
  background-position: center;
  transition: background-size 0.2s ease;
  justify-content: center;
}

.navbar__burger svg {
  display: none;
}

.navbar__burger::before,
.navbar__burger::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background-color: var(--color-blue100);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.navbar__burger::before {
  transform: translate(-50%, calc(-6px - 50%));
}

.navbar__burger::after {
  transform: translate(-50%, calc(6px - 50%));
}

.navbar__burger.active {
  background-size: 0 2px;
}

.navbar__burger.active::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.navbar__burger.active::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.navbar__menu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-neutral400);
  z-index: 1300;
  box-shadow: var(--shadow-navbar);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
}

.navbar__menu.active {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.navbar__menu-link {
  padding: 9px 14px 12px;
  text-decoration: none;
  display: block;
  color: var(--color-blue100);
  border-bottom: 1px solid var(--color-neutral300);
  transition: color 0.2s ease;
  border-radius: 8px;
  position: relative;
  font-size: 0.95rem;
  margin: 4px 8px;
}

.navbar__menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.navbar__menu-link:last-child {
  background-color: var(--color-orange100);
  color: var(--color-neutral400);
  border-radius: 8px;
  align-self: center;
  justify-content: center;
  display: flex;
  width: fit-content;
  margin: 6px auto 10px;
  padding: 8px 12px;
}

.navbar__menu-link:last-child::after {
  display: none;
}

/* ----------------- Tablet (fra 768px) ------------------ */
@media (min-width: 768px) {
    /* ------------- Burger-menu knap styling --------------- */
  .navbar {
    justify-content: space-between;
    padding: 18px 24px;
    background-color: var(--color-navbar-glass);
    z-index: 1200;
  }

  .navbar__logo {
    margin: 0;
    height: 48px;
  }

  .navbar__burger {
    padding: 4px;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 32px;
    height: 32px;
  }

  .navbar__menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-neutral400);
    z-index: 1300;
    box-shadow: var(--shadow-navbar);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease;
  }

  .navbar__menu.active {
    max-height: 620px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .navbar__menu-link {
    margin: 4px 10px;
  }

  /*--------------- Burger-menu knap styling slut -------------*/


}

/* ----------------- Desktop (fra 1095px) ------------------- */
@media (min-width: 1095px) {
  :root {
    --page-gutter: var(--space-56);
  }

  body {
    font-size: 1.125rem;   /* 18px desktop brødtekst; html forbliver 16px so rem-base er stabil */
  }

  .knap {
    font-size: 0.95rem;
    line-height: 1.35;
    min-height: 36px;
    padding: 0.55em 1.2em;
  }

  a.knap,
  button.knap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: fit-content;
  }

  .sektion {
    padding: var(--space-64) var(--page-gutter);
  }

  /* ---------- Typografi: desktop-størrelser ---------- */
  h1 {
    font-size: 2.5rem;     /* 40px */
  }

  h2 {
    font-size: 2.25rem;    /* 36px */
  }

    /*-------------- Burger-knap styling ----------------------*/
  .navbar {
    padding-left: max(var(--page-gutter), calc((100% - 1200px) / 2));
    padding-right: max(var(--page-gutter), calc((100% - 1200px) / 2));
  }

  .navbar__burger {
    display: none;
  }

  .navbar__menu {
    display: flex;
    flex-direction: row;
    gap: 6px;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .navbar__menu-link {
    padding: 6px 10px 10px;
    font-size: 0.875rem;
    font-weight: 700;
    border-bottom: none;
    border-radius: 8px;
  }

  .navbar__menu-link:last-child {
    border-radius: 8px;
    padding: 6px 14px;
    margin: 0 0 0 auto;
  }

  .navbar__menu-link:not(:last-child):hover {
    color: var(--color-blue100);
  }

  .navbar__menu-link:not(:last-child):hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  /*---------------Burger-knap styling slut-----------------*/


}


/* =========================================================
   FORSIDE
   ========================================================= */

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__baggrund {
  position: relative;
  height: clamp(269px, 52.8vw, 499px);
}

.hero__billede {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero__billede--aktiv {
  opacity: 1;
  z-index: 1;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(25, 68, 112, 0.25), rgba(25, 68, 112, 0.7));
  display: flex;
  align-items: flex-end;
  padding: var(--space-32) var(--space-16);
}

.hero__indhold {
  color: var(--neutral-400);
  max-width: 600px;
}

.hero__etiket {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue-300);
  margin-bottom: var(--space-8);
}

.hero__overskrift {
  color: var(--neutral-400);
  margin-bottom: var(--space-16);
}

.hero__tekst {
  margin-bottom: var(--space-24);
  color: rgba(255, 255, 255, 0.9);
}

.hero__dots {
  position: absolute;
  bottom: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-8);
  z-index: 2;
}

.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

.hero__dot--aktiv {
  background-color: var(--neutral-400);
}

@media (min-width: 1095px) {
  .hero__baggrund {
    height: clamp(250px, 40.32vw, 403px);
  }
}

/* ── Om klinikken ─────────────────────────────────────────── */
.om-klinikken__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.om-klinikken__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
}

.om-klinikken__billede {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

.om-klinikken__liste {
  padding-left: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.om-klinikken__liste li {
  font-size: 0.95rem;
  line-height: 1.6;
}

.om-klinikken__knap {
  display: block;
  text-align: center;
}

@media (min-width: 768px) {
  .om-klinikken__wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
    grid-template-areas:
      "tekst billede"
      "knap billede";
    align-items: center;
    gap: var(--space-48);
  }

  .om-klinikken__tekst {
    grid-area: tekst;
  }

  .om-klinikken__billede-wrapper {
    grid-area: billede;
    max-width: 100%;
  }

  .om-klinikken__billede {
    height: clamp(240px, 32vw, 440px);
    object-fit: cover;
    object-position: center;
  }

  .om-klinikken__knap {
    grid-area: knap;
    justify-self: start;
  }
}

/* ── Find din behandling (kropsfigur) ─────────────────────── */

.find-behandling {
  background-color: var(--neutral-300);
}

/* Mobil: figur mellem tekst og knap via order */
.find-behandling .sektion__indhold {
  display: flex;
  flex-direction: column;
}

.find-behandling__figur {
  display: flex;
  justify-content: center;
  order: 2;
}

/* Pakker tekst+knap ud som direkte børn på mobil */
.find-behandling__content {
  display: contents;
}

.find-behandling__tekst {
  order: 1;
  margin-bottom: var(--space-24);
}

.find-behandling__knap-wrapper {
  order: 3;
}

.find-behandling__svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 1375 / 1536;
  pointer-events: none;
}

/* På behandlingssiden er zonerne klikbare */
.behandlinger__svg {
  pointer-events: auto;
  max-width: 264px;
}

@media (min-width: 1095px) {
  .find-behandling .sektion__indhold {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .find-behandling__figur {
    flex: 0 0 40%;
    order: 0;
    justify-content: center;
    align-self: center;
  }

  .find-behandling__figur .find-behandling__svg {
    max-width: 100%;
  }

  .find-behandling__figur .find-behandling__svg.behandlinger__svg {
    max-width: 470px;
  }

  /* Gendanner wrapper på desktop */
  .find-behandling__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    flex: 1;
    order: 0;
  }

  .find-behandling__tekst {
    order: 0;
    margin-bottom: 0;
  }

  .find-behandling__knap-wrapper {
    order: 0;
    text-align: left;
    margin-top: 0;
  }
}

/* ── Øvrige behandlinger ─────────────────────────────────────────── */
.oevrige-behandlinger__underoverskrift {
  margin-top: var(--space-16);
}

.oevrige-behandlinger__billede {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin-top: var(--space-40);
  margin-bottom: var(--space-24);
}

.oevrige-behandlinger__knap-wrapper {
  text-align: center;
}

@media (min-width: 1095px) {
  .oevrige-behandlinger .sektion__indhold {
    display: flex;
    align-items: center;
    gap: var(--space-64);
  }

  .oevrige-behandlinger__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: center;
    text-align: left;
  }

  .oevrige-behandlinger__billede-wrapper {
    flex: 0 0 45%;
  }

  .oevrige-behandlinger__billede {
    height: clamp(320px, 40vw, 520px);
    margin-top: var(--space-40);
    margin-bottom: 0;
  }

  .oevrige-behandlinger__knap-wrapper {
    text-align: left;
    margin-top: var(--space-24);
  }
}

.anmeldelser {
  background-color: var(--neutral-300);
}

.anmeldelser__overskrift {
  padding-top: var(--space-32);
  margin-bottom: var(--space-16);
}

.anmeldelser__intro {
  margin-bottom: var(--space-24);
}

.anmeldelse-karrusel {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}

.anmeldelse-karrusel__spoer {
  display: flex;
  flex: 1;
  gap: var(--space-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.anmeldelse-karrusel__spoer::-webkit-scrollbar {
  display: none;
}

.anmeldelse-karrusel__pil {
  background-color: var(--blue-100);
  border: none;
  color: var(--neutral-400);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  padding: 0 0 2px 0;
  transition: filter 0.2s;
}

.anmeldelse-karrusel__pil:hover {
  background-color: var(--blue-200);
}

.anmeldelse-kort {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--neutral-400);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-snap-align: start;
}

.anmeldelse-kort__billede {
  width: 100%;
  height: clamp(200px, 22vw, 360px);
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.anmeldelse-kort__indhold {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-16) var(--space-24);
}

.anmeldelse-kort__citat {
  flex: 1;
  font-style: italic;
  color: var(--neutral-100);
  margin-bottom: var(--space-8);
  font-size: 0.95rem;
  line-height: 1.6;
}

.anmeldelse-kort__navn {
  font-weight: 600;
  color: var(--blue-100);
  margin: 0;
  font-size: 0.9rem;
}

.anmeldelse-kort__tilstand {
  font-weight: 400;
  color: var(--neutral-200);
}

.anmeldelser__knap-wrapper {
  text-align: center;
}

@media (min-width: 768px) {
  .anmeldelse-kort {
    flex: 0 0 calc(50% - var(--space-8));
  }
}

@media (min-width: 1095px) {
  .anmeldelse-karrusel__spoer {
    overflow: visible;
    scroll-snap-type: none;
  }

  .anmeldelse-kort {
    flex: 1;
    scroll-snap-align: none;
  }
}

/* =========================================================
   HERO SEKTION (alle html-sider med stor header med baggrundsbillede)
     - Genbruges på alle undersider for konsistens
   ========================================================= */

.behandlinger-hero {
  background-color: var(--blue-100);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--neutral-400);
  text-align: center;
  padding-block: var(--space-40);
  padding-inline: var(--page-gutter);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(140px, 25vw, 300px);
}

.behandlinger-hero .sektion__indhold {
  position: relative;
  z-index: 1;
  width: 100%;
}

.behandlinger-hero h1 {
  color: var(--neutral-400);
  margin-bottom: 0;
}

.behandlinger-hero p {
  max-width: 640px;
  margin-inline: auto;
  color: var(--blue-300);
}

/* ── Baggrundsbilleder per side ─────────────────────────── */
.behandlinger-hero--om-klinikken { background-image: url('assets/omklinkken.webp'); }
.behandlinger-hero--behandlinger { background-image: url('assets/behandlinger.webp'); }
.behandlinger-hero--tilforaeldre { background-image: url('assets/tilforaeldre.webp'); }
.behandlinger-hero--tilerhverv   { background-image: url('assets/erhverv.webp'); }
.behandlinger-hero--priser       { background-image: url('assets/priser.webp'); }
.behandlinger-hero--holdtraening { background-image: url('assets/holdtraening.webp'); }
.behandlinger-hero--kontakt      { background-image: url('assets/kontakt.webp'); }
.behandlinger-hero--booking      { background-image: url('assets/booking.webp'); }

/* ── Indholdsbilleder (full-width i tekst-sektioner) ─────── */
.indholds-billede {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  margin-block: var(--space-24);
}

@media (min-width: 1095px) {
  .indholds-billede {
    max-width: 760px;
    max-height: 480px;
    object-fit: cover;
    margin-inline: auto;
  }
}

.behandling-sektion {
  padding-block: var(--space-64);
}

.behandling-sektion--lys {
  background-color: var(--neutral-300);
}

.behandling-sektion__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  padding-top: var(--space-40);
}

.behandling-sektion__billede img {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-inline: 0;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius);
}

.behandling-sektion__tekst {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-16);
  text-align: left;
  margin: 0;
}

@media (min-width: 768px) {
  .behandling-sektion__wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--space-48);
  }

  .behandling-sektion__billede,
  .behandling-sektion__tekst {
    width: 100%;
    max-width: none;
    align-self: start;
  }

  .behandling-sektion__tekst {
    align-self: stretch;
    justify-content: center;
  }

  .behandling-sektion__billede {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .behandling-sektion__billede img {
    width: 100%;
  }

  .behandling-sektion__wrapper--omvendt .behandling-sektion__billede {
    order: 2;
  }

  .behandling-sektion__wrapper--omvendt .behandling-sektion__tekst {
    order: 1;
  }
}

/* =========================================================
   BOOKING SIDE
   ========================================================= */

.booking__titel {
  margin-bottom: var(--space-32);
}

/* ── Trin-indikator ──────────────────────────────────────── */
.booking__trin-indikator {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-40);
}

.booking__trin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.booking__trin-cirkel {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--neutral-300);
  color: var(--neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  transition: background-color 0.2s, color 0.2s;
}

.booking__trin--aktiv .booking__trin-cirkel {
  background-color: var(--blue-100);
  color: var(--neutral-400);
}

.booking__trin--fuldfoert .booking__trin-cirkel {
  background-color: var(--blue-200);
  color: var(--neutral-400);
}

.booking__trin-tekst {
  font-size: 0.8rem;
  color: var(--neutral-200);
  white-space: nowrap;
}

.booking__trin--aktiv .booking__trin-tekst,
.booking__trin--fuldfoert .booking__trin-tekst {
  color: var(--blue-100);
  font-weight: 600;
}

.booking__trin-streg {
  flex: 1;
  height: 2px;
  background-color: var(--neutral-300);
  margin-bottom: var(--space-24);
}

/* ── Trin-sektioner ─────────────────────────────────────── */
.booking__sektion--skjult {
  display: none;
}

.booking__sektion-overskrift {
  margin-bottom: var(--space-24);
}

/* ── Behandlingsvalg (trin 1) ───────────────────────────── */
.booking__behandlinger {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.booking__behandling-kort {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-16);
  border: 2px solid var(--neutral-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.booking__behandling-kort input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--blue-100);
  width: 18px;
  height: 18px;
}

.booking__behandling-kort--valgt {
  border-color: var(--blue-100);
  background-color: rgba(25, 68, 112, 0.05);
}

.booking__behandling-indhold strong {
  display: block;
  color: var(--neutral-100);
  margin-bottom: var(--space-4);
}

.booking__behandling-tekst {
  display: block;
  font-size: 0.9rem;
  color: var(--neutral-200);
  margin: 0;
}

/* ── Kalender (trin 2) ──────────────────────────────────── */
.booking__kalender-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}

.booking__kalender {
  background-color: var(--neutral-400);
  border-radius: var(--radius);
  padding: var(--space-16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  max-width: 400px;
}

.booking__kalender-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-16);
}

.booking__kalender-maaned {
  font-weight: 700;
  color: var(--neutral-100);
  text-transform: capitalize;
}

.booking__kalender-pil {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--blue-100);
  cursor: pointer;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius);
  line-height: 1;
  transition: background-color 0.2s;
}

.booking__kalender-pil:hover {
  background-color: var(--neutral-300);
}

.booking__kalender-dage-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--neutral-200);
  margin-bottom: var(--space-8);
}

.booking__kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.booking__kalender-celle {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  cursor: default;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking__kalender-celle--tilgaengelig {
  cursor: pointer;
  color: var(--neutral-100);
}

.booking__kalender-celle--tilgaengelig:hover {
  background-color: var(--blue-300);
}

.booking__kalender-celle--deaktiveret {
  color: var(--neutral-200);
  opacity: 0.4;
}

.booking__kalender-celle--idag {
  background-color: var(--system-red);
  color: var(--neutral-400);
  font-weight: 700;
}

.booking__kalender-celle--weekend {
  color: var(--neutral-200);
  font-style: italic;
}

.booking__kalender-celle--valgt {
  background-color: var(--blue-100) !important;
  color: var(--neutral-400) !important;
  font-weight: 700;
}

/* ── Tidslots ───────────────────────────────────────────── */
.booking__tidslots {
  flex: 1;
}

.booking__tidslots-overskrift {
  font-size: 1rem;
  font-weight: 700;
  color: var(--neutral-100);
  margin-bottom: var(--space-16);
}

.booking__tidslots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.booking__tidslot {
  padding: var(--space-16);
  border: none;
  border-radius: var(--radius);
  background-color: var(--system-green);
  color: var(--neutral-400);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s;
}

.booking__tidslot:hover {
  background-color: var(--blue-100);
  filter: none;
}

.booking__tidslot--valgt {
  background-color: var(--blue-200);
  color: var(--neutral-400);
}

.booking__valgt-tid-tekst {
  font-weight: 700;
  color: var(--neutral-100);
  margin-bottom: var(--space-16);
  min-height: 1.5em;
}

@media (min-width: 1095px) {
  .booking__kalender-wrapper {
    flex-direction: row;
    align-items: flex-start;
  }

  .booking__kalender {
    flex-shrink: 0;
  }
}

/* ── Formular (trin 3) ──────────────────────────────────── */
.booking__formular {
  max-width: 560px;
}

.booking__felt-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-16);
}

fieldset.booking__felt-gruppe {
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  min-width: 0;
}

.booking__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  cursor: pointer;
  line-height: 1.5;
}

.booking__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--neutral-100);
}

.booking__input {
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  color: var(--neutral-100);
  background-color: var(--neutral-400);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.booking__input:focus {
  outline: none;
  border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(48, 177, 217, 0.2);
}

.booking__input--tekstomraade {
  resize: vertical;
  min-height: 100px;
}

/* ── Checkbox ───────────────────────────────────────────── */
.booking__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--neutral-200);
  border-radius: 6px;
  background-color: var(--neutral-400);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s, border-color 0.2s;
  position: relative;
}

.booking__checkbox:checked {
  background-color: var(--neutral-100);
  border-color: var(--neutral-100);
}

.booking__checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 10px;
  height: 14px;
  border: 2.5px solid var(--neutral-400);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.booking__checkbox:focus-visible {
  outline: 2px solid var(--blue-200);
  outline-offset: 2px;
}

/* ── Navigering ─────────────────────────────────────────── */
.booking__navigering {
  display: flex;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

/* ── Bekræftelse ────────────────────────────────────────── */
.booking__bekraeftelse {
  text-align: center;
  padding: var(--space-48) var(--space-16);
  max-width: 520px;
  margin: 0 auto;
}

.booking__bekraeftelse-ikon {
  width: 64px;
  height: 64px;
  color: var(--blue-200);
  margin-bottom: var(--space-24);
}

.booking__bekraeftelse h2 {
  margin-bottom: var(--space-16);
}

.booking__bekraeftelse p {
  margin-bottom: var(--space-16);
  color: var(--neutral-200);
}

.booking__bekraeftelse .knap {
  margin-top: var(--space-16);
}

/* ── Tablet (768px) ─────────────────────────────────────── */
@media (min-width: 768px) {
  .booking__behandlinger {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .booking__behandling-kort {
    flex: 1 1 calc(50% - var(--space-16));
  }

  .booking__kalender {
    max-width: 480px;
  }
}

/* =========================================================
   BROEDKRUMME (Breadcrumb navigation)
   ========================================================= */

.broedkrumme {
  background-color: var(--blue-300);
  padding: var(--space-8) var(--page-gutter);
}

.broedkrumme__indhold {
  max-width: 1200px;
  margin: 0 auto;
}

.broedkrumme__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.broedkrumme__punkt {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--neutral-200);
}

.broedkrumme__punkt + .broedkrumme__punkt::before {
  content: '/';
  margin: 0 var(--space-8);
  color: var(--neutral-200);
}

.broedkrumme__link {
  color: var(--blue-100);
  text-decoration: none;
  transition: text-decoration 0.2s;
}

.broedkrumme__link:hover {
  text-decoration: underline;
}

.broedkrumme__punkt--aktiv {
  color: var(--neutral-100);
  font-weight: 600;
}

/* =========================================================
   SIDEFOD (Footer)
   ========================================================= */

.sidefod {
  background-color: var(--blue-300);
  padding: var(--space-56) var(--page-gutter) var(--space-56);
}

.sidefod__indhold {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.sidefod__logo-wrapper {
  display: inline-block;
  order: 1;
}

.sidefod__logo {
  height: 44px;
  width: auto;
}

/* ── Mobil: kolonne 1 udpakkes så logo og ikoner kan genordnes ── */

.sidefod__kolonne--om {
  display: contents;
}

.sidefod__beskrivelse {
  display: none;
}

.sidefod__kolonne--om > .sidefod__cvr {
  display: none;
}

/* ── Kolonne-grid ──────────────────────────────────────── */

.sidefod__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.sidefod__grid > :nth-child(3) { order: 2; }  /* Kontakt */
.sidefod__grid > :nth-child(2) { order: 3; }  /* Åbningstider */
.sidefod__grid > :nth-child(4) { order: 4; }  /* Praktisk */

.sidefod__overskrift {
  font-size: 1rem;
  font-weight: 700;
  color: var(--neutral-100);
  margin: 0 0 var(--space-8);
}

.sidefod__kolonne p {
  font-size: 0.95rem;
  color: var(--neutral-100);
  line-height: 1.65;
  margin: 0 0 var(--space-4);
}

.sidefod__adresse {
  font-style: normal;
}

.sidefod__adresse p {
  font-size: 0.95rem;
  color: var(--neutral-100);
  line-height: 1.65;
  margin: 0 0 var(--space-4);
}

/* ── Links ─────────────────────────────────────────────── */

.sidefod__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.sidefod__link {
  color: var(--blue-100);
  text-decoration: none;
  font-size: 0.95rem;
  transition: text-decoration 0.2s;
}

.sidefod__link:hover {
  text-decoration: underline;
}

/* ── Holdtræning split-sektioner ──────────────────────── */
.hold-split__indhold {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.hold-split__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.hold-split__tekst p,
.hold-split__tekst ul {
  margin: 0;
}

.behandlinger-hero--tilerhverv ~ .hold-split .tilerhverv__tilbud-overskrift,
.behandlinger-hero--tilerhverv ~ .sektion .tilerhverv__samarbejde-overskrift,
.behandlinger-hero--tilerhverv ~ .sektion .tilerhverv__sundhed-overskrift {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

.tilerhverv__samarbejde-sektion .sektion__indhold {
  padding-top: var(--space-32);
}

.hold-split__billede {
  width: 100%;
  max-width: 300px;
  border-radius: var(--radius);
  object-fit: cover;
}

.behandlinger-hero--holdtraening ~ .hold-split .hold-split__billede {
  margin-top: var(--space-40);
}

.behandlinger-hero--priser ~ .hold-split .hold-split__billede {
  margin-top: var(--space-40);
}

.behandlinger-hero--tilforaeldre ~ .hold-split .hold-split__billede {
  margin-top: var(--space-40);
}

.behandlinger-hero--tilerhverv ~ .hold-split .hold-split__billede {
  margin-top: var(--space-40);
}

.behandlinger-hero--tilforaeldre ~ .hold-split .hold-split__tekst {
  margin-top: var(--space-32);
}

.behandlinger-hero--holdtraening ~ .sektion:last-of-type .sektion__indhold {
  margin-top: var(--space-40);
}

.behandlinger-hero--priser ~ .sektion:last-of-type .sektion__indhold {
  margin-top: var(--space-40);
}

.behandlinger-hero--tilforaeldre ~ .sektion:last-of-type .sektion__indhold {
  margin-top: var(--space-40);
}

.hold-split--lys {
  background-color: var(--neutral-300);
}

@media (min-width: 1095px) {
  .hold-split__indhold {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .hold-split--omvendt .hold-split__indhold {
    flex-direction: row-reverse;
  }

  .hold-split__tekst {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hold-split__billede-wrapper {
    flex: 0 0 40%;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hold-split__billede {
    height: 100%;
    min-height: 280px;
    width: 100%;
    max-width: none;
    object-fit: cover;
  }

  .hold-split + .hold-split .hold-split__billede-wrapper {
    flex: 0 0 36%;
    max-width: none;
  }

  .hold-split + .hold-split .hold-split__billede {
    min-height: 240px;
  }
}

/* ── Mød fysioterapeuten (om klinikken-side) ──────────── */
.moed-fysioterapeut__indhold {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.moed-fysioterapeut__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.moed-fysioterapeut__tekst p {
  margin: 0;
}

.moed-fysioterapeut__billede {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  margin-top: var(--space-40);
}

@media (min-width: 1095px) {
  .moed-fysioterapeut__indhold {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .moed-fysioterapeut__tekst {
    flex: 1;
  }

  .moed-fysioterapeut__billede-wrapper {
    flex: 0 0 36%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .moed-fysioterapeut__billede {
    height: 100%;
    min-height: 240px;
    width: 92%;
    object-fit: cover;
  }
}

/* ── Om klinikken-info sektion ────────────────────────── */
.klinik-info__indhold {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.klinik-info__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-align: left;
  align-items: flex-start;
}

.klinik-info__tekst p {
  margin: 0;
}

.klinik-info__billede {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  margin-top: var(--space-40);
}

@media (min-width: 1095px) {
  .klinik-info__indhold {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .klinik-info__billede-wrapper {
    flex: 0 0 45%;
  }

  .klinik-info__tekst {
    flex: 1;
  }
}

/* ── Samarbejdsaftaler – logo-grid ────────────────────── */
.samarbejde__indhold {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin-top: var(--space-40);
}

.samarbejde__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.samarbejde__tekst p {
  margin: 0;
}

.samarbejde__tekst .knap {
  align-self: flex-start;
  margin-top: var(--space-8);
}

.samarbejde__logoer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  align-items: center;
  justify-items: center;
}

.samarbejde__logo {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

@media (min-width: 1095px) {
  .samarbejde__indhold {
    flex-direction: row;
    align-items: center;
    gap: var(--space-64);
  }

  .samarbejde__tekst {
    flex: 1;
  }

  .samarbejde__logoer {
    flex: 0 0 320px;
    gap: var(--space-32) var(--space-24);
  }
}

/* ── Kontaktside split-layout ──────────────────────────── */

.kontakt-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
}

.kontakt-split__venstre,
.kontakt-split__hoejre {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

@media (min-width: 1095px) {
  .kontakt-split {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-64);
  }

  .kontakt-split__venstre {
    flex: 0 0 44%;
  }

  .kontakt-split__hoejre {
    flex: 1;
  }
}

/* ── Bund-sektion ──────────────────────────────────────── */

.sidefod__bund {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-top: var(--space-24);
}

.sidefod__bund-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sidefod__firmanavn {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--neutral-100);
  margin: 0;
}

.sidefod__beskrivelse {
  font-size: 0.875rem;
  color: var(--neutral-100);
  line-height: 1.6;
  margin: var(--space-16) 0 0;
}

.sidefod__cvr {
  font-size: 0.875rem;
  color: var(--neutral-100);
  margin: var(--space-4) 0 var(--space-16);
}

.sidefod__ikoner-raekke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  order: 5;
}

.sidefod__ikoner-raekke > .sidefod__sociale {
  order: 2;
}

/* ── Trustpilot ────────────────────────────────────────── */

.sidefod__trustpilot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
  color: inherit;
}

.sidefod__trustpilot:hover .sidefod__rating-tekst {
  text-decoration: underline;
}

.sidefod__trustpilot-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidefod__trustpilot-url {
  font-size: 0.8rem;
  color: var(--neutral-100);
  text-decoration: underline;
}

.sidefod__trustpilot-rating {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.sidefod__stjerner {
  display: flex;
  gap: 3px;
}

.sidefod__stjerne {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.sidefod__rating-tekst {
  font-size: 0.9rem;
  color: var(--neutral-100);
}

/* ── Sociale ikoner ────────────────────────────────────── */

.sidefod__sociale {
  display: flex;
  gap: var(--space-16);
}

.sidefod__sociale-knap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: var(--blue-100);
  color: var(--neutral-400);
  text-decoration: none;
  flex-shrink: 0;
}

.sidefod__sociale-knap svg {
  width: 24px;
  height: 24px;
}

/* ── Tablet (768px) ────────────────────────────────────── */

@media (min-width: 768px) {
  .sidefod__kolonne--om {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .sidefod__logo-wrapper {
    order: 0;
  }

  .sidefod__beskrivelse {
    display: block;
    margin: 0;
  }

  .sidefod__kolonne--om > .sidefod__cvr {
    display: block;
    margin: 0;
  }

  .sidefod__grid > :nth-child(2),
  .sidefod__grid > :nth-child(3),
  .sidefod__grid > :nth-child(4) {
    order: 0;
  }

  .sidefod__ikoner-raekke {
    order: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .sidefod__ikoner-raekke > .sidefod__sociale {
    order: 0;
  }

  /* Skjul CVR i Kontakt-kolonne på tablet og op */
  .sidefod__grid > :nth-child(3) > .sidefod__cvr {
    display: none;
  }

  .sidefod__grid {
    flex-direction: row;
    gap: var(--space-48);
    align-items: flex-start;
  }

  .sidefod__kolonne {
    flex: 1;
  }

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

/* ── Desktop (1095px) ──────────────────────────────────── */

@media (min-width: 1095px) {
  .sidefod {
    padding-top: var(--space-24);
  }

  .sidefod__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-48);
    align-items: start;
  }

  .sidefod__kolonne {
    flex: unset;
  }
}

/* ── Kontakt modal ─────────────────────────────────────────── */
.kontakt-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: var(--space-16);
}

.kontakt-modal--skjult {
  display: none;
}

.kontakt-modal__kort {
  background: var(--neutral-400);
  border-radius: var(--radius);
  padding: var(--space-24);
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.kontakt-modal__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-24);
}

.kontakt-modal__logo {
  height: 32px;
}

.kontakt-modal__luk {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--neutral-100);
  padding: var(--space-4);
  line-height: 1;
}

.kontakt-modal__luk:hover {
  color: var(--blue-100);
}

.kontakt-modal__titel {
  margin-bottom: var(--space-16);
}

.kontakt-modal__ikon {
  display: block;
  width: 64px;
  height: 64px;
  margin: var(--space-24) auto 0;
  stroke: var(--system-green);
  stroke-width: 3;
}

/* =========================================================
   SCROLL TIL TOPPEN
   ========================================================= */

.scroll-top {
  position: fixed;
  bottom: var(--space-24);
  right: var(--space-24);
  width: 48px;
  height: 48px;
  background-color: var(--orange-100);
  color: var(--neutral-100);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, filter 0.2s ease;
  z-index: 900;
}

.scroll-top--synlig {
  opacity: 1;
  visibility: visible;
}

.scroll-top:hover {
  filter: brightness(1.08);
}