/* ==========================================================================
   Relationsrummet — styles.css  (mobil-først, semantisk, AA-kontrast)
   ========================================================================== */

/* ==========================================================================
   Design tokens (inlined to avoid a render-blocking @import chain).
   Solsikkepalet: lyst varmt papir + dyb olivenbrun + gylden solsikke som
   primær accent, med blød blågrøn fra bladene. Alle tekst/baggrunds-par opfylder
   WCAG AA (≥ 4.5:1 for brødtekst).
   ========================================================================== */

:root {
  /* Farver */
  --bg:          #FFFCF5;  /* lyst, varmt papir */
  --bg-tint:     #F4EAD3;  /* svag solsikketone til skiftende sektioner */
  --surface:     #FFFFFF;
  --ink:         #3D3A2A;  /* dyb olivenbrun — 11.2:1 på --bg */
  --ink-soft:    #615B44;  /* 6.6:1 på --bg */
  --accent:      #8A6926;  /* mørk solsikkeguld (knapper, store flader) */
  --accent-ink:  #6D511C;  /* dyb gyldenbrun til links/tekst — 7.2:1 på --bg */
  --accent-soft: #F4E7C9;  /* svag solsikketone til markeringer */
  --accent-2:    #427A73;  /* blågrøn fra solsikkens blade */
  --accent-2-ink:#315D58;
  --green-deep:  #3F4B3D;  /* dyb bladgrøn — footer + mørkt priskort */
  --on-dark:     #FFFBEF;  /* tekst på dyb bladgrøn */
  --on-dark-soft:#D8D5BC;  /* dæmpet tekst på dyb bladgrøn */
  --line:        #E9DFC6;
  --control-line:#777264;  /* tydelig formularafgrænsning — ≥ 3:1 på hvid */
  --error:       #9F5140;  /* fejlmeldinger — 5.5:1 på hvid */
  --ok:          #42796B;
  --draft-highlight-bg: #FDE68A;  /* redaktionel kladdemarkering — "gul markering" for ufærdigt indhold */
  --draft-highlight-ink: #3D3A2A; /* tekst oven på --draft-highlight-bg — matcher --ink */

  /* Typografi — to familier, systemstakke (ingen webfont-payload).
     Display-serif bærer det rolige, personlige udtryk; sans til brødtekst/UI. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans:    "Seravek", "Gill Sans Nova", system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-sans);

  /* Flydende typeskala */
  --step--1: clamp(.875rem, .85rem + .15vw, .95rem);
  --step-0:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem);  /* ≥17px brødtekst */
  --step-1:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2.2vw, 3.4rem);

  /* Rytme */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --space-6: 6.5rem;

  --measure: 65ch;
  --radius:  16px;
  --radius-s: 10px;
  --maxw:    72rem;
  --shadow:  0 1px 2px rgba(61, 58, 42, .05), 0 10px 30px rgba(61, 58, 42, .07);
}

/* Delbare testpaletter vælges med ?theme=... . Standardpaletten ovenfor er
   uændret. De tre modern-paletter omsætter WGSN/Coloros 2026–27-retninger
   (natur + teknologi, tydelige polariteter og jordbundne pigmenter) til faste
   UI-roller. Hvide læseflader, mørke interaktionsfarver og særskilte, tydelige
   formularrammer sikrer WCAG AA-kontrast uden at gøre alle skillelinjer tunge. */

:root[data-theme="warm"] {
  --bg:          #FFFFFF;
  --bg-tint:     #F8E5D6;
  --surface:     #FFFFFF;
  --ink:         #4B2E25;
  --ink-soft:    #6D4A3C;
  --accent:      #A85524;
  --accent-ink:  #7B3B1B;
  --accent-soft: #F3D6C4;
  --accent-2:    #356A5B;
  --accent-2-ink:#264F44;
  --green-deep:  #4A3D32;
  --on-dark:     #FFF9F2;
  --on-dark-soft:#E5D3C6;
  --line:        #E9D8CB;
  --control-line:#7A6B62;
  --error:       #9B3E32;
  --ok:          #2D6B5B;
  --draft-highlight-ink: #4B2E25;
  --shadow:      0 1px 2px rgba(75, 46, 37, .06), 0 10px 30px rgba(75, 46, 37, .10);
}

:root[data-theme="darker"] {
  --bg:          #FFF8EC;
  --bg-tint:     #F1E0BD;
  --surface:     #FFFFFF;
  --ink:         #332A1E;
  --ink-soft:    #574632;
  --accent:      #785516;
  --accent-ink:  #5A3D0E;
  --accent-soft: #F2DFB5;
  --accent-2:    #35645D;
  --accent-2-ink:#244B45;
  --green-deep:  #33402F;
  --on-dark:     #FFF8EA;
  --on-dark-soft:#D9C7A3;
  --line:        #DFCFAD;
  --control-line:#746A5A;
  --error:       #8E3F32;
  --ok:          #32655A;
  --draft-highlight-ink: #332A1E;
  --shadow:      0 1px 2px rgba(51, 42, 30, .06), 0 10px 30px rgba(51, 42, 30, .10);
}

