/* ==========================================================================
   Designets CSS
   Krukkenborg Beauty-designsystemet, september 2026.

   Temaets skabeloner sætter klassen .kbx på <body> (kbx_use_view() i
   inc/design.php). Alt herunder er afgrænset til .kbx eller til kb-klasser.

   Farver, afstande og radier har samme navne som i designsystemets
   tokens.json. Ret en værdi ét sted her, så følger hele sitet med.
   ========================================================================== */

/* Skrifttyperne ligger på sitet selv, så besøgende ikke sendes til Google.
   Newsreader er skåret ned til vægt 300–600 og optisk størrelse 18–72, som
   er det, overskrifterne bruger (punkt 40). Skal de have en vægt uden for
   det, så skift tilbage til Newsreader-Variable.woff2 og 200 800, også i
   preload-linket i kbx_head() i inc/design.php. */
@font-face {
  font-family: "Newsreader";
  src: url("/wp-content/uploads/krukkenborg-design/fonts/Newsreader-Variable-trimmed.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("/wp-content/uploads/krukkenborg-design/fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

.kbx {
  /* Flader */
  --canvas: #f7f1e8;          /* Standardbaggrund på alle sider */
  --surface-raised: #fefaef;  /* Kort og rolige paneler */
  --surface-white: #ffffff;   /* Kun inputfelter */
  --sand: #f4e8d7;            /* Varm sekundær flade */
  --dusk: #d3d1ce;            /* Sektionsbånd */
  --stone: #cec1b2;           /* Bag fotos, og hvor et foto mangler */
  --daylight: #fdf0c7;        /* Sektionsbånd */
  --peach: #fdc6b3;           /* Sektionsbånd */
  --espresso: #2e2521;        /* Mørke bånd */
  --onyx: #222428;            /* Primære knapper */

  /* Tekst og linjer */
  --ink: #2e2521;             /* Overskrifter og primær tekst */
  --ink-soft: #4a4741;        /* Brødtekst */
  --ink-faint: #838280;       /* Kun placeholdere og stor tekst */
  --ink-mute: #a8a5a0;        /* Kun inaktive faner */
  --logo-black: #000000;      /* Kun logoet */
  --on-dark: #fcf6ec;         /* Tekst på espresso og onyx */
  --line: #ececec;
  --line-strong: #d3ccc3;     /* Skillelinjer og kortkanter */
  --line-on-dark: #fcf6ec1a;
  --sage: #5b6550;            /* Eneste accent: små detaljer, aldrig tekst */

  /* Skrift */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Afstande, 8 px-grundenhed */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-128: 128px;

  /* Radier */
  --radius-sm: 4px;
  --radius-card: 8px;
  --radius-input: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Layout */
  --kb-max: 1280px;
  --kb-gutter: var(--space-24);
  --kb-section: var(--space-64);
}

@media (max-width: 399px) {
  .kbx {
    --kb-gutter: var(--space-16);
  }
}

@media (min-width: 768px) {
  .kbx {
    --kb-gutter: var(--space-40);
    --kb-section: var(--space-80);
  }
}

/* --------------------------------------------------------------------------
   Grundlag
   -------------------------------------------------------------------------- */

body.kbx {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

.kbx :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, address) {
  margin: 0;
}

.kbx :where(address) {
  font-style: normal;
}

.kbx :where(img, picture, svg, video, iframe) {
  display: block;
  max-width: 100%;
}

.kbx :where(img) {
  height: auto;
}

.kbx :where(a) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Serif kun fra 30 px: let vægt, negativ spatiering, aldrig kursiv. */
.kbx :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 30px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.kbx :where(p, li, dd) {
  text-wrap: pretty;
}

.kbx :where(strong, b) {
  font-weight: 600;
}

.kbx :where(em, i) {
  font-style: normal;
}

/* Tastaturfokus: massiv 2 px-kontur, aldrig en skygge. */
.kbx :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.kbx ::selection {
  background: var(--peach);
  color: var(--ink);
}

.kb-skip {
  position: absolute;
  z-index: 1000;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--space-16));
  left: var(--space-16);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--onyx);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-decoration: none;
  transform: translateY(-300%);
}

.kb-skip:focus {
  transform: none;
}

.kbx .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout og bånd
   -------------------------------------------------------------------------- */

.kb-container {
  width: 100%;
  max-width: var(--kb-max);
  margin-inline: auto;
  padding-inline: var(--kb-gutter);
}

.kb-section {
  padding-block: var(--kb-section);
}

/* To sektioner på samme cremefarvede flade deler afstanden mellem sig. */
.kb-plain + .kb-plain {
  padding-top: 0;
}

.kb-band--sand { background: var(--sand); }
.kb-band--stone { background: var(--stone); }
.kb-band--dusk { background: var(--dusk); }
.kb-band--daylight { background: var(--daylight); }
.kb-band--peach { background: var(--peach); }

.kb-dark {
  background: var(--espresso);
  color: var(--on-dark);
}

.kb-dark :where(h1, h2, h3, h4) {
  color: var(--on-dark);
}

.kb-dark :where(a:not(.kb-btn)) {
  color: var(--on-dark);
  text-decoration: underline;
}

.kbx .kb-dark :focus-visible {
  outline-color: var(--on-dark);
}