:root[data-theme="evendarker"] {
  --bg:          #FFF4DE;
  --bg-tint:     #EBD3A5;
  --surface:     #FFFFFF;
  --ink:         #241B12;
  --ink-soft:    #47372A;
  --accent:      #68480F;
  --accent-ink:  #4A3008;
  --accent-soft: #ECD4A4;
  --accent-2:    #2F5A51;
  --accent-2-ink:#1E423C;
  --green-deep:  #273326;
  --on-dark:     #FFF6E6;
  --on-dark-soft:#D4BD91;
  --line:        #D8C39B;
  --control-line:#6B6154;
  --error:       #7F3329;
  --ok:          #285548;
  --draft-highlight-ink: #241B12;
  --shadow:      0 1px 2px rgba(36, 27, 18, .07), 0 10px 30px rgba(36, 27, 18, .12);
}

/* 2026: Transformative Teal + Wax Paper + Cocoa Powder.
   Calm and human, with a precise bio-digital edge. */
:root[data-theme="modern-1"] {
  --bg:          #FFFFFF;
  --bg-tint:     #DCE9E5;
  --surface:     #FFFFFF;
  --ink:         #20312F;
  --ink-soft:    #4C5D59;
  --accent:      #0B6663;
  --accent-ink:  #07514F;
  --accent-soft: #D4E9E4;
  --accent-2:    #85532C;
  --accent-2-ink:#633D20;
  --green-deep:  #173D3A;
  --on-dark:     #FAF7EF;
  --on-dark-soft:#C7D8D2;
  --line:        #CAD7D2;
  --control-line:#6D7B77;
  --error:       #963D36;
  --ok:          #2C685B;
  --draft-highlight-ink: #20312F;
  --shadow:      0 1px 2px rgba(32, 49, 47, .06), 0 12px 34px rgba(32, 49, 47, .10);
}

/* 2027: Luminous Blue + Clay.
   A confident digital blue balanced by a grounded, tactile counter-accent. */
:root[data-theme="modern-2"] {
  --bg:          #FFFFFF;
  --bg-tint:     #E5E7F4;
  --surface:     #FFFFFF;
  --ink:         #1E2B42;
  --ink-soft:    #4E5C72;
  --accent:      #3657A7;
  --accent-ink:  #294487;
  --accent-soft: #E0E6F7;
  --accent-2:    #9D4C2A;
  --accent-2-ink:#73371F;
  --green-deep:  #202E45;
  --on-dark:     #F8F9FF;
  --on-dark-soft:#CAD3E5;
  --line:        #D5D9E2;
  --control-line:#6B7484;
  --error:       #963C43;
  --ok:          #2D6659;
  --draft-highlight-ink: #1E2B42;
  --shadow:      0 1px 2px rgba(30, 43, 66, .06), 0 12px 34px rgba(30, 43, 66, .10);
}

/* 2027: Meadowland Green + Energy Orange.
   Restorative and relationship-led, with a compact optimistic accent. */
:root[data-theme="modern-3"] {
  --bg:          #FFFFFF;
  --bg-tint:     #E0E9D7;
  --surface:     #FFFFFF;
  --ink:         #293124;
  --ink-soft:    #55604D;
  --accent:      #416949;
  --accent-ink:  #31523A;
  --accent-soft: #DAE6D3;
  --accent-2:    #984923;
  --accent-2-ink:#6D3419;
  --green-deep:  #23372A;
  --on-dark:     #FAF7EC;
  --on-dark-soft:#CBD6C5;
  --line:        #D3DACB;
  --control-line:#707968;
  --error:       #963D32;
  --ok:          #346650;
  --draft-highlight-ink: #293124;
  --shadow:      0 1px 2px rgba(41, 49, 36, .06), 0 12px 34px rgba(41, 49, 36, .10);
}

/* Darker v2: the warm sunflower character recast through the 2026–27 mix of
   sunbaked hues, restorative darks and nuanced foundational neutrals. */
:root[data-theme="darker-v2"] {
  --bg:          #F8F1E5;
  --bg-tint:     #E5D3B0;
  --surface:     #FFFFFF;
  --ink:         #2F2922;
  --ink-soft:    #5A4E41;
  --accent:      #72521A;
  --accent-ink:  #563D11;
  --accent-soft: #EADAB6;
  --accent-2:    #315F55;
  --accent-2-ink:#23483F;
  --green-deep:  #2F382F;
  --on-dark:     #FAF3E7;
  --on-dark-soft:#D1C3AA;
  --line:        #D8CBB5;
  --control-line:#746B5E;
  --error:       #873D33;
  --ok:          #2D6053;
  --draft-highlight-ink: #2F2922;
  --shadow:      0 1px 2px rgba(47, 41, 34, .07), 0 12px 34px rgba(47, 41, 34, .12);
}

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

html {
  scroll-behavior: smooth;
  /* Sticky header: 44px content + .65rem vertical padding on each side,
     followed by 1rem of visible breathing room at anchor destinations. */
  scroll-padding-top: calc(44px + 1.3rem + var(--space-2));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* The mobile navigation owns scrolling while it is open, so a swipe cannot
   accidentally move the page underneath it. */
body.nav-menu-open { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: var(--step-3); letter-spacing: -.01em; }
h2 {
  font-size: var(--step-2);
  /* Section headings should use the available line width. Balanced wrapping
     makes wide headings break into equally sized lines much too early. */
  text-wrap: wrap;
}
h3 { font-size: var(--step-1); }

/* Den lange titel på /hvad-er-terapi/ skal udnytte en hel linje på brede
   skærme. Den generelle balancering deler ellers titlen i to, selv når der
   er plads til den i tekstspalten. */
.therapy-page-title {
  font-size: clamp(2rem, 1.45rem + 1vw, 2.3rem);
  text-wrap: wrap;
}

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--space-2); }
ul, ol { padding-left: 1.25rem; }
.profile-topic-list {
  padding-left: 3.5rem;
  margin-top: calc(-1 * var(--space-2));
}

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