.kb-flow > * + * {
  margin-top: var(--space-16);
}

.kb-flow > :is(h1, h2, h3) + * {
  margin-top: var(--space-24);
}

.kb-flow > * + .kb-actions,
.kb-flow > * + .kb-details,
.kb-flow > * + .kb-hours {
  margin-top: var(--space-32);
}

.kb-sh {
  max-width: 760px;
  margin-bottom: var(--space-48);
}

.kb-cols {
  display: grid;
  gap: var(--space-40);
}

@media (min-width: 760px) {
  .kb-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-64);
  }
}

.kb-after {
  margin-top: var(--space-48);
}

/* --------------------------------------------------------------------------
   Typografi
   -------------------------------------------------------------------------- */

/* display-xl: én pr. side, i forsidens hero */
.kb-hero__title {
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6rem);
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: wrap;
}

/* Overskriften knækker efter "Skælskør,". */
.kb-hero__title span {
  display: block;
}

/* display: sidetitler og Kommer snart */
.kb-h1 {
  font-size: clamp(3rem, 1.9rem + 4.6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

/* heading-lg: sektionsoverskrifter */
.kb-h2 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

/* title: mindste serifstørrelse, titler på kort og i lister */
.kb-h3 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

/* heading-sm: underoverskrifter i sans */
.kb-subhead {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0;
}

.kb-dark .kb-subhead {
  color: var(--on-dark);
}

/* subheading: indledninger */
.kb-lead {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.5;
}

/* Afsnit, der kommer fra editoren (forsidens tekster). */
.kb-text > * {
  margin: 0;
}

.kb-text > * + * {
  margin-top: var(--space-16);
}

.kb-text a {
  text-decoration: underline;
}

.kb-note {
  margin-top: var(--space-32);
  font-size: 14px;
  letter-spacing: 0.025em;
}

/* --------------------------------------------------------------------------
   Knapper: altid piller
   -------------------------------------------------------------------------- */

.kb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}

.kb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.025em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kb-btn--sm {
  padding: 10px 20px;
  font-size: 14px;
}

.kb-btn--primary {
  background: var(--onyx);
  border-color: var(--onyx);
  color: var(--on-dark);
}

.kb-btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.kb-btn--secondary {
  background: transparent;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
}

.kb-btn--secondary:hover {
  background: var(--ink-soft);
  color: var(--on-dark);
}

.kb-btn--light {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
}

.kb-btn--light:hover {
  background: var(--sand);
  border-color: var(--sand);
}

.kb-btn--outline-light {
  background: transparent;
  border-color: var(--on-dark);
  color: var(--on-dark);
}

.kb-btn--outline-light:hover {
  background: var(--on-dark);
  color: var(--ink);
}

.kbx .kb-btn--light:focus-visible,
.kbx .kb-btn--outline-light:focus-visible {
  outline-color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   Header og menu
   -------------------------------------------------------------------------- */

.kb-header {
  background: var(--canvas);
}

.kb-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "logo action toggle"
    "menu menu menu";
  align-items: center;
  column-gap: var(--space-8);
  padding-block: var(--space-16);
}

.kb-nav__logo {
  grid-area: logo;
  justify-self: start;
  display: inline-flex;
}

/* Logoet må aldrig være smallere end 120 px (61 px høj giver 123 px). Det
   flugter foroven med menuen og må gerne række lidt længere ned. På smalle
   telefoner skalerer det med bredden, så der stadig er plads til knapperne. */
.kb-nav__logo {
  align-self: start;
}

.kb-nav__logo .kb-logo {
  width: auto;
  height: clamp(61px, 18.6vw, 73px);
}

.kb-nav__action {
  grid-area: action;
}

.kb-nav__toggle {
  grid-area: toggle;
}

.kb-nav__toggle-close {
  display: none;
}

.kb-nav__toggle[aria-expanded="true"] .kb-nav__toggle-open {
  display: none;
}

.kb-nav__toggle[aria-expanded="true"] .kb-nav__toggle-close {
  display: inline;
}

.kb-nav__menu {
  grid-area: menu;
  display: none;
}

.kb-nav__menu.is-open {
  display: block;
}

.kb-nav__menu ul {
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.kb-nav__menu li {
  border-bottom: 1px solid var(--line-strong);
}

.kb-nav__menu a {
  display: block;
  padding-block: var(--space-16);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
}

.kb-nav__menu .current-menu-item > a,
.kb-nav__menu a[aria-current="page"] {
  font-weight: 500;
}

/* Uden JavaScript kan menuen ikke foldes ud, så den står fremme. */
html:not(.js) .kbx .kb-nav__menu {
  display: block;
}

html:not(.js) .kbx .kb-nav__toggle {
  display: none;
}

/* På de allersmalleste telefoner er der ikke plads til både logo, "Book tid"
   og "Menu". Booking findes også i heroen og i footeren. */
@media (max-width: 345px) {
  .kb-nav__action {
    display: none;
  }
}

/* Under 960 px følger headeren med ned, så "Book tid" og Menu altid er inden
   for rækkevidde (punkt 32). Stregen under den kommer, når man har scrollet:
   klassen is-stuck sættes af temaets assets/js/main.js.
   scroll-padding holder links og tastaturfokus fri af headeren, og en åben
   menu kan scrolles, hvis den er højere end skærmen. */
@media (max-width: 959px) {
  html {
    scroll-padding-top: 120px;
  }

  .kb-header {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: box-shadow 0.2s ease;
  }

  .kb-header.is-stuck {
    box-shadow: 0 1px 0 var(--line-strong);
  }

  .kb-nav__menu.is-open {
    max-height: calc(100vh - 113px);
    max-height: calc(100svh - 113px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Over 600 px står WordPress' adminbjælke fast i toppen, når man er logget
   ind, så headeren lægger sig under den. */
@media (min-width: 601px) and (max-width: 959px) {
  html {
    scroll-padding-top: calc(120px + var(--wp-admin--admin-bar--height, 0px));
  }

  .kb-header {
    top: var(--wp-admin--admin-bar--height, 0px);
  }
}

@media (min-width: 960px) {
  .kb-nav {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "logo menu action";
    column-gap: var(--space-24);
  }

  .kb-nav__logo .kb-logo {
    height: 84px;
  }

  .kb-nav__toggle {
    display: none;
  }

  .kb-nav__menu,
  .kb-nav__menu.is-open {
    display: block;
  }

  .kb-nav__menu ul {
    display: flex;
    gap: var(--space-32);
    margin: 0;
    border: 0;
  }

  .kb-nav__menu li {
    border: 0;
  }

  .kb-nav__menu a {
    padding-block: var(--space-8);
    color: var(--ink-soft);
    font-size: 14px;
    letter-spacing: 0.025em;
    transition: color 0.2s ease;
  }

  .kb-nav__menu .current-menu-item > a,
  .kb-nav__menu a[aria-current="page"] {
    font-weight: 400;
  }

  .kb-nav__menu a:hover,
  .kb-nav__menu .current-menu-item > a,
  .kb-nav__menu a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }

  .kb-nav__action {
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   Forside: hero med krukke-billedet i en afrundet ramme og teksten i et
   massivt cremefarvet felt. Feltet sikrer kontrasten: teksten står aldrig
   direkte på billedet (ink på canvas er 13:1).
   -------------------------------------------------------------------------- */

.kb-hero {
  position: relative;
  padding-inline: var(--kb-gutter);
  padding-bottom: var(--space-48);
}

.kb-hero__frame {
  position: relative;
  height: 440px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--stone);
}

.kb-hero__bg {
  position: absolute;
  inset: 0;
}

.kb-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 88%;
}

.kb-hero__card {
  position: relative;
  margin: -72px var(--space-16) 0;
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--canvas);
}

.kb-hero__card .kb-hero__title {
  font-size: clamp(2.75rem, 1rem + 4.5vw, 4.5rem);
  letter-spacing: -0.035em;
}

.kb-hero__lead {
  margin-top: var(--space-24);
}

.kb-hero__card .kb-actions {
  margin-top: var(--space-32);
}

/* Telefoner: billedet er lavere, så overskriften og "Book tid" kan ses uden
   at scrolle (punkt 31). Højden følger skærmen, og de 440 px er plads til
   headeren og feltet til og med "Book tid". Det giver fx 220 px på en
   390 × 664-skærm og aldrig under 120 px. Overskriften er lidt mindre, så
   "Skønhedspleje" ikke knækker midt i ordet på 320 px. */
@media (max-width: 599px) {
  .kb-hero__frame {
    height: clamp(120px, 100vh - 440px - var(--wp-admin--admin-bar--height, 0px), 440px);
    height: clamp(120px, 100svh - 440px - var(--wp-admin--admin-bar--height, 0px), 440px);
  }

  .kb-hero__card {
    margin-top: -48px;
  }

  .kb-hero__card .kb-hero__title {
    font-size: clamp(2.25rem, 0.75rem + 8vw, 2.75rem);
  }
}

@media (min-aspect-ratio: 1/1) and (min-width: 761px) {
  .kb-hero {
    padding-bottom: var(--kb-gutter);
  }

  .kb-hero__frame {
    height: calc(100vh - 90px - var(--kb-gutter) - var(--wp-admin--admin-bar--height, 0px));
    height: calc(100svh - 90px - var(--kb-gutter) - var(--wp-admin--admin-bar--height, 0px));
    min-height: 620px;
  }

  .kb-hero__bg img {
    object-position: 50% 50%;
  }
}

/* Mellemstore liggende skærme: feltet ligger under billedet, ellers dækker
   det krukken. */
@media (min-aspect-ratio: 1/1) and (min-width: 761px) and (max-width: 1099px) {
  .kb-hero__frame {
    height: 60vh;
    min-height: 380px;
  }

  .kb-hero__card {
    max-width: 640px;
    margin-inline: var(--space-40);
    padding: var(--space-40);
  }
}

@media (min-aspect-ratio: 1/1) and (min-width: 1100px) {
  .kb-hero__card {
    position: absolute;
    bottom: calc(var(--kb-gutter) + var(--space-40));
    left: calc(var(--kb-gutter) + var(--space-40));
    max-width: 600px;
    margin: 0;
    padding: var(--space-48);
  }
}

/* Stående tablet: billedet bliver højere, feltet ligger stadig under. */
@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
  .kb-hero__frame {
    height: 60vh;
  }

  .kb-hero__card {
    max-width: 600px;
    margin-inline: var(--space-40);
    padding: var(--space-40);
  }
}


/* --------------------------------------------------------------------------
   Fotos, split og to kolonner
   -------------------------------------------------------------------------- */

.kb-photo {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--stone);
}

.kb-photo img {
  width: 100%;
  object-fit: cover;
}

.kb-photo--portrait img {
  aspect-ratio: 4 / 5;
}

.kb-photo--page img {
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .kb-photo--page img {
    aspect-ratio: 4 / 5;
  }
}

.kb-split {
  display: grid;
  gap: var(--space-40);
  align-items: center;
}

.kb-split > .kb-photo {
  max-width: 480px;
}

@media (min-width: 900px) {
  .kb-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-80);
  }

  .kb-split > .kb-photo {
    max-width: none;
  }
}

.kb-twocol {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 960px) {
  .kb-twocol {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-80);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Undersider: top
   -------------------------------------------------------------------------- */

.kb-pagehead {
  padding-block: var(--space-48) var(--kb-section);
}

@media (min-width: 768px) {
  .kb-pagehead {
    padding-top: var(--space-64);
  }
}

.kb-pagehead__grid {
  display: grid;
  gap: var(--space-40);
}

.kb-pagehead__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  max-width: 760px;
}

.kb-pagehead__text .kb-actions {
  margin-top: var(--space-8);
}

/* Kort note under knapperne, fx reserve-linket på Book tid. */
.kb-pagehead__text .kb-note {
  margin-top: 0;
}

@media (min-width: 900px) {
  .kb-pagehead__grid--media {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    /* Teksten står midt ud for billedet, så der ikke er et tomt felt over den. */
    align-items: center;
    gap: var(--space-80);
  }
}

/* --------------------------------------------------------------------------
   Behandlinger som liste
   -------------------------------------------------------------------------- */

.kb-menu {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 960px) {
  .kb-menu {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: var(--space-80);
  }
}

.kb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line-strong);
}

.kb-list__row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-16);
  border-top: 1px solid var(--line-strong);
  transition: background-color 0.2s ease;
}

.kb-list__row:hover {
  background: var(--surface-raised);
}