a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

/* Skalerer kun kontakt-sektionens .container ned på artikelsider (fx inspiration/),
   uden at røre bredden på forsidens kontaktsektion. */
.kontakt-narrow .container { width: min(100% - 2.5rem, 46rem); }
.kontakt-narrow .contact-card__value { font-size: var(--step--1); white-space: nowrap; }

section { padding-block: calc(var(--space-5) - 10px); }
/* Når to sektioner støder op ad hinanden, lægges bund- og top-padding sammen
   til et unaturligt stort mellemrum. Vi strammer top og bund ens for den
   efterfølgende sektion, så luften er symmetrisk igen. Enkeltstående
   sektioner (fx lige under headeren) beholder deres fulde luft. */
section + section { padding-block: var(--space-4); }
.section--tint { background: var(--bg-tint); }

/* Eyebrow: kort linje + versal-etiket, venstrestillet med H2'en der følger */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}

.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }
.muted { color: var(--ink-soft); }
.note { font-size: var(--step--1); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Tilgængelighed
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: .65rem 1.1rem; border-radius: 0 0 var(--radius-s) 0;
  z-index: 100; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Knapper og CTA'er  (≥ 44×44 px)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  border: 2px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn--ghost { background: transparent; color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }

.btn--accent2 { background: var(--accent-2); border-color: var(--accent-2); }
.btn--accent2:hover { background: var(--accent-2-ink); border-color: var(--accent-2-ink); color: #fff; }

/* Tryghedslinje under CTA'er */
.cta-reassure {
  display: block;
  margin-top: .6rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Header / sticky navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .65rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink);
}
.brand__logo { width: 34px; height: 34px; object-fit: contain; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.25rem; line-height: 1.1;
  white-space: nowrap;
}
.brand__tag {
  display: block;
  font-family: var(--font-sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-soft);
}

.nav { position: relative; }
.nav__toggle { display: none; }
.nav__list {
  display: flex; align-items: center; gap: .55rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__item { position: relative; }
.nav__parent { display: flex; align-items: center; }
.nav__link,
.nav__list > .nav__item > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem .55rem;
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: .98rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__list > .nav__item > a:not(.nav__cta):hover,
.nav__list > .nav__item > a:not(.nav__cta):focus-visible {
  background: var(--bg-tint);
  color: var(--accent-ink);
}
.nav__parent-link--desktop { white-space: nowrap; padding-right: 0; }
.nav__mobile-parent-toggle { display: none; }
.nav__parent {
  border-radius: var(--radius-s);
}
.nav__parent:hover,
.nav__parent:focus-within {
  background: var(--bg-tint);
}
.nav__parent:hover .nav__parent-link--desktop,
.nav__parent:focus-within .nav__parent-link--desktop,
.nav__parent:hover .nav__submenu-toggle--desktop,
.nav__parent:focus-within .nav__submenu-toggle--desktop {
  background: transparent;
  color: var(--accent-ink);
}
.nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: .35rem;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--accent-ink);
  cursor: pointer;
}
.nav__submenu-toggle--desktop {
  justify-content: flex-start;
  /* Keep the desktop hit area full-height, but make its horizontal footprint
     comparable to the padding used by a regular menu link. */
  width: 1.5rem;
  min-width: 1.5rem;
  margin: 0;
  padding-left: .25rem;
}
.nav__submenu-toggle:hover,
.nav__submenu-toggle:focus-visible {
  background: transparent;
}
.nav__chevron {
  display: block;
  width: .75rem;
  height: .5rem;
  flex: 0 0 .75rem;
  overflow: visible;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .18s ease;
}
.nav__chevron path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.nav__item--has-children.is-open .nav__chevron { transform: rotate(180deg); }
.nav__submenu {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 60;
  width: min(23rem, 80vw);
  margin: 0;
  padding: .5rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.nav__submenu::before {
  content: "";
  position: absolute;
  top: -.4rem;
  left: 1.35rem;
  width: .75rem;
  height: .75rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface);
  transform: rotate(45deg);
}
.nav__submenu-link {
  display: block;
  padding: .65rem .75rem;
  border-radius: var(--radius-s);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
.nav__submenu-link:hover,
.nav__submenu-link:focus-visible {
  background: var(--bg-tint);
  color: var(--accent-ink);
}
.nav__submenu-link--overview {
  margin-bottom: .3rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
  color: var(--accent-ink);
  font-weight: 650;
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--accent);
  color: #fff !important;
  padding: .55rem 1.05rem !important;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--space-5) var(--space-5); }
.hero__grid {
  display: grid; gap: var(--space-4); align-items: center;
}
.hero__sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 38ch; line-height: 1.45; }
.hero__cred {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.hero__portrait {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-tint);
}
.hero__figure { margin: 0; position: relative; max-width: 460px; }
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .hero__figure { justify-self: end; }
}

/* Forsidens kompakte henvisning til gruppeforløbet. */
.event-promo {
  padding-block: var(--space-3);
  background: var(--green-deep);
  color: var(--on-dark);
}
.event-promo__inner { display: grid; gap: var(--space-2); align-items: center; }
.event-promo__label {
  margin-bottom: .35rem;
  color: var(--on-dark-soft);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.event-promo h2 {
  margin-bottom: .4rem;
  color: var(--on-dark);
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
}
.event-promo__detail { margin: 0; color: var(--on-dark-soft); }
.linkedin-promo .event-promo__detail { max-width: 75ch; }
.linkedin-promo .event-promo__detail a {
  color: var(--on-dark);
  font-weight: 700;
  text-decoration: none;
}
.event-promo__link {
  width: 100%;
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--green-deep);
  white-space: nowrap;
}
.event-promo__link:hover {
  background: var(--bg-tint);
  border-color: var(--bg-tint);
  color: var(--green-deep);
}
@media (min-width: 760px) {
  .event-promo__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); }
  .event-promo__link { width: auto; }
}

/* --------------------------------------------------------------------------
   Kort, grids, ydelses-spor
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-3); }
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Et grid--3 sat inde i en smal spalte (fx "læs mere"-kort på en artikelside)
   får kun plads til to kolonner, uden at røre den brede 3-kolonne-visning
   som fx bruges på /inspiration/. */
@media (min-width: 760px) {
  .container--narrow .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Referencer-sektionen på forsiden: kortene har mere tekst end de fleste
   andre grid--3-visninger, så tre kolonner bliver trængt for tidligt. Vis to
   kort side om side på mellemstore skærme, og vent med tre kolonner til der
   er nok plads (960px) til at hvert kort stadig har ca. 290px+ at boltre sig på. */
@media (min-width: 760px) {
  #referencer .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  #referencer .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* /ledelsesudvikling/ og /inspiration/: samme princip som #referencer -
   vis to kort side om side, før der er plads til tre. */
@media (min-width: 760px) {
  #tilbud .grid--3, #artikler .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  #tilbud .grid--3, #artikler .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card > :last-child { margin-bottom: 0; }
.card > p:has(.btn) { margin-top: auto; }
.card > p:has(.card__cta) { margin-top: auto; }
.card__img {
  width: 100%;
  aspect-ratio: 800 / 520;
  object-fit: cover;
  object-position: center;
  background: var(--bg-tint);
  border-radius: var(--radius-s);
  margin-bottom: var(--space-2);
}
/* Pladsholder-SVG'er (fx "udskiftes med rigtigt foto") er tegnet fladere end
   800:520-boksen og har billedtekst, der ikke må beskæres - de vises derfor
   hele (uden beskæring), med kortets baggrundsfarve i mellemrummet i stedet
   for at blive croppet som et rigtigt foto. */
.card__img[src$=".svg"] { object-fit: contain; }
.card__img[src$="event-social.webp"] { object-fit: contain; }
/* Fallback-logo når et kort slet ikke har et billede - vis mærket lille og
   centreret på kortets baggrundsfarve, ikke opskaleret/beskåret som et foto. */
.card__img[src$="logo-sunflower.png"] { object-fit: contain; padding: 18%; }
.card h3 { margin-top: 0; }

/* Compact kort: kun billede + overskrift, hele kortet er ét klik-link.
   Bruges via render_inspiration_cards()/render_samtalerom_cards() med
   ['compact' => true], typisk i et 2-kolonne-grid inde i en artikels brødtekst. */
.card--compact { padding: var(--space-2); }
.card--compact .card__img { margin-bottom: var(--space-1); }
.card--compact h3 { font-size: var(--step-0); margin-bottom: 0; }
.area-services__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: min(100%, 42rem);
  margin: var(--space-4) auto var(--space-2);
  padding: var(--space-2);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.area-services__filters--single { grid-template-columns: minmax(0, 1fr); max-width: 24rem; }
.area-services__filters[hidden], .area-service-card[hidden], .area-services__count[hidden] { display: none; }
.area-services__filters > div { position: relative; min-width: 0; }
.area-services__filters > div::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  bottom: 1.35rem;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.area-services__filters label { display: block; margin-bottom: .4rem; color: var(--accent-ink); font-size: var(--step--1); font-weight: 600; }
.area-services__filters select {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: .7rem 2.75rem .7rem 1rem;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.area-services__filters select:hover { border-color: var(--accent-ink); }
.area-services__filters select:focus-visible { outline: 2px solid var(--accent-2-ink); outline-offset: 2px; }
.area-services__count { max-width: none; margin: 0 auto var(--space-3); color: var(--ink-soft); text-align: center; font-size: var(--step--1); }
@media (max-width: 560px) {
  .area-services__filters { grid-template-columns: 1fr; max-width: 24rem; }
}
.area-service-card__meta { margin-bottom: var(--space-1); color: var(--ink-soft); font-size: var(--step--1); }
.area-service-card h3 { margin-bottom: var(--space-1); }
.area-service-card > p:last-child { font-size: var(--step--1); }
.area-hub-header .lead, .area-overview-intro { max-width: var(--measure); }
.area-town-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
  gap: var(--space-4);
  align-items: center;
}
.area-town-hero__portrait { margin: 0; }
.area-town-hero__portrait img { width: 100%; border-radius: var(--radius); }
.area-town-hero__portrait figcaption {
  margin-top: var(--space-1);
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.area-town-article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.area-town-article--choices > section {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.area-town-article > section h2 { margin-top: 0; }
.area-town-article--choices > section p:last-child { margin-top: auto; margin-bottom: 0; }
.area-town-article > .article-cta { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 700px) {
  .area-town-hero { grid-template-columns: 1fr; }
  .area-town-hero__portrait { width: min(100%, 11rem); }
  .area-town-article { grid-template-columns: 1fr; }
}
.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:hover h3 { text-decoration: underline; }

/* Fulde artikelkort: titel-lænken strækkes over hele kortet via et
   ::after-pseudo-element med position:absolute; inset:0 (kræver .card
   position:relative ovenfor), så hele kortet er ét klik-/tryk-mål for mus og
   touch. Tastaturbrugere fokuserer stadig kun selve titel-teksten - det er
   den tilsigtede opførsel for dette mønster (undgår dobbelt-lænker). Den
   tidligere "Læs mere"-lænke er af samme grund ikke længere en selvstændig
   <a>, men ren tekst med samme visuelle udtryk (.card__cta). */
.card__title-link { color: inherit; text-decoration: none; }
.card__title-link::after { content: ""; position: absolute; inset: 0; }
.card__title-link:hover { color: var(--accent-ink); text-decoration: underline; }
.card__cta { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Definitionsliste: sparring vs. coaching vs. supervision vs. terapi */
.terms { display: grid; gap: var(--space-2); margin: 0; }
.terms div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
}
.terms dt { font-weight: 600; font-family: var(--font-sans); }
.terms dd { margin: .25rem 0 0; color: var(--ink-soft); }
@media (min-width: 760px) { .terms { grid-template-columns: 1fr 1fr; } }

/* Trin-sekvens: hvad kan du forvente */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  position: relative;
}
.steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600;
  margin-bottom: var(--space-1);
}
.steps h3 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; }
.steps p { margin-bottom: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Mini-cases og udtalelser */
.case { border-left: 4px solid var(--accent); }

/* Kommende artikler på inspirationsoversigten — synligt "på vej", ikke klikbare */
.card--soon { opacity: .85; }
.card__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-tint);
  border-radius: 999px;
  padding: .2rem .75rem;
  margin: 0 0 var(--space-1);
}
.testimonial blockquote {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
}
.testimonial__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--accent-ink);
  opacity: .35;
  margin: 0 0 -.4rem;
}
.testimonial__quote {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.testimonial {
  cursor: pointer;
}
.testimonial__toggle-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.testimonial__toggle-input + .testimonial__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.testimonial__toggle-input:checked + .testimonial__quote {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.testimonial__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
  margin: 0 0 var(--space-2);
}
.testimonial__toggle-label:hover {
  text-decoration: underline;
}
.testimonial__chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  fill: currentColor;
  flex-shrink: 0;
}
.testimonial__toggle-label .testimonial__toggle-less {
  display: none;
  align-items: center;
  gap: .3rem;
}
.testimonial__toggle-label .testimonial__toggle-more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.testimonial__toggle-input:checked ~ .testimonial__toggle-label .testimonial__toggle-more {
  display: none;
}
.testimonial__toggle-input:checked ~ .testimonial__toggle-label .testimonial__toggle-less {
  display: inline-flex;
}
.testimonial__attribution {
  border-top: 1px solid var(--line);
  padding-top: .875rem;
  margin-top: var(--space-2);
}
.testimonial__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  font-style: normal;
  color: var(--accent-ink);
  margin: 0;
}
.testimonial__role {
  font-size: var(--step--1);
  font-style: normal;
  color: var(--ink-soft);
  margin: .125rem 0 0;
}