.kb-list__thumb {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  background: var(--stone);
}

.kb-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-list__name {
  font-size: 30px;
  line-height: 1.2;
}

.kb-list__name a {
  text-decoration: none;
}

/* Hele rækken er linket, men kun navnet læses op. */
.kb-list__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
}

.kbx .kb-list__name a:focus-visible {
  outline: none;
}

.kbx .kb-list__name a:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.kb-list__desc {
  max-width: 52ch;
  margin-top: var(--space-8);
}

.kb-list__go {
  display: none;
}

.kb-list__row:hover .kb-list__go {
  background: var(--ink-soft);
  color: var(--on-dark);
}

@media (min-width: 640px) {
  .kb-list__row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-24);
  }

  .kb-list__go {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Behandlinger som kort
   -------------------------------------------------------------------------- */

.kb-cards {
  display: grid;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .kb-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-40);
  }
}

.kb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  transition: border-color 0.2s ease;
}

.kb-card:hover {
  border-color: var(--ink-soft);
}

.kb-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--stone);
}

.kb-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
}

.kb-card__title {
  font-size: 30px;
  line-height: 1.2;
}

.kb-card__title a {
  text-decoration: none;
}

.kb-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kbx .kb-card__title a:focus-visible {
  outline: none;
}

.kbx .kb-card__title a:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: var(--radius-card);
}

.kb-card__actions {
  margin-top: auto;
  padding-top: var(--space-16);
}

.kb-card:hover .kb-btn--secondary {
  background: var(--ink-soft);
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   Tekstindhold fra WordPress-editoren
   -------------------------------------------------------------------------- */

.kb-prose {
  max-width: 680px;
}

.kb-prose > * + * {
  margin-top: var(--space-16);
}

.kb-prose > :first-child {
  margin-top: 0;
}

.kb-prose > p:first-child {
  color: var(--ink);
  font-size: 18px;
}

.kb-prose > h2 {
  margin-top: var(--space-48);
  font-size: 30px;
  line-height: 1.2;
}

.kb-prose > h3 {
  margin-top: var(--space-32);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0;
}

.kb-prose > :is(h2, h3) + * {
  margin-top: var(--space-16);
}

.kb-prose a {
  color: var(--ink);
  text-decoration: underline;
}

.kb-prose ul {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.kb-prose ul > li {
  position: relative;
  padding: 12px 0 12px var(--space-24);
  border-bottom: 1px solid var(--line-strong);
}

/* En kort streg i salvie: accentfarven bruges kun til små detaljer. */
.kb-prose ul > li::before {
  content: "";
  position: absolute;
  top: calc(12px + 0.75em);
  left: 0;
  width: 10px;
  height: 1.5px;
  background: var(--sage);
}

.kb-prose ol {
  padding-left: 1.25em;
}

.kb-prose ol > li + li {
  margin-top: var(--space-8);
}

.kb-article {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 960px) {
  .kb-article {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: start;
    gap: var(--space-80);
  }
}

.kb-panel {
  padding: var(--space-24);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.kb-panel > * + * {
  margin-top: var(--space-16);
}

.kb-panel > .kb-actions {
  margin-top: var(--space-24);
}

/* --------------------------------------------------------------------------
   Oplysninger, åbningstider og punkter
   -------------------------------------------------------------------------- */

.kb-details {
  border-top: 1px solid var(--line-strong);
}

.kb-details > div {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--line-strong);
}

@media (min-width: 600px) {
  .kb-details > div {
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-24);
  }
}

.kb-details dt {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.kb-details dd {
  color: var(--ink);
  font-size: 18px;
}

.kb-details a {
  text-decoration: underline;
}

.kb-hours {
  display: grid;
  gap: var(--space-4);
}

.kb-hours > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: 300px;
}

.kb-details .kb-hours dt,
.kb-details .kb-hours dd {
  font-size: inherit;
}

/* Dagene i åbningstiderne på Kontakt skal ligne tiderne, ikke etiketterne. */
.kb-details .kb-hours dt {
  color: var(--ink);
  font-weight: 400;
  letter-spacing: normal;
}

/* Lukkedage under åbningstiderne, fra snippet'en "Bookee-data". */
.kb-hours + .kb-closure {
  margin-top: var(--space-8);
}

.kb-closure {
  font-weight: 500;
}

.kb-closure + .kb-closure {
  margin-top: var(--space-4);
}

.kb-points {
  display: grid;
  gap: var(--space-40);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .kb-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-64);
  }
}

.kb-points li {
  padding-top: var(--space-24);
  border-top: 1px solid var(--ink);
}

.kb-points p {
  max-width: 44ch;
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   Mørkt bånd med opfordring
   -------------------------------------------------------------------------- */

.kb-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  text-align: center;
}

.kb-cta__inner > .kb-h2,
.kb-cta__inner > .kb-lead {
  max-width: 760px;
}

.kb-cta__inner > .kb-actions {
  justify-content: center;
  margin-top: var(--space-8);
}

.kb-cta__meta {
  margin-top: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid var(--line-on-dark);
  font-size: 14px;
  letter-spacing: 0.025em;
}

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */

.kb-contact {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 960px) {
  .kb-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-80);
  }
}

.kb-map {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--stone);
}

.kb-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
}

@media (min-width: 960px) {
  .kb-map iframe {
    height: 560px;
  }
}

/* --------------------------------------------------------------------------
   Kontaktformular (Fluent Forms) i designsystemets TextField- og Button-stil
   -------------------------------------------------------------------------- */

.kb-form-card {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-24);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

@media (min-width: 768px) {
  .kb-form-card {
    padding: var(--space-48);
  }
}

.kbx .kb-form .fluentform .ff-el-group {
  margin-bottom: var(--space-24);
}

.kbx .kb-form .fluentform .ff-el-input--label {
  margin-bottom: var(--space-8);
}

.kbx .kb-form .fluentform .ff-el-input--label label {
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

/* Ingen rød stjerne: designsystemet har ingen statusfarver. */
.kbx .kb-form .fluentform .ff-el-is-required.asterisk-right label::after {
  color: var(--ink-soft);
}

.kbx .kb-form .fluentform .ff-el-form-control {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-input);
  background: var(--surface-white);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

.kbx .kb-form .fluentform .ff-el-form-control:focus {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: none;
}

.kbx .kb-form .fluentform .ff-el-form-check-label {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.kbx .kb-form .fluentform input[type="checkbox"] {
  accent-color: var(--ink);
}

.kbx .kb-form .fluentform .ff-el-is-error .ff-el-form-control {
  border-color: var(--ink);
  border-width: 2px;
}

.kbx .kb-form .fluentform .error,
.kbx .kb-form .fluentform .text-danger {
  margin-top: var(--space-8);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.kbx .kb-form .fluentform .ff-btn-submit,
.kbx .kb-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
  padding: 14px 28px;
  border: 1px solid var(--onyx);
  border-radius: var(--radius-pill);
  background-color: var(--onyx);
  box-shadow: none;
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.025em;
  opacity: 1;
  transition: background-color 0.2s ease;
}

.kbx .kb-form .fluentform .ff-btn-submit:hover {
  background-color: var(--ink);
  opacity: 1;
}

.kbx .kb-form .fluentform .ff-btn-submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.kbx .kb-form .ff-message-success {
  padding: var(--space-24);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--canvas);
  box-shadow: none;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Anmeldelser og indlæg
   -------------------------------------------------------------------------- */

.kb-quotes {
  display: grid;
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .kb-quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .kb-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kb-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  height: 100%;
  padding: var(--space-24);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.kb-quote blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}

.kb-quote figcaption {
  font-size: 14px;
  letter-spacing: 0.025em;
}

.kb-quote__name {
  display: block;
  color: var(--ink);
  font-weight: 500;
}

.kb-posts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.kb-posts > li {
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--line-strong);
}

.kb-posts h2 a {
  text-decoration: none;
}

.kb-posts h2 a:hover {
  text-decoration: underline;
}

.kb-posts p {
  max-width: 680px;
  margin-top: var(--space-8);
}

.kbx .navigation.pagination {
  margin-top: var(--space-48);
}

.kbx .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.kbx .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius-pill);
  font-size: 14px;
  text-decoration: none;
}