/* Kladdemarkering — fremhæver afsnit/overskrifter i en artikel, der endnu
   mangler indhold, ligesom en gul markeringspen i et udkast. Redaktionel
   brug: fjern klassen og labelen, når afsnittet er skrevet færdigt. */
.draft-highlight--block {
  display: block;
  background: var(--draft-highlight-bg);
  color: var(--draft-highlight-ink);
  padding: .35rem .75rem;
  border-radius: var(--radius-s);
}
.draft-highlight__label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  font-style: italic;
  margin-left: .5rem;
}

/* --------------------------------------------------------------------------
   Priser — to kort, det ene mørkt
   -------------------------------------------------------------------------- */
.pricing { display: grid; gap: var(--space-3); align-items: stretch; }
@media (min-width: 760px) { .pricing { grid-template-columns: 1fr 1fr; } }

.price-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.price-card--light { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.price-card--dark  { background: var(--green-deep); color: var(--on-dark); }
.price-card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); margin: 0 0 var(--space-3);
}
.price-card--dark .price-card__name { color: var(--on-dark); }
.price-card__amount {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-3); line-height: 1; margin: 0;
}
.price-card__unit { font-size: var(--step--1); color: var(--ink-soft); margin: .4rem 0 var(--space-3); }
.price-card--dark .price-card__unit { color: var(--on-dark-soft); }
.price-card__desc { margin-bottom: var(--space-4); flex: 1; }
.price-card--dark .price-card__desc { color: var(--on-dark); }
.price-card .btn { align-self: flex-start; }