.kbx .page-numbers.current {
  background: var(--onyx);
  border-color: var(--onyx);
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.kb-footer {
  padding-block: var(--space-80) var(--space-40);
  border-top: 1px solid var(--line-strong);
  background: var(--canvas);
  font-size: 14px;
  letter-spacing: 0.025em;
}

.kb-footer__cols {
  display: grid;
  gap: var(--space-40);
}

@media (min-width: 640px) {
  .kb-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kb-footer__cols {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-64);
  }
}

.kb-footer__brand .kb-logo {
  width: 180px;
  height: auto;
}

.kb-footer__brand p {
  max-width: 32ch;
  margin-top: var(--space-24);
}

.kb-footer__brand .kb-btn {
  margin-top: var(--space-24);
}

.kb-footer__title {
  margin-bottom: var(--space-16);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

.kb-footer ul {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mindst 24 px høje, så de er lette at ramme (WCAG 2.5.8). */
.kb-footer a:not(.kb-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ink-soft);
  text-decoration: none;
}

.kb-footer a:not(.kb-btn):hover {
  color: var(--ink);
  text-decoration: underline;
}

.kb-footer__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-64);
  padding-top: var(--space-24);
  border-top: 1px solid var(--line-strong);
  font-size: 12px;
  align-items: center;
}

.kb-footer__legal,
.kb-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-24);
}

/* --------------------------------------------------------------------------
   Kommer snart
   -------------------------------------------------------------------------- */

.kb-cs {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-16);
}

.kb-cs__media {
  display: block;
  flex: 0 0 38svh;
  order: -1;
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--stone);
}

.kb-cs__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 92%;
}

.kb-cs__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-40);
  padding: var(--space-8) var(--space-8) var(--space-16);
}

.kb-cs__panel .kb-logo {
  width: 150px;
  height: auto;
}

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

.kb-cs__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
  font-size: 14px;
  letter-spacing: 0.025em;
}

.kb-cs__meta a {
  color: var(--ink);
  text-decoration: underline;
}

@media (min-width: 900px) {
  .kb-cs {
    flex-direction: row;
    gap: var(--space-40);
    padding: var(--space-40);
  }

  .kb-cs__media {
    flex: 1.15 1 0;
    order: 0;
    min-height: 0;
  }

  .kb-cs__media img {
    object-position: 62% 50%;
  }

  .kb-cs__panel {
    flex: 1 1 0;
    justify-content: space-between;
    max-width: 560px;
    padding: var(--space-24) var(--space-24) var(--space-8);
  }

  .kb-cs__panel .kb-logo {
    width: 190px;
  }
}

/* --------------------------------------------------------------------------
   Behandlingssider (okt. 2026): foto med tekstfelt, spørgsmål og svar,
   og to felter til booking og kontakt nederst.
   -------------------------------------------------------------------------- */

.kb-treat-hero {
  padding-bottom: var(--kb-section);
}

.kb-treat-hero__frame {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--stone);
}

.kb-treat-hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Motivet står i højre side, så tekstfeltet kan stå til venstre. */
  object-position: 80% 50%;
}

.kb-treat-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin: -72px var(--space-16) 0;
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-card);
  background: var(--canvas);
}

@media (min-width: 600px) {
  .kb-treat-hero__frame {
    height: clamp(300px, 45vw, 480px);
  }

  .kb-treat-hero__card {
    max-width: 640px;
    margin-inline: var(--space-40);
  }
}

/* Tekstfeltet lægges først oven på billedet, når der er plads til motivet ved siden af. */
@media (min-width: 1200px) {
  .kb-treat-hero__inner {
    display: grid;
  }

  .kb-treat-hero__frame,
  .kb-treat-hero__card {
    grid-area: 1 / 1;
  }

  .kb-treat-hero__frame {
    height: auto;
    min-height: 560px;
  }

  .kb-treat-hero__card {
    align-self: end;
    justify-self: start;
    max-width: 580px;
    margin: var(--space-40);
    padding: var(--space-48);
  }
}

/* Det lyserøde bånd: kategoriens intro. Overskriften og stregen står i midten,
   teksten venstrestillet i en læsebred kolonne midt på siden. */
.kb-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.kb-statement__title {
  max-width: 900px;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.kb-statement__rule {
  width: 40px;
  height: 1.5px;
  margin-block: var(--space-40);
  background: var(--sage);
}

.kb-statement__text {
  width: 100%;
  max-width: 640px;
  text-align: left;
  overflow-wrap: break-word;
}

.kb-statement__text > h3.kb-statement__subhead {
  margin-top: var(--space-32);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0;
}

.kb-statement__text > :first-child,
.kb-statement__text a {
  color: var(--ink);
}

/* Prislisten, "Det kan du booke": kategoriens behandlinger fra Bookee og én Book tid. */
.kb-bookable__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-48);
}

.kb-bookable {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}

.kb-bookable__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-24);
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--line-strong);
}

.kb-bookable__name {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}

.kb-bookable__price {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.kb-bookable__desc {
  max-width: 60ch;
  margin: 0;
}

/* "Se mere" er et diskret link, så listen er rolig at læse. Det står under
   beskrivelsen, også på computer, hvor prisen har sin egen kolonne. */
.kb-bookable__more {
  grid-column: 1;
  justify-self: start;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

/* "Se mere"-vinduet: browserens indbyggede pop-op (popover), som lukker med
   X, et tryk udenfor og Esc. Midt på skærmen på computer og glider op nedefra
   på mobil. */
.kb-sheet {
  width: min(560px, 100% - 2 * var(--kb-gutter));
  max-height: min(85dvh, 720px);
  margin: auto;
  padding: var(--space-32);
  overflow-y: auto;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(var(--space-16));
  transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}

.kb-sheet:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  opacity: 1;
  transform: none;
}

@starting-style {
  .kb-sheet:popover-open {
    opacity: 0;
    transform: translateY(var(--space-16));
  }
}

/* Espresso. ::backdrop arver ikke designets variabler i alle browsere. */
.kb-sheet::backdrop {
  background: rgb(46 37 33 / 0.45);
}

.kb-sheet__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-16);
}

.kb-sheet__title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.kb-sheet__close {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}

.kb-sheet__close::before,
.kb-sheet__close::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.75px);
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  transform: rotate(45deg);
}

.kb-sheet__close::after {
  transform: rotate(-45deg);
}

.kb-sheet__price {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.kb-sheet__book {
  align-self: start;
  margin-top: var(--space-8);
}

@media (max-width: 639px) {
  .kb-sheet {
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    margin: auto 0 0;
    padding-bottom: calc(var(--space-32) + env(safe-area-inset-bottom));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }

  @starting-style {
    .kb-sheet:popover-open {
      transform: translateY(100%);
    }
  }

  .kb-sheet__book {
    align-self: stretch;
  }
}

@media (min-width: 640px) {
  .kb-bookable__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .kb-bookable__price {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    white-space: nowrap;
  }
}

.kb-faq-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 760px;
  margin-bottom: var(--space-48);
}

.kb-faq {
  border-top: 1px solid var(--line-strong);
}

.kb-faq__item {
  border-bottom: 1px solid var(--line-strong);
}

.kb-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: 22px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.kb-faq__q::-webkit-details-marker {
  display: none;
}

.kb-faq__q:hover > span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Plus, der bliver til minus, når svaret er åbent. */
.kb-faq__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.kb-faq__icon::before,
.kb-faq__icon::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.75px);
  left: 3px;
  width: 14px;
  height: 1.5px;
  background: var(--ink-soft);
}

.kb-faq__icon::after {
  transform: rotate(90deg);
}

.kb-faq__item[open] .kb-faq__icon::after {
  display: none;
}

.kb-faq__a {
  max-width: 640px;
  padding-bottom: var(--space-24);
}

@media (min-width: 768px) {
  .kb-faq__a {
    padding-right: var(--space-48);
  }
}

.kb-faq__a ul {
  padding: 0;
  list-style: none;
}

.kb-faq__a ul > li {
  position: relative;
  padding-left: var(--space-24);
}

.kb-faq__a ul > li + li {
  margin-top: var(--space-4);
}

.kb-faq__a ul > li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 10px;
  height: 1.5px;
  background: var(--sage);
}

.kb-faq__a ol {
  padding-left: 1.25em;
}

.kb-next {
  display: grid;
  gap: var(--space-24);
}

@media (min-width: 900px) {
  .kb-next {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.kb-next__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-card);
}

@media (min-width: 768px) {
  .kb-next__card {
    padding: var(--space-40);
  }
}

.kb-next__card--raised {
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
}

.kb-next__text {
  max-width: 440px;
}

.kb-next__card > .kb-actions {
  margin-top: auto;
  padding-top: var(--space-16);
}

/* --------------------------------------------------------------------------
   Undermenu i hovedmenuen (okt. 2026). "Behandlinger" er en knap, der
   folder behandlingerne ud ved klik. På mobil står menuen i højre side
   under Menu-knappen.
   -------------------------------------------------------------------------- */