/* Praktisk info — rolig stribe under priserne */
.practical {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 680px) { .practical { grid-template-columns: repeat(3, 1fr); } }
.practical div { padding-top: var(--space-2); border-top: 2px solid var(--accent-soft); }
.practical h3 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; margin: 0 0 .25rem; }
.practical p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

/* FAQ */
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-ink); }
.faq details[open] summary::after { content: "–"; }
.faq h3 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; margin: 0; display: inline; }
.faq details > p { margin: var(--space-2) 0 0; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Kontakt — tydelige kanaler + formular
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-cards { display: grid; gap: var(--space-2); }
.contact-card {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-3);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-card:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--ink); }
.contact-card__icon {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--accent); color: #fff;
}
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.contact-card__value { font-weight: 700; font-size: var(--step-1); font-family: var(--font-sans); }

.contact-form-block { margin-top: var(--space-4); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-block: 0 var(--space-2); }
.field label { font-weight: 600; font-size: var(--step--1); }
.field input, .field textarea {
  font: inherit;
  padding: .75rem .85rem;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .field-error { display: none; color: var(--error); font-size: var(--step--1); }
.field [aria-invalid="true"] ~ .field-error { display: block; }
.form-row { display: grid; gap: var(--space-2); }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-status { margin-top: var(--space-2); font-weight: 600; }
.form-status.is-error { color: var(--error); }
.form-status.is-ok { color: var(--ok); }

/* --------------------------------------------------------------------------
   Sticky CTA — vises ved scroll, fungerer som alm. link uden JS
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; min-height: 48px;
  background: var(--accent); color: #fff;
  padding: .75rem 1.4rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-family: var(--font-sans);
  box-shadow: var(--shadow);
  border: 2px solid rgba(255, 255, 255, .35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sticky-cta:hover { background: var(--accent-ink); color: #fff; }
.sticky-cta.is-visible { opacity: 1; pointer-events: auto; }
.no-js .sticky-cta { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Indsigter (artikelside)
   -------------------------------------------------------------------------- */
.page-header { padding-block: var(--space-3) var(--space-2); }
.article-meta-line { font-size: .82rem; color: var(--ink-soft); margin: 0; }
.article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow);
}
.article p { font-size: var(--step-0); }
.article h2 { font-size: var(--step-2); margin-top: var(--space-4); }
.article--therapy { container-type: inline-size; }
.article--therapy .article-title {
  margin-top: 0;
  font-size: clamp(1.6rem, 5cqi, 1.95rem);
  text-wrap: wrap;
}
.article__meta { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--space-3); }
.article__img { border-radius: var(--radius-s); margin-block: var(--space-2) var(--space-3); }

/* Hero-billede — stort, men afstemt med tekstspalten; ligger uden for artikelkortet */
.article-hero { margin-bottom: var(--space-3); }
.article-hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-tint);
}
/* Undtagelse for et enkelt rigtigt hero-foto, der hverken er 16:9 eller 4:3 -
   viser billedet i dets eget højde/bredde-forhold i stedet for at tvinge og
   beskære det ind i standardbanneret. Opt-in pr. side. */
.article-hero__img--natural { aspect-ratio: auto; }

/* Hero-split — alternativ artikeltop (opt-in): overskrift/underrubrik/metadata
   til venstre, stående billede vist helt (uden beskæring) til højre.
   Bruges i stedet for .page-header + .article-hero, ikke sammen med dem. */
.hero-split__heading h1 { text-wrap: wrap; }
.hero-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.hero-split__media {
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-tint);
}
.hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__media { max-width: 300px; margin: 0 auto; }
}

/* Fremhævet citat i brødteksten */
.pull-quote {
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--accent);
  background: var(--bg-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Mindre illustration/foto som en del af brødteksten (ikke fuld bredde som hero) */
.article__figure {
  width: min(65%, 420px);
  margin: var(--space-4) auto;
}
.article__figure img {
  width: 100%;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  background: var(--bg-tint);
  margin: 0;
}
.article__figure figcaption {
  margin-top: .5rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* Kort AI-/skimme-venligt resumé øverst i artiklen — ens skriftstørrelse, ingen fremhævning */
.article-summary {
  background: var(--bg-tint);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}
.article-summary__label {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.article-summary p,
.article-summary li {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 .4rem;
}
.article-summary ul { margin: 0; padding-left: 1.1rem; }
.article-summary > :last-child { margin-bottom: 0; }
.article-summary li:last-child { margin-bottom: 0; }

/* Byline: forfatterfoto, navn, kompetencer, læsetid og udgivelsesdato */
.byline-label {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
@media (max-width: 420px) {
  .byline {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.byline__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex: none;
  box-shadow: var(--shadow);
}
.byline__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
}
.byline__name a { font-weight: 700; }
.byline__credentials {
  margin: .15rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.byline__meta {
  margin: .3rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.byline__meta time { color: var(--ink-soft); }

.article-cta {
  margin-top: var(--space-4);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.article-cta p { margin-bottom: var(--space-2); }
.article-cta--white { background: var(--surface); }
.article-cta--white > :last-child { margin-bottom: 0; }
.article-cta--white + h2 { margin-top: var(--space-4); }

/* Bredt forløbskort til krydspromovering under CTA'en på en artikelside. */
.forloeb-promo-card {
  display: grid;
  overflow: hidden;
  margin-top: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.forloeb-promo-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-3);
}
.forloeb-promo-card__body h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--step-1);
}
.forloeb-promo-card__body .note {
  margin-bottom: var(--space-1);
  font-size: var(--step--1);
}
.forloeb-promo-card__body .muted {
  margin-bottom: var(--space-2);
}
.forloeb-promo-card__action { margin: auto 0 0; }
.forloeb-promo-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: var(--space-3);
  background: var(--surface);
}
.forloeb-promo-card__media img {
  display: block;
  width: 80%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 620px) {
  .forloeb-promo-card { grid-template-columns: minmax(0, 2.2fr) minmax(210px, 1.8fr); }
  .forloeb-promo-card__body { padding-right: calc(var(--space-3) / 2); }
  .forloeb-promo-card__media { padding-left: calc(var(--space-3) / 2); }
  .forloeb-promo-card--no-image { grid-template-columns: 1fr; }
  .forloeb-promo-card--no-image .forloeb-promo-card__body { padding-right: var(--space-3); }
}

/* Fremhævet CTA-kort i et almindeligt kort-grid (fx sidste kort på
   /inspiration/) — samme kort-struktur (billede/overskrift/tekst/knap) som de
   øvrige kort, men med en anden baggrundsfarve, så det skiller sig ud i
   rækken uden at bryde layoutet. */
.card--cta {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* På forsiden ligger CTA-kortet i en tonet sektion, men skal være hvidt.
   Andre visninger beholder CTA-farven. */
.card--cta-homepage {
  background: var(--surface);
  border-color: var(--surface);
}

/* Profil-boks (fx foto + "Kort om mig" på /om/) — samler et bredt to-kolonne
   grid (billede + tekst) i én sammenhængende flade, så de to kolonner ikke
   flyder løst hver for sig i den brede container. */
.profile-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}
@media (min-width: 760px) {
  .profile-card { padding: var(--space-4); }

  /* Overskriften skal skalere med tekstspaltens egen bredde (ikke
     viewportet) her, hvor billede og tekst står side om side - ellers
     bliver h1 for høj i forhold til billedet på mellembrede skærme
     (~760-1000px), hvor spalten er smal, men skriftstørrelsen (vw-baseret
     --step-3) endnu ikke er skaleret tilsvarende ned. */
  .profile-card__content { container-type: inline-size; }
  .profile-card h1 { font-size: clamp(1.3rem, -0.2rem + 10.5cqi, 3.4rem); }
}
.profile-card .grid--2 { align-items: center; }
.profile-card .article__figure {
  width: 100%;
  max-width: none;
  margin: 0;
}
.profile-card .article__figure img { box-shadow: none; }

/* "På denne side"-genveje — tag-lignende anker-lænker til andre sektioner på
   samme side. Bruges i profil-boksen på /om/ og under hero-CTA'en på
   forsiden; ikke bundet til ét bestemt sted i layoutet. */
.jump-nav {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}
.jump-nav__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.jump-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.jump-nav__links a {
  display: inline-block;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.jump-nav__links a:hover { background: var(--accent-ink); color: #fff; }

/* Inline kildehenvisning i brødteksten, fx "...falder.[1]" */
.source-ref { font-size: .75em; }
.source-ref a {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.source-ref a:hover { text-decoration: underline; }

/* Kilder/referencer — subtil tillidssektion i bunden af artiklen */
.article-sources {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.article-sources h2 {
  font-size: var(--step-0);
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.sources-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.sources-list li { margin-bottom: .5rem; }
.sources-list li:last-child { margin-bottom: 0; }
.sources-list a { color: var(--accent-ink); }
.source-backlink { margin-left: .35rem; text-decoration: none; }

/* Når kilder er artiklens sidste element, er kortets fulde bundpadding for stor */
.article--with-sources { padding-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   Footer — rolig dyb grøn
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-deep);
  color: var(--on-dark-soft);
  padding-block: var(--space-4);
  font-size: var(--step--1);
  text-align: center;
}
.site-footer .container { display: grid; justify-items: center; gap: var(--space-3); }
.site-footer p { margin: 0; max-width: none; }
.site-footer a { color: var(--on-dark); text-decoration: underline; }
.site-footer a:hover { color: #fff; }
.theme-switcher {
  width: min(100%, 44rem);
  padding: .75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--on-dark-soft) 38%, transparent);
  border-radius: var(--radius-s);
  background: rgba(255, 255, 255, .06);
  text-align: left;
}
.theme-switcher summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--on-dark);
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.theme-switcher summary::-webkit-details-marker { display: none; }
.theme-switcher summary::after {
  content: "+";
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1;
}
.theme-switcher[open] summary::after { content: "–"; }
.theme-switcher__options {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--on-dark-soft) 30%, transparent);
}
.theme-switcher__option {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: .45rem .75rem;
  border: 1px solid color-mix(in srgb, var(--on-dark-soft) 65%, transparent);
  border-radius: 999px;
  color: var(--on-dark) !important;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none !important;
}
.theme-switcher__option:hover,
.theme-switcher__option:focus-visible {
  background: color-mix(in srgb, var(--on-dark) 12%, transparent);
  color: var(--on-dark) !important;
}
.theme-switcher__option[aria-current="page"] {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--green-deep) !important;
}
.theme-switcher__note {
  margin: .65rem 0 0 !important;
  color: var(--on-dark-soft);
  font-size: .8rem;
}
.site-footer .copyright { margin: 0 !important; padding: 0 !important; }
.site-footer p.copyright { display: grid; justify-items: center; gap: .5rem; }
.site-footer p.copyright a { border-bottom: 0; }
.site-footer p.copyright svg { display: block; filter: brightness(0) invert(1); }
.site-footer ul.copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.25rem;
  list-style: none;
}
.site-footer ul.copyright li + li { border-left: 1px solid var(--on-dark-soft); padding-left: 1.25rem; }
@media (max-width: 540px) {
  .site-footer ul.copyright { display: grid; gap: .6rem; }
  .site-footer ul.copyright li + li { border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Mobilnavigation
   -------------------------------------------------------------------------- */
/* The full desktop navigation is wider than a typical tablet viewport. Switch
   before labels can wrap or compete for space in the header. */
@media (max-width: 1100px) {
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
    background: none; border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: .45rem .9rem; font: inherit; font-weight: 600; color: var(--ink);
    cursor: pointer;
  }
  .nav__list {
    display: none;
    position: absolute; right: 0; top: calc(100% + .5rem);
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .75rem; box-shadow: var(--shadow);
    width: min(24rem, calc(100vw - 2.5rem));
    max-height: calc(100vh - 5.5rem);
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__list.is-open { display: flex; }
  .nav__list > .nav__item { width: 100%; }
  .nav__list > .nav__item > .nav__link,
  .nav__list > .nav__item > a:not(.nav__cta) {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: .65rem .75rem;
  }
  .nav__parent { display: block; }
  .nav__parent-link--desktop,
  .nav__submenu-toggle--desktop { display: none; }
  .nav__mobile-parent-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: .65rem .75rem;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }
  .nav__mobile-parent-toggle:hover,
  .nav__mobile-parent-toggle:focus-visible {
    background: var(--bg-tint);
    color: var(--accent-ink);
  }
  .nav__mobile-parent-toggle .nav__chevron { margin-left: .75rem; }
  .nav__submenu {
    position: static;
    width: auto;
    margin: 0 0 .25rem .6rem;
    padding: .2rem 0 .35rem .7rem;
    border: 0;
    border-left: 2px solid var(--accent-soft);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .nav__submenu::before { display: none; }
  .nav__submenu-link {
    min-height: 44px;
    padding: .65rem .7rem;
    font-size: var(--step--1);
  }
  .nav__submenu-link--overview { margin-bottom: .25rem; }
  .nav__cta {
    display: flex;
    width: 100%;
    min-height: 48px;
    margin-top: .25rem;
    text-align: center;
  }
}

/* Without JavaScript, expose the complete navigation rather than leaving a
   hamburger button with no interaction. The parent landing links remain
   available and all submenu links are visible in the normal document flow. */
.no-js .nav__toggle { display: none; }
.no-js .nav__submenu { position: static; width: auto; margin: .25rem 0 .5rem .75rem; padding: .25rem 0 .25rem .75rem; border: 0; border-left: 2px solid var(--accent-soft); border-radius: 0; box-shadow: none; }
.no-js .nav__submenu::before { display: none; }
.no-js .nav__mobile-parent-toggle { display: none; }
@media (max-width: 1100px) {
  .no-js .nav__list { position: static; display: flex; width: auto; max-height: none; overflow: visible; border: 0; padding: 0; box-shadow: none; }
  .no-js .nav__parent-link--desktop { display: flex; }
}

/* --------------------------------------------------------------------------
   Reduceret bevægelse
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .site-header, .sticky-cta, .nav { display: none; }
}

/* Kvittering efter formular-afsendelse */
.form-success {
  padding: 1.5rem;
  border: 1px solid #D3E8E3;
  border-radius: 12px;
  background: #F2FAF8;
  outline: none;
}
.form-success h3 {
  margin: 0 0 .5rem;
  font-size: var(--step-1);
}
.form-success p {
  margin: 0;
}

/* "Mens du venter"-sektion på tak-siden/efter JS-formularafsendelse:
   ligger uden for .form-success (ingen grøn tint), direkte på kortets
   hvide baggrund. Teksten holdes bevidst uden ekstra klasser/styling,
   så den matcher .form-success p's almindelige typografi. */
.tak-inspiration { margin-top: var(--space-4); }
.tak-inspiration > h3 { text-align: center; margin-bottom: var(--space-3); }


/* Handling zoomed iPhone */
html {
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, a, li {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ==========================================================================
   Fejlsider (404 m.fl.)
   ========================================================================== */
.error-page { text-align: center; padding-block: var(--space-5) var(--space-4); }
.error-page__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5.5rem, 18vw, 11rem);
  line-height: 1;
  color: var(--accent-soft);
  margin: 0;
  user-select: none;
}
.error-page__content { max-width: 40rem; margin: 0 auto; margin-top: calc(var(--space-4) * -1); }
.error-page .eyebrow { justify-content: center; }
.error-page__lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}
.error-page__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-style: italic;
  margin-top: var(--space-4);
  margin-bottom: 0;
}
.error-page__more { margin-top: 0; }
.error-page__more > h2 { text-align: center; }