.kb-nav__parent {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

/* Tynd pil, der vender opad, når undermenuen er åben. */
.kb-nav__chevron {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.kb-nav__menu .is-open > .kb-nav__parent .kb-nav__chevron {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.kb-nav__menu .sub-menu {
  display: none;
}

.kb-nav__menu .is-open > .sub-menu,
html:not(.js) .kbx .kb-nav__menu .sub-menu {
  display: block;
}

html:not(.js) .kbx .kb-nav__chevron {
  display: none;
}

@media (max-width: 959px) {
  .kb-nav__menu {
    text-align: right;
  }

  .kb-nav__parent {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-block: var(--space-16);
    color: var(--ink);
    font-size: 16px;
  }

  .kb-nav__menu .current-menu-ancestor > .kb-nav__parent {
    font-weight: 500;
  }

  .kb-nav__menu .sub-menu {
    margin: 0;
    padding: 0 0 var(--space-8);
    border-top: 0;
  }

  .kb-nav__menu .sub-menu li {
    border-bottom: 0;
  }

  /* Underpunkterne flugter med teksten "Behandlinger", ikke med pilen. */
  .kb-nav__menu .sub-menu a {
    padding: 10px 15px 10px 0;
    color: var(--ink-soft);
  }
}

@media (min-width: 960px) {
  .kb-nav__menu .menu-item-has-children {
    position: relative;
  }

  .kb-nav__parent {
    padding-block: var(--space-8);
    color: var(--ink-soft);
    font-size: 14px;
    letter-spacing: 0.025em;
    transition: color 0.2s;
  }

  .kb-nav__parent:hover,
  .kb-nav__menu .is-open > .kb-nav__parent,
  .kb-nav__menu .current-menu-ancestor > .kb-nav__parent {
    color: var(--ink);
  }

  .kb-nav__menu .current-menu-ancestor > .kb-nav__parent {
    text-decoration: underline 1px;
    text-underline-offset: 6px;
  }

  .kb-nav__menu .sub-menu {
    position: absolute;
    top: calc(100% + var(--space-8));
    left: calc(-1 * var(--space-24));
    z-index: 50;
    min-width: 240px;
    padding: var(--space-8) 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
  }

  .kb-nav__menu .sub-menu a {
    display: block;
    padding: 10px var(--space-24);
    white-space: nowrap;
  }

  /* Uden JavaScript vises undermenuen, når musen eller fokus er på punktet. */
  html:not(.js) .kbx .kb-nav__menu .menu-item-has-children:not(:hover):not(:focus-within) > .sub-menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Kontaktsiden (okt. 2026): ingen banner, formularen øverst, og
   kontaktoplysninger og kort ved siden af.
   -------------------------------------------------------------------------- */

.kb-contact-page {
  padding-top: var(--space-48);
}

@media (min-width: 768px) {
  .kb-contact-page {
    padding-top: var(--space-64);
  }
}

.kb-contact-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 760px;
  margin-bottom: var(--space-48);
}

.kb-contact-page__grid {
  display: grid;
  gap: var(--space-48);
}

.kb-contact-page__grid .kb-form-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (min-width: 960px) {
  .kb-contact-page__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--space-64);
  }
}

.kb-contact-page__info > * + * {
  margin-top: var(--space-24);
}

.kb-contact-page__info .kb-map iframe {
  height: 320px;
}

/* Pladsholderen er lige så høj som kortet, så siden ikke hopper, når det vises. */
.kb-map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  min-height: 320px;
  padding: var(--space-32) var(--space-24);
  color: var(--ink);
  text-align: center;
}

.kb-map__placeholder p {
  max-width: 34ch;
}

.kb-map__placeholder a {
  color: var(--ink);
  text-decoration: underline;
}

/* Kolonnen er smal på desktop, så etiket og værdi står under hinanden. */
@media (min-width: 960px) {
  .kb-contact-page__info .kb-details > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Om mig (okt. 2026): intro, baggrund og fakta står samlet ved siden af
   portrættet, så der ikke er tomme felter og ekstra spring på desktop.
   -------------------------------------------------------------------------- */

.kb-about {
  padding-top: var(--space-48);
}

.kb-about__grid {
  display: grid;
  grid-template-areas: "head" "photo" "body" "facts";
  gap: var(--space-40);
}

.kb-about__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.kb-about__side {
  grid-area: photo;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.kb-about__side > .kb-photo {
  max-width: 480px;
}

.kb-about__body {
  grid-area: body;
  max-width: 680px;
}

.kb-about__body > * + * {
  margin-top: var(--space-16);
}

.kb-about__body > h2 {
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .kb-about {
    padding-top: var(--space-64);
  }
}

@media (min-width: 900px) {
  .kb-about__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "head photo" "body photo" "facts facts";
    column-gap: var(--space-80);
    row-gap: var(--space-48);
  }

  .kb-about__side {
    align-self: start;
  }

  .kb-about__side > .kb-photo {
    max-width: none;
  }
}

.kb-about__facts {
  grid-area: facts;
}

/* På desktop står fakta på én linje under tekst og portræt. */
@media (min-width: 900px) {
  .kb-about__facts {
    display: grid;
    /* Alle punkter på én linje, uanset hvor mange der står på siden. */
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    border-bottom: 1px solid var(--line-strong);
  }

  .kb-about__facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding-inline: var(--space-24);
    border-bottom: 0;
  }

  .kb-about__facts > div:first-child {
    padding-left: 0;
  }

  .kb-about__facts > div + div {
    border-left: 1px solid var(--line-strong);
  }
}

/* Tilgangen: overskriften til venstre og de fire punkter ved siden af. */
.kb-approach {
  display: grid;
  gap: var(--space-48);
}

@media (min-width: 960px) {
  .kb-approach {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: var(--space-80);
  }
}

.kb-approach__head > * + * {
  margin-top: var(--space-16);
}

/* Brødkrummer over billedet på behandlingssiderne og "Andre behandlinger"
   nederst (punkt 30). Listen er den samme som på forsiden. */
.kb-crumbs {
  padding-block: var(--space-16);
}

.kb-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: 0.025em;
}

.kb-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 24px;
}

.kb-crumbs a,
.kb-others__all {
  color: var(--ink);
  text-decoration: underline;
}

.kb-others__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-40);
}

.kb-others__all {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Kun korte farveskift ved hover, og slet ingen for dem, der har bedt om det. */
@media (prefers-reduced-motion: reduce) {
  .kbx *,
  .kbx *::before,
  .kbx *::after {
    transition: none !important;
  }
}