/* ==========================================================================
   Humanova: Designsystem
   Se spec afsnit 7 for begrundelse. Custom properties + base-typografi.
   ========================================================================== */

:root {
  --color-ink: #1C1C1C;
  --color-paper: #FFFFFF;
  --color-surface: #F5F5F3;
  --color-blue: #3A6EA5;
  --color-amber: #D4A843;
  --color-rust: #9B3A2E;
  --color-border: #E8E8E8;

  /* Dæmpede toner og flader, så mørk tilstand kan skifte dem (se sidst i filen) */
  --color-muted: #6B6B6B;
  --color-soft: #555555;
  --color-faint: #9A9A9A;
  --color-rule: #C9C9C9;
  --color-card: #FFFFFF;
  --color-glass: rgba(255, 255, 255, 0.95);
  --color-on-primary: #FFFFFF;

  /* Primær accent, erstattes af --color-rust i markedsanalyse-universet */
  --color-primary: var(--color-blue);

  --max-width: 1100px;
  --gutter: 32px;
}

/* Markedsanalyse-tema: samme base, rust som primær accent i stedet for blue */
.theme-markedsanalyse {
  --color-primary: var(--color-rust);
}

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

/* [hidden] skal altid vinde over display:flex/grid på samme element (fx cookie-banner) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Jost', 'Futura', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink);
  background-color: var(--color-paper);
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Typografi-skala
   -------------------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 400; }

/* Lange danske sammensætninger ("medarbejdertilfredshedsundersøgelse") må deles, så de ikke skubber siden ud til siden på mobil */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

h1 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 300;
  text-align: center;
}

h2 {
  font-size: 26px;
  line-height: 1.25;
  font-weight: 400;
}

h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
}

@media (min-width: 768px) {
  h1 { font-size: 52px; line-height: 1.1; }
  h2 { font-size: 34px; line-height: 1.2; }
  h3 { font-size: 22px; line-height: 1.3; }
}

p { margin: 0 0 1em; }

.meta {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.prose-col {
  max-width: 65ch;
}

/* Rig tekst fra editoren: læsevenlig linjebredde samt luft omkring underoverskrifter, afsnit og lister */
.rich-text { max-width: 720px; }

.rich-text > :first-child { margin-top: 0; }

.rich-text h3 {
  margin: 2.8em 0 0.6em;
  padding-top: 1.6em;
  border-top: 1px solid var(--color-border);
}

.rich-text h4 {
  margin: 1.8em 0 0.8em;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-primary);
}

.rich-text ul,
.rich-text ol {
  margin: 0 0 1.4em;
  padding-left: 20px;
}

.rich-text li { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  padding-block: 60px;
}

@media (min-width: 768px) {
  .section { padding-block: 120px; }
}

/* Hero: divideren under den sidder tættere på teksten */
.hero-section { padding-bottom: 36px; }

@media (min-width: 768px) {
  .hero-section { padding-bottom: 64px; }
}

.section--surface {
  background: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Knapper
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-primary:hover {
  filter: brightness(0.9);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* --------------------------------------------------------------------------
   Kort
   -------------------------------------------------------------------------- */
.card {
  display: block;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 48px;
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color 0.2s ease;
}

.card:hover {
  border-color: var(--color-primary);
}

.card__label {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 12px;
  display: block;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-nav.is-scrolled {
  border-bottom-color: var(--color-border);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}

/* Begge logoer (lyst og mørkt) er tegnet i samme 200 x 43 felt, så de er lige store. Vises 150 px brede i menu og footer. */
.site-nav__logo { flex: none; }
.site-nav__logo img,
.site-footer__inner img {
  width: 150px;
  height: auto;
}

.site-nav__menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__menu a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-ink);
}

.site-nav__menu a.is-active {
  color: var(--color-primary);
}

.site-nav__menu { gap: 34px; align-items: center; }
.site-nav__menu a { white-space: nowrap; }

/* "Ydelser": et menupunkt, der åbner en bred menu med ydelserne i tre grupper */
.site-nav__drop {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0.06em; color: var(--color-ink);
}
.site-nav__drop.is-active { color: var(--color-primary); }
.site-nav__drop svg { width: 12px; height: 12px; transition: transform 0.25s ease; }
.site-nav__drop[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__drop:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 6px; border-radius: 2px; }

.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--color-paper); border-bottom: 1px solid var(--color-border);
  box-shadow: 0 28px 40px -28px rgba(28, 28, 28, 0.38);
}
.nav-panel:not([hidden]) { animation: nav-panel-in 0.22s ease; }
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-panel__line { height: 5px; }
.nav-panel__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; padding-block: 38px 42px; }
.nav-panel__col h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; color: var(--color-muted);
}
.site-nav__menu .nav-panel .nav-panel__col h2 a { display: inline; padding: 0; color: inherit; text-decoration: none; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; white-space: normal; }
.site-nav__menu .nav-panel .nav-panel__col h2 a:hover { color: var(--color-primary); padding: 0; }
.nav-panel__col h2 i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.nav-panel__col ul { list-style: none; margin: 0; padding: 0; }
.site-nav__menu .nav-panel a {
  display: block; padding: 7px 0; font-size: 17px; font-weight: 300; letter-spacing: 0; line-height: 1.35;
  white-space: normal; text-decoration: none; color: var(--color-ink);
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.site-nav__menu .nav-panel a:hover { color: var(--color-primary); padding-left: 6px; }
.site-nav__menu .nav-panel a.is-current { color: var(--color-primary); font-weight: 400; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.breadcrumb a {
  text-decoration: none;
  color: var(--color-muted);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb__sep {
  margin-inline: 8px;
}

/* --------------------------------------------------------------------------
   Proces-trin
   -------------------------------------------------------------------------- */
.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}

.process-step__number {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  display: block;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   FAQ / accordion
   -------------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  padding-block: 20px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item__answer {
  padding-bottom: 20px;
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   CTA-bånd
   -------------------------------------------------------------------------- */
.cta-band {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Artikelkort
   -------------------------------------------------------------------------- */
.article-card {
  text-decoration: none;
  color: var(--color-ink);
  display: block;
}

.article-card__title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 8px;
}

.article-card__excerpt {
  color: var(--color-muted);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Indsatskort (firefeltsmatrix), se app/views/components/priority-matrix.php
   Positionen i matricen afgør accentfarven: tl = muligheder, tr = styrker,
   bl = svagheder, br = udfordringer.
   -------------------------------------------------------------------------- */
.priority-matrix {
  --matrix-angle: -29.4deg;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  margin: 2em 0;
}

.priority-matrix__axis-x,
.priority-matrix__axis-y {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.priority-matrix__axis-y {
  flex-direction: row;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.priority-matrix__axis-x {
  grid-column: 2;
}

.priority-matrix__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16 / 9;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.priority-matrix__diagonal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.priority-matrix__diagonal line {
  stroke: var(--color-rule);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.priority-matrix__diagonal-label {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  transform-origin: 0 0;
  transform: rotate(var(--matrix-angle)) translate(-50%, calc(-100% - 4px));
  font-size: 11px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--color-faint);
  pointer-events: none;
}

.priority-matrix__cell {
  --accent: var(--color-ink);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  text-align: center;
}

/* Tynde skillelinjer mellem de fire felter */
.priority-matrix__cell--tl,
.priority-matrix__cell--bl { border-right: 1px solid var(--color-border); }
.priority-matrix__cell--tl,
.priority-matrix__cell--tr { border-bottom: 1px solid var(--color-border); }

.priority-matrix__cell--tr { --accent: var(--color-blue); }
.priority-matrix__cell--bl { --accent: var(--color-amber); }
.priority-matrix__cell--br {
  --accent: var(--color-rust);
  background: #F9F1F0;
  background: color-mix(in srgb, var(--color-rust) 6%, var(--color-paper));
}

/* Kort accentstreg over titlen */
.priority-matrix__cell::before {
  content: '';
  width: 24px;
  height: 3px;
  margin-bottom: 8px;
  border-radius: 2px;
  background: var(--accent);
}

.priority-matrix__title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
}

.priority-matrix__action {
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-muted);
}

@media (max-width: 560px) {
  .priority-matrix { --matrix-angle: -45deg; gap: 10px 12px; }
  .priority-matrix__grid { aspect-ratio: 1 / 1; }
  .priority-matrix__cell { padding: 16px 10px; }
  .priority-matrix__title { font-size: 17px; }
  .priority-matrix__action { font-size: 13px; }
  .priority-matrix__diagonal-label { display: none; }
}

/* --------------------------------------------------------------------------
   Dividere: farvestregen under hero (components/divider-top.php, spillet i public/js/spil.js)
   og den slanke prikklokke over footeren (components/divider-bottom.php)
   -------------------------------------------------------------------------- */
.dvd-arena { --d: clamp(92px, 14vw, 124px); position: relative; overflow: hidden; margin: 44px 0 40px; }
.dvd-arena--line { height: calc(var(--d) * 0.1137); margin: 40px 0 36px; }
.dvd-arena--game { height: var(--d); }
.dvd-bar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--d) * 0.1137); }
.dvd-ring { position: absolute; left: 50%; top: 0; width: var(--d); height: var(--d); margin-left: calc(var(--d) / -2); display: block; will-change: transform; }
.dvd-fx { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Når spillet er slået til (desktop): banen vokser med kasserne under stregen, og der er plads at skyde i */
.dvd-arena--game.is-live { height: auto; min-height: 330px; margin-bottom: 8px; }
.dvd-arena--game.is-live .dvd-fx { display: block; }
.dvd-arena--game.is-playing { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
/* Første afsnit under spillet må ikke stå så langt nede */
.dvd-arena--game + .section { padding-top: 40px; }

/* Kasserne under stregen: tæller og play til venstre med highscore under, forklaring til højre.
   Ringen svinger mellem de to kolonner. */
.dvd-panels {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(var(--d) * 0.1137 + 20px) 24px 24px; pointer-events: none;
}
.dvd-col { display: grid; gap: 16px; width: clamp(210px, 19vw, 280px); }
.dvd-box {
  padding: 18px 20px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 4px;
  pointer-events: auto; cursor: default; user-select: text;
}
.dvd-box--stats, .dvd-box--intro { min-height: 268px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.dvd-box--intro { width: clamp(210px, 19vw, 280px); justify-content: center; }
.dvd-box--intro p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-soft); }

.dvd-stats { margin: 0; display: grid; gap: 8px; }
.dvd-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.dvd-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dvd-stats dt { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.dvd-stats dd { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* Pladsen under tælleren: play-knap, eller efter sejr navn og gem og "spil igen" */
.dvd-actions { display: grid; gap: 8px; min-height: 92px; align-content: end; }
.dvd-play { width: 100%; text-align: center; border: 0; font-family: inherit; padding: 12px 16px; }
.dvd-arena--game.is-playing .dvd-play { visibility: hidden; }
.dvd-arena--game.is-won .dvd-play { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.dvd-arena--game.is-won .dvd-play:hover { background: var(--color-primary); color: var(--color-on-primary); }
.dvd-save { display: flex; gap: 8px; }
.dvd-save input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; color: var(--color-ink);
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: 2px; padding: 10px 12px;
}
.dvd-save input:focus { outline: 0; border-color: var(--color-primary); }
.dvd-save .btn { border: 0; font-family: inherit; padding: 10px 16px; }
.dvd-note { margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-soft); }

.dvd-box--scores { padding: 16px 20px 14px; }
.dvd-box--scores h3 { margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.dvd-scores { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.dvd-scores li {
  counter-increment: rank; display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  border-top: 1px solid var(--color-border); font-size: 14px; line-height: 1.35;
}
.dvd-scores li:first-child { border-top: 0; }
.dvd-scores li::before { content: counter(rank); flex: none; width: 1.4em; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dvd-scores li.is-new { color: var(--color-primary); font-weight: 500; }
.dvd-scores__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvd-scores__time { flex: none; font-variant-numeric: tabular-nums; }
.dvd-scores .dvd-scores__empty { color: var(--color-muted); }
.dvd-scores .dvd-scores__empty::before { content: none; }

/* Spillet findes kun på desktop: på mobil og touch er ringen bare med på stregen */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .dvd-arena--game.is-live { height: var(--d); min-height: 0; margin-bottom: 40px; }
  .dvd-arena--game .dvd-fx, .dvd-panels { display: none !important; }
  .dvd-arena--game + .section { padding-top: 60px; }
}
.dvd-rule { max-width: var(--max-width); margin: 56px auto 0; padding: 0 var(--gutter); }
.dvd-rule svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Segmentfiguren: en klynge af prikker pr. gruppe, se app/views/components/segments-figure.php
   -------------------------------------------------------------------------- */
.seg-fig { margin: 2em 0; }
.seg-fig__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.seg-cell { text-align: center; }
.seg-cell svg { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto 4px; }
.seg-cell__name { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; }
.seg-cell__pct { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--color-muted); }
.seg-fig__note { margin-top: 20px; font-size: 13px; line-height: 1.4; color: var(--color-muted); text-align: center; }
@media (max-width: 560px) {
  .seg-fig__grid { gap: 22px 10px; }
  .seg-cell__name { font-size: 15px; }
  .seg-cell__pct { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Creative Test: to punktdiagrammer, se app/views/components/creative-test-plot.php
   -------------------------------------------------------------------------- */
.ct-fig { display: grid; gap: 40px; margin: 2em 0; }

.ct-panel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.ct-panel__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-paper);
  background: var(--color-primary);
}

.ct-panel__text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--color-muted); }

.ct-chart { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; }

.ct-chart__axis-x,
.ct-chart__axis-y {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.ct-chart__axis-y { writing-mode: vertical-rl; transform: rotate(180deg); }
.ct-chart__axis-x { grid-column: 2; }

.ct-plot {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.ct-plot__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ct-plot__ideal { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 4 4; }
.ct-plot__trend { stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; }

.ct-plot__ideal-label {
  position: absolute;
  right: 3%;
  top: 3%;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-faint);
  pointer-events: none;
}

.ct-dot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-6px, 50%);
  white-space: nowrap;
}

.ct-dot--left { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), 50%); }

.ct-dot i {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8A8A8A;
  border: 2px solid var(--color-paper);
  box-sizing: content-box;
  margin: -2px;
}

.ct-dot b {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-soft);
  /* Hvid kant, så linjerne ikke skærer gennem ordene */
  text-shadow: 0 0 3px var(--color-paper), 0 0 3px var(--color-paper), 0 0 3px var(--color-paper), 0 0 5px var(--color-paper);
}
.ct-dot--driver i { background: var(--color-primary); }
.ct-dot--driver b { font-weight: 500; color: var(--color-ink); }

.ct-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-soft);
}

.ct-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.ct-legend__dot { width: 12px; height: 12px; border-radius: 50%; background: #8A8A8A; }
.ct-legend__dot--driver { background: var(--color-primary); }
.ct-legend__note { flex-basis: 100%; font-size: 13px; color: var(--color-muted); }

/* Ordliste: kun på små skærme */
.ct-words { display: none; }

@media (max-width: 560px) {
  .ct-fig { gap: 28px; }
  .ct-plot { aspect-ratio: 1 / 1; }
  .ct-plot__ideal-label { display: none; }

  /* Punkterne er nummererede, ordene står i listen under figuren */
  .ct-dot { transform: translate(-50%, 50%); }
  .ct-dot--left { transform: translate(-50%, 50%); }
  .ct-dot b { display: none; }
  .ct-dot i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: -2px;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    color: var(--color-paper);
  }
  .ct-dot i::after { content: attr(data-n); }

  .ct-words {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    margin: 0;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-soft);
  }
  .ct-words li { padding-left: 2px; }
  .ct-words__driver { font-weight: 500; color: var(--color-ink); }
}

/* --------------------------------------------------------------------------
   Indsatskort med punkter: navnene står i hjørnerne af de fire felter, og punkterne er lagt ovenpå
   -------------------------------------------------------------------------- */
.priority-matrix--points .priority-matrix__grid { aspect-ratio: 16 / 10; }
.priority-matrix--points .priority-matrix__cell { align-items: flex-start; justify-content: flex-start; gap: 2px; padding: 12px 14px; text-align: left; }
.priority-matrix--points .priority-matrix__cell::before { margin-bottom: 4px; }
.priority-matrix--points .priority-matrix__title { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.priority-matrix--points .priority-matrix__action { display: none; }
/* Med punkter ville ordene på diagonalen kollidere med punkterne, så teksten forklares i brødteksten i stedet */
.priority-matrix--points .priority-matrix__diagonal-label { display: none; }
.priority-matrix--points .priority-matrix__cell--tr,
.priority-matrix--points .priority-matrix__cell--br { align-items: flex-end; text-align: right; }
.priority-matrix--points .priority-matrix__cell--bl,
.priority-matrix--points .priority-matrix__cell--br { justify-content: flex-end; }

.priority-matrix__point {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 6px;
  transform: translate(-6px, 50%); white-space: nowrap;
}
.priority-matrix__point--left { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), 50%); }
.priority-matrix__point i {
  flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary);
  border: 2px solid var(--color-paper); box-sizing: content-box; margin: -2px;
}
.priority-matrix__point b {
  font-size: 13px; font-weight: 400; line-height: 1.2; color: var(--color-ink);
  text-shadow: 0 0 3px var(--color-paper), 0 0 3px var(--color-paper), 0 0 3px var(--color-paper), 0 0 5px var(--color-paper);
}
.priority-matrix__list { display: none; }
.priority-matrix__badge {
  grid-column: 1 / -1; justify-self: start; margin: 0;
  padding: 3px 12px; border: 1px solid var(--color-primary); border-radius: 99px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
  color: var(--color-primary);
}
.priority-matrix__note { grid-column: 1 / -1; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--color-muted); text-align: center; }

@media (max-width: 560px) {
  .priority-matrix--points .priority-matrix__cell { padding: 8px 8px; }
  .priority-matrix--points .priority-matrix__title { font-size: 10px; letter-spacing: 0.06em; }
  .priority-matrix__point, .priority-matrix__point--left { transform: translate(-50%, 50%); }
  .priority-matrix__point b { display: none; }
  .priority-matrix__point i {
    display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: -2px;
    font-size: 11px; font-style: normal; font-weight: 500; line-height: 1; color: var(--color-on-primary);
  }
  .priority-matrix__point i::after { content: attr(data-n); }
  .priority-matrix__list {
    display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 4px 16px;
    margin: 4px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.4; color: var(--color-soft);
  }
}

/* --------------------------------------------------------------------------
   Fordelingsfigur: stablede søjler fra helt uenig til helt enig, se app/views/components/distribution-figure.php
   Farverne er faste i begge tilstande, så tallene i søjlerne altid kan læses.
   -------------------------------------------------------------------------- */
.dist-fig { margin: 2em 0; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px; font-size: 13px; line-height: 1.3; color: var(--color-soft); }
.dist-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.dist-legend i { width: 12px; height: 12px; border-radius: 2px; }

.dist-seg--1 { background: #E22435; color: #fff; }
.dist-seg--2 { background: #F4A259; color: #1C1C1C; }
.dist-seg--3 { background: #C3C8D0; color: #1C1C1C; }
.dist-seg--4 { background: #9BD36B; color: #1C1C1C; }
.dist-seg--5 { background: #3FAE4A; color: #fff; }

.dist-rows { display: grid; gap: 16px; }
.dist-head, .dist-row { display: grid; grid-template-columns: minmax(150px, 30%) 1fr 48px; gap: 4px 16px; align-items: center; }
.dist-head { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.dist-head span:last-child { text-align: right; }
.dist-row__q { margin: 0; font-size: 14px; line-height: 1.35; }
.dist-row__bar { display: flex; height: 30px; border-radius: 3px; overflow: hidden; background: var(--color-border); }
.dist-seg { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dist-row__score { margin: 0; text-align: right; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.dist-note { margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--color-muted); text-align: center; }

@media (max-width: 560px) {
  .dist-head { display: none; }
  .dist-row { grid-template-columns: 1fr 44px; }
  .dist-row__q { grid-column: 1 / -1; }
  .dist-row__score { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Konkurrentfigurer: splittest, category entry points, opfattet kvalitet og image-profil,
   se app/views/components/competitor-figure.php
   Brandet er blåt, konkurrent A er gul og konkurrent B er rød. Farverne følger lys og mørk tilstand.
   -------------------------------------------------------------------------- */
.cmp-fig { margin: 2em 0; }
.cmp-c--brand { background: var(--color-blue); color: var(--color-paper); }
.cmp-c--rival { background: var(--color-amber); color: #1C1C1C; }
.cmp-c--rival2 { background: var(--color-rust); color: var(--color-paper); }
.cmp-c--other { background: var(--color-border); color: var(--color-soft); }

.cmp-badge {
  display: inline-block; margin: 0 0 14px; padding: 3px 12px;
  border: 1px solid var(--color-primary); border-radius: 99px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
  color: var(--color-primary);
}
.cmp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 18px; font-size: 13px; line-height: 1.3; color: var(--color-soft); }
.cmp-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.cmp-legend i { width: 12px; height: 12px; border-radius: 2px; }
.cmp-note { margin-top: 18px; font-size: 13px; line-height: 1.4; color: var(--color-muted); text-align: center; }
.cmp-sub { margin: 26px 0 12px; font-size: 14px; font-weight: 500; text-align: center; }

.cmp-delta {
  display: inline-block; min-width: 38px; padding: 1px 8px; border-radius: 99px;
  font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--color-soft); background: var(--color-border);
}
.cmp-delta--brand { color: var(--color-ink); background: color-mix(in srgb, var(--color-blue) 28%, transparent); }
.cmp-delta--rival { color: var(--color-ink); background: color-mix(in srgb, var(--color-amber) 38%, transparent); }

/* Splittest: de to reklamer */
.cmp-ads { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.cmp-ads__vs { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }
.cmp-ad__frame {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9;
  border: 1px dashed var(--color-rule); border-radius: 3px; background: var(--color-surface); color: var(--color-faint);
}
.cmp-ad--brand .cmp-ad__frame { border-top: 3px solid var(--color-blue); }
.cmp-ad--rival .cmp-ad__frame { border-top: 3px solid var(--color-amber); }
.cmp-ad__frame svg { width: 38px; height: 38px; }
.cmp-ad__label { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font-size: 14px; line-height: 1.3; }
.cmp-ad__label i { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Splittest: nøgletal */
.cmp-kpi { margin-top: 22px; padding: 18px 16px; border: 1px solid var(--color-border); border-radius: 3px; text-align: center; }
.cmp-kpi__label { margin: 0 0 8px; font-size: 14px; line-height: 1.35; color: var(--color-soft); }
.cmp-kpi__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.cmp-kpi__row p { margin: 0; }
.cmp-kpi__val { font-size: 40px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cmp-kpi__val small { font-size: 16px; color: var(--color-muted); }
.cmp-kpi__val--brand { border-bottom: 3px solid var(--color-blue); justify-self: end; padding: 0 10px 2px; }
.cmp-kpi__val--rival { border-bottom: 3px solid var(--color-amber); justify-self: start; padding: 0 10px 2px; }
.cmp-kpi__delta { font-size: 13px; font-weight: 500; padding: 2px 12px; border-radius: 99px; background: var(--color-border); color: var(--color-soft); }
.cmp-kpi__delta.cmp-delta--brand { background: color-mix(in srgb, var(--color-blue) 28%, transparent); color: var(--color-ink); }
.cmp-kpi__delta.cmp-delta--rival { background: color-mix(in srgb, var(--color-amber) 38%, transparent); color: var(--color-ink); }

/* Splittest: sommerfuglediagram */
.cmp-bf { display: grid; gap: 8px; }
.cmp-bf__row { display: grid; grid-template-columns: 1fr minmax(120px, 26%) 1fr; gap: 12px; align-items: center; }
.cmp-bf__side { display: flex; align-items: center; gap: 8px; height: 22px; }
.cmp-bf__side--brand { flex-direction: row-reverse; }
.cmp-bf__bar { display: block; height: 100%; border-radius: 2px; flex: none; }
.cmp-bf__side b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cmp-bf__word { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; font-size: 13px; line-height: 1.25; text-align: center; }

/* Category entry points */
.cmp-cep { display: grid; gap: 14px; }
.cmp-cep__head, .cmp-cep__row { display: grid; grid-template-columns: minmax(150px, 28%) 1fr 118px; gap: 4px 16px; align-items: center; }
.cmp-cep__head { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.cmp-cep__q { margin: 0; font-size: 14px; line-height: 1.35; }
.cmp-cep__bar { display: flex; height: 30px; border-radius: 3px; overflow: hidden; background: var(--color-border); }
.cmp-seg { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cmp-cep__tag { margin: 0; justify-self: start; padding: 2px 10px; border-radius: 99px; font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; background: var(--color-border); color: var(--color-soft); }
.cmp-tag--brand { background: color-mix(in srgb, var(--color-blue) 28%, transparent); color: var(--color-ink); }
.cmp-tag--rival { background: color-mix(in srgb, var(--color-amber) 38%, transparent); color: var(--color-ink); }
.cmp-tag--open { background: transparent; border: 1px dashed var(--color-muted); color: var(--color-ink); }

/* Opfattet kvalitet: håndvægtsdiagram */
.cmp-qual { display: grid; gap: 12px; }
.cmp-qual__head, .cmp-qual__row { display: grid; grid-template-columns: minmax(140px, 28%) 1fr 56px; gap: 4px 16px; align-items: center; }
.cmp-qual__head { font-size: 12px; letter-spacing: 0.08em; color: var(--color-muted); text-transform: uppercase; }
.cmp-qual__head > span:last-child { text-align: right; }
.cmp-qual__scale { display: flex; justify-content: space-between; letter-spacing: 0; text-transform: none; }
.cmp-qual__scale i { font-style: normal; min-width: 1.4em; text-align: center; }
.cmp-qual__scale i:first-child { text-align: left; }
.cmp-qual__scale i:last-child { text-align: right; }
.cmp-qual__label { margin: 0; font-size: 14px; line-height: 1.35; }
.cmp-qual__row--total .cmp-qual__label { font-weight: 500; }
.cmp-qual__track {
  position: relative; height: 34px;
  background:
    linear-gradient(var(--color-border), var(--color-border)) 0 50% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent calc(25% - 0.5px), var(--color-border) calc(25% - 0.5px) calc(25% + 0.5px), transparent calc(25% + 0.5px) calc(50% - 0.5px), var(--color-border) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px) calc(75% - 0.5px), var(--color-border) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px));
}
.cmp-qual__span { position: absolute; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--color-rule); }
.cmp-qual__dot {
  position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-paper);
}
.cmp-qual__dot b { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cmp-qual__delta { margin: 0; text-align: right; }

/* Image-profil: radar */
.cmp-radar { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; margin: 0 auto 8px; }
.cmp-radar svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp-radar__ring { fill: none; stroke: var(--color-border); stroke-width: 0.3; }
.cmp-radar__axis { stroke: var(--color-border); stroke-width: 0.3; }
.cmp-radar__area--brand { fill: color-mix(in srgb, var(--color-blue) 24%, transparent); stroke: var(--color-blue); stroke-width: 0.7; stroke-linejoin: round; }
.cmp-radar__area--rival { fill: color-mix(in srgb, var(--color-amber) 22%, transparent); stroke: var(--color-amber); stroke-width: 0.7; stroke-linejoin: round; }
.cmp-radar__pt--brand { fill: var(--color-blue); }
.cmp-radar__pt--rival { fill: var(--color-amber); }
.cmp-radar__label { position: absolute; display: flex; align-items: center; gap: 6px; max-width: 20%; font-size: 13px; line-height: 1.2; }
.cmp-radar__label i { display: none; }
.cmp-radar__label b { font-weight: 400; }
.cmp-radar__label--r { transform: translate(0, -50%); text-align: left; }
.cmp-radar__label--l { transform: translate(-100%, -50%); text-align: right; flex-direction: row-reverse; }
.cmp-radar__label--t { transform: translate(-50%, -100%); max-width: 30%; text-align: center; }
.cmp-radar__label--b { transform: translate(-50%, 0); max-width: 30%; text-align: center; }

.cmp-table { margin-top: 14px; font-size: 14px; }
.cmp-table__head, .cmp-table__row { display: grid; grid-template-columns: 1fr 104px 104px 56px; gap: 4px 12px; align-items: center; }
.cmp-table__head { padding-bottom: 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.cmp-table__head span { overflow-wrap: anywhere; hyphens: auto; }
.cmp-table__head span:not(:first-child) { text-align: right; }
.cmp-table__row { padding: 7px 0; border-top: 1px solid var(--color-border); }
.cmp-table__row p { margin: 0; }
.cmp-table__val { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-variant-numeric: tabular-nums; }
.cmp-table__val i { width: 9px; height: 9px; border-radius: 50%; }
.cmp-table__delta { text-align: right; }

@media (max-width: 560px) {
  .cmp-ads { grid-template-columns: 1fr 1fr; }
  .cmp-ads__vs { display: none; }
  .cmp-ad__label { font-size: 13px; }
  .cmp-kpi__val { font-size: 32px; }

  .cmp-bf__row { grid-template-columns: 1fr 1fr; gap: 4px 10px; padding-bottom: 6px; }
  .cmp-bf__word { grid-column: 1 / -1; grid-row: 1; flex-direction: row; justify-content: center; gap: 8px; }
  .cmp-bf__side { grid-row: 2; }

  .cmp-cep__head { display: none; }
  .cmp-cep__row { grid-template-columns: 1fr auto; }
  .cmp-cep__q { grid-column: 1; }
  .cmp-cep__tag { grid-column: 2; grid-row: 1; }
  .cmp-cep__bar { grid-column: 1 / -1; }

  .cmp-qual__head { display: none; }
  .cmp-qual__row { grid-template-columns: 1fr auto; }
  .cmp-qual__label { grid-column: 1; }
  .cmp-qual__delta { grid-column: 2; grid-row: 1; }
  .cmp-qual__track { grid-column: 1 / -1; margin: 0 13px; }

  /* Radaren får nummererede punkter, ordene står i tabellen under */
  .cmp-radar__label b { display: none; }
  .cmp-radar__label i {
    display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--color-ink); color: var(--color-paper); font-style: normal; font-size: 11px; font-weight: 500;
  }
  .cmp-radar__label i::after { content: attr(data-n); }
  .cmp-radar__label--r, .cmp-radar__label--l, .cmp-radar__label--t, .cmp-radar__label--b { transform: translate(-50%, -50%); }
  .cmp-table__head { display: none; }
  .cmp-table__row { grid-template-columns: 1fr 52px 52px 46px; gap: 4px 8px; }
  .cmp-table__name { display: flex; gap: 8px; align-items: baseline; }
  .cmp-table__name::before { content: attr(data-n); }
  .cmp-table__row::before { display: none; }
}

/* --------------------------------------------------------------------------
   Brand tracking-figurer: top of mind, totalkendskab, segmentkort, image-tracking og kendskabstragt,
   se app/views/components/tracking-figure.php. Deler mærkat, fodnote og farver med .cmp-*.
   -------------------------------------------------------------------------- */
.trk-fig { --trk-neutral: color-mix(in srgb, var(--color-faint) 55%, transparent); }
.trk-sub { margin: 0 0 12px; font-size: 14px; font-weight: 500; }
.trk-sub--gap { margin-top: 34px; }

/* Vandrette søjler */
.trk-hbars { display: grid; gap: 7px; }
.trk-hbars__row { display: grid; grid-template-columns: minmax(96px, 30%) 1fr 34px; gap: 12px; align-items: center; }
.trk-hbars__row p { margin: 0; }
.trk-hbars__label { font-size: 14px; line-height: 1.25; }
.trk-hbars__track { height: 22px; }
.trk-hbars__bar { display: block; height: 100%; border-radius: 2px; background: var(--trk-neutral); }
.trk-hbars__val { text-align: right; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.trk-hbars__row.is-brand .trk-hbars__bar { background: var(--color-blue); }
.trk-hbars__row.is-brand .trk-hbars__label, .trk-hbars__row.is-brand .trk-hbars__val { font-weight: 600; }
.trk-hbars__row.is-muted .trk-hbars__bar { background: var(--color-border); }
.trk-hbars__row.is-muted .trk-hbars__label { color: var(--color-muted); }

/* Top of mind: hovedfigur og aldersfordeling */
.trk-tom { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
.trk-cols { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 22px; }
.trk-cols__col { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 24px; }
.trk-cols__col b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.trk-cols__bar { display: block; width: 100%; max-height: 100%; border-radius: 2px 2px 0 0; background: var(--trk-neutral); }
.trk-cols__col i { position: absolute; bottom: 0; font-style: normal; font-size: 12px; color: var(--color-muted); white-space: nowrap; }
.trk-cols__col.is-high .trk-cols__bar { background: var(--color-blue); }
.trk-cols__col.is-low .trk-cols__bar { background: var(--color-rust); }
.trk-cols__col.is-high b, .trk-cols__col.is-low b { padding: 0 6px; border: 1px solid currentColor; border-radius: 99px; }
.trk-cols__avg { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--color-muted); margin-bottom: 24px; pointer-events: none; }
.trk-cols__avg em { position: absolute; left: 0; top: -17px; font-style: normal; font-size: 11px; color: var(--color-muted); }
.trk-cols__hint { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--color-muted); }

/* Totalkendskab: kendskabsgrad pr. måling */
.trk-lv-legend { margin-bottom: 12px; }
.trk-lv--1 { background: var(--color-blue); color: var(--color-paper); }
.trk-lv--2 { background: color-mix(in srgb, var(--color-blue) 72%, var(--color-paper)); color: var(--color-paper); }
.trk-lv--3 { background: color-mix(in srgb, var(--color-blue) 46%, var(--color-paper)); color: var(--color-ink); }
.trk-lv--4 { background: color-mix(in srgb, var(--color-blue) 24%, var(--color-paper)); color: var(--color-ink); }
.trk-lv--5 { background: var(--color-border); color: var(--color-soft); }
.trk-waves { display: grid; gap: 8px; }
.trk-waves__row { display: grid; grid-template-columns: minmax(96px, 22%) 1fr 54px; gap: 12px; align-items: center; }
.trk-waves__row p { margin: 0; }
.trk-waves__label { font-size: 13px; line-height: 1.25; }
.trk-waves__bar { display: flex; height: 30px; border-radius: 3px; overflow: hidden; }
.trk-waves__bar span { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.trk-waves__total { text-align: right; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.trk-waves__total small { font-size: 12px; color: var(--color-muted); }
.trk-waves__hint { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--color-muted); text-align: center; }

/* Segmentkort (varmekort) */
.trk-heat { display: grid; gap: 4px; }
.trk-heat__row { display: grid; gap: 4px; align-items: stretch; }
.trk-heat__head span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); text-align: center; line-height: 1.25; padding-bottom: 2px; align-self: end; overflow-wrap: anywhere; }
.trk-heat__label { margin: 0; display: flex; align-items: center; font-size: 14px; line-height: 1.25; }
.trk-heat__row--ref .trk-heat__label { font-weight: 600; }
.trk-heat__cell { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 46px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.trk-heat__cell b { font-size: 16px; font-weight: 500; line-height: 1.2; }
.trk-heat__cell small { font-size: 11px; line-height: 1.2; color: var(--color-soft); }
.trk-heat__cell--ref { background: var(--color-border); }
.trk-heat__cell--mid { background: color-mix(in srgb, var(--color-faint) 14%, transparent); }
.trk-heat__cell--hi1 { background: color-mix(in srgb, var(--color-blue) 24%, transparent); }
.trk-heat__cell--hi2 { background: color-mix(in srgb, var(--color-blue) 50%, transparent); }
.trk-heat__cell--lo1 { background: color-mix(in srgb, var(--color-rust) 22%, transparent); }
.trk-heat__cell--lo2 { background: color-mix(in srgb, var(--color-rust) 46%, transparent); }

/* Image-tracking: små kurver med nulpunkt */
.trk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 16px; font-size: 13px; line-height: 1.3; color: var(--color-soft); }
.trk-legend__item { display: inline-flex; align-items: center; gap: 7px; }
.trk-legend svg { width: 14px; height: 14px; }
.trk-key { width: 12px; height: 12px; border-radius: 2px; }
.trk-key--now { background: var(--color-blue); }
.trk-key--zero { border: 2px dashed var(--color-ink); }
.trk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.trk-card { padding: 12px 12px 8px; border: 1px solid var(--color-border); border-radius: 3px; }
.trk-card p { margin: 0; }
.trk-card__title { font-size: 13px; line-height: 1.3; color: var(--color-soft); }
.trk-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.trk-card__val { font-size: 26px; font-weight: 300; line-height: 1.1; font-variant-numeric: tabular-nums; }
.trk-card__val small { font-size: 12px; color: var(--color-muted); }
.trk-card__delta { padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 500; line-height: 1.5; background: var(--color-border); color: var(--color-soft); white-space: nowrap; }
.trk-card__delta--up { background: color-mix(in srgb, var(--color-blue) 28%, transparent); color: var(--color-ink); }
.trk-card__delta--down { background: color-mix(in srgb, var(--color-rust) 28%, transparent); color: var(--color-ink); }
.trk-card__foot { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; line-height: 1.3; color: var(--color-muted); }
.trk-spark { display: block; width: 100%; height: auto; }
.trk-grid { stroke: var(--color-border); stroke-width: 0.6; }
.trk-base { stroke: var(--color-muted); stroke-width: 0.8; stroke-dasharray: 3 2.5; }
.trk-camp { stroke: var(--color-amber); stroke-width: 1.1; stroke-dasharray: 1.5 2; }
.trk-line { fill: none; stroke: var(--color-blue); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.trk-dot { fill: var(--color-blue); }
.trk-zero { fill: var(--color-paper); stroke: var(--color-blue); stroke-width: 1.5; }
.trk-now { fill: var(--color-blue); stroke: var(--color-paper); stroke-width: 1; }

/* Kendskabstragt */
.trk-fn { display: grid; gap: 0; max-width: 560px; margin: 0 auto; }
.trk-fn__stage { text-align: center; }
.trk-fn__stage p { margin: 0; }
.trk-fn__name { font-size: 13px; letter-spacing: 0.04em; color: var(--color-soft); margin-bottom: 4px !important; }
.trk-fn__bars { position: relative; height: 46px; }
.trk-fn__zero, .trk-fn__now { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 3px; }
.trk-fn__zero { z-index: 1; border: 2px dashed var(--color-ink); opacity: 0.75; }
.trk-fn__now { display: flex; align-items: center; justify-content: center; background: var(--color-blue); color: var(--color-paper); }
.trk-fn__now b { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.trk-fn__zero-val { margin-top: 3px !important; font-size: 12px; color: var(--color-muted); }
.trk-fn__link { position: relative; height: 92px; display: flex; align-items: center; justify-content: center; }
.trk-fn__shape { position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--color-blue) 30%, transparent), color-mix(in srgb, var(--color-blue) 8%, transparent)); }
.trk-fn__link.is-leak .trk-fn__shape { background: linear-gradient(color-mix(in srgb, var(--color-rust) 34%, transparent), color-mix(in srgb, var(--color-rust) 8%, transparent)); }
.trk-fn__pill { position: relative; margin: 0; padding: 4px 14px; border-radius: 99px; background: var(--color-card); border: 1px solid var(--color-rule); font-size: 13px; line-height: 1.35; text-align: center; }
.trk-fn__pill small { color: var(--color-muted); font-size: 11px; }
.trk-fn__pill em { display: block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-rust); }

@media (max-width: 700px) {
  .trk-tom { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .trk-hbars__row { grid-template-columns: minmax(84px, 34%) 1fr 30px; gap: 8px; }
  .trk-waves__row { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .trk-waves__bar { grid-column: 1 / -1; grid-row: 2; }
  .trk-waves__total { grid-row: 1; grid-column: 2; font-size: 17px; }
  .trk-heat__label { font-size: 12px; }
  .trk-heat__head span { font-size: 9px; letter-spacing: 0; }
  .trk-heat__cell { min-height: 42px; }
  .trk-heat__cell b { font-size: 14px; }
  .trk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .trk-card { padding: 10px 8px 6px; }
  .trk-card__val { font-size: 22px; }
  .trk-fn__link { height: 104px; }
}

/* --------------------------------------------------------------------------
   Holistiske hovedydelser (sidetype hovedydelse): kort over indsatsområder og figurer,
   se app/views/pages/hovedydelse-detail.php og app/views/components/holistic-figure.php
   -------------------------------------------------------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.area-card { position: relative; padding: 26px 26px 24px; border: 1px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: 3px; background: var(--color-card); }
.area-card__num { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; color: var(--color-primary); }
.area-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; }
.area-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-soft); }
.rich-text--wide { max-width: 720px; margin: 56px auto 0; }
.rich-text--wide h3 { margin-top: 2em; }
.rich-text--wide > h3:first-child { margin-top: 0; }

.hf-fig { margin: 2em 0; }

/* Rådgivningsrummet: tre cirkler, der mødes */
.hf-venn { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 0.9; margin: 0 auto; }
.hf-venn__circle { position: absolute; aspect-ratio: 1 / 1; border-radius: 50%; border: 1.5px solid; }
.hf-venn__circle--blue { border-color: var(--color-blue); background: color-mix(in srgb, var(--color-blue) 22%, transparent); }
.hf-venn__circle--amber { border-color: var(--color-amber); background: color-mix(in srgb, var(--color-amber) 26%, transparent); }
.hf-venn__circle--rust { border-color: var(--color-rust); background: color-mix(in srgb, var(--color-rust) 20%, transparent); }
.hf-venn__label { position: absolute; width: 27%; transform: translate(-50%, -50%); text-align: center; }
.hf-venn__label i { display: none; font-style: normal; }
.hf-venn__label b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; line-height: 1.25; }
.hf-venn__label span { display: block; font-size: 12px; line-height: 1.4; color: var(--color-soft); }
.hf-venn__center { position: absolute; left: 50%; top: 54.4%; width: 22%; transform: translate(-50%, -50%); text-align: center; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--color-ink); }
.hf-venn__list { display: none; margin: 14px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--color-soft); }
.hf-venn__list li { margin-bottom: 6px; }
.hf-venn__list b { color: var(--color-ink); font-weight: 500; }
.hf-venn__list-center { list-style: none; margin-left: -22px; padding-top: 4px; font-size: 15px; }

/* Driveranalyse, gruppeforskelle og vægtning: vandrette punktdiagrammer */
.hf-plot { display: grid; gap: 8px; }
.hf-plot__row { display: grid; grid-template-columns: minmax(110px, 28%) 1fr 44px; gap: 12px; align-items: center; }
.hf-plot__row--anova { grid-template-columns: minmax(96px, 22%) 1fr 36px 74px; }
.hf-plot__row--weight { grid-template-columns: minmax(90px, 22%) 1fr 70px; }
.hf-plot__row p { margin: 0; }
.hf-plot__label { font-size: 14px; line-height: 1.3; }
.hf-plot__val { text-align: right; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-plot__track { position: relative; height: 30px; }
.hf-plot__track--axis { height: 16px; }
.hf-plot__grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
.hf-plot__grid.is-zero { background: var(--color-muted); }
.hf-plot__grid.is-avg { background: none; border-left: 1px dashed var(--color-ink); width: 0; opacity: 0.7; }
.hf-plot__tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.hf-plot__bar { position: absolute; top: 5px; bottom: 5px; border-radius: 2px; }
.hf-plot__bar--pos { background: var(--color-blue); opacity: 0.85; }
.hf-plot__bar--neg { background: var(--color-rust); opacity: 0.85; }
.hf-plot__bar--ns { border: 1.5px dashed var(--color-faint); }
.hf-plot__ci { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--color-ink); }
.hf-plot__ci::before, .hf-plot__ci::after { content: ""; position: absolute; top: -5px; width: 2px; height: 12px; background: var(--color-ink); }
.hf-plot__ci::before { left: -1px; }
.hf-plot__ci::after { right: -1px; }
.hf-plot__ci--thick { height: 3px; margin-top: -1.5px; background: var(--color-faint); }
.hf-plot__ci--thick::before, .hf-plot__ci--thick::after { background: var(--color-faint); }
.hf-plot__dot { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; border: 2px solid var(--color-paper); background: var(--color-faint); }
.hf-plot__dot--hi { background: var(--color-blue); }
.hf-plot__dot--lo { background: var(--color-rust); }
.hf-plot__tag { justify-self: start; padding: 1px 9px; border-radius: 99px; font-size: 11px; font-weight: 500; line-height: 1.6; white-space: nowrap; background: var(--color-border); color: var(--color-soft); }
.hf-plot__tag--hi { background: color-mix(in srgb, var(--color-blue) 28%, transparent); color: var(--color-ink); }
.hf-plot__tag--lo { background: color-mix(in srgb, var(--color-rust) 26%, transparent); color: var(--color-ink); }

.hf-plot__track--bar { height: 30px; }
.hf-plot__bar--raw { display: flex; align-items: center; top: 5px; bottom: 5px; background: var(--trk-neutral, color-mix(in srgb, var(--color-faint) 55%, transparent)); }
.hf-plot__bar--raw b { padding-left: 8px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-plot__pop { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--color-ink); }
.hf-plot__pop em { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-plot__w { justify-self: end; padding: 1px 10px; border-radius: 99px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; background: var(--color-border); color: var(--color-ink); white-space: nowrap; }
.hf-plot__w--up { background: color-mix(in srgb, var(--color-amber) 40%, transparent); }
.hf-plot__w--down { background: color-mix(in srgb, var(--color-blue) 26%, transparent); }
.hf-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.hf-key--raw { background: color-mix(in srgb, var(--color-faint) 55%, transparent); }
.hf-key--pop { width: 2px; height: 14px; border-radius: 0; background: var(--color-ink); margin: 0 5px; }
.hf-key--w { width: 20px; border-radius: 99px; background: var(--color-border); }

@media (max-width: 760px) {
  .area-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .area-card { padding: 20px 18px 18px; }
  .hf-venn__label span, .hf-venn__label b, .hf-venn__center { display: none; }
  .hf-venn__label i { display: block; font-size: 30px; font-weight: 300; }
  .hf-venn__list { display: block; }
  .hf-plot__row { grid-template-columns: 1fr 38px; gap: 2px 8px; }
  .hf-plot__row .hf-plot__label { grid-column: 1 / -1; }
  .hf-plot__row--anova { grid-template-columns: 1fr 34px 66px; }
  .hf-plot__row--weight { grid-template-columns: 1fr 66px; }
  .hf-plot__row--axis { grid-template-columns: 1fr 38px; }
  .hf-plot__row--axis.hf-plot__row--anova { grid-template-columns: 1fr 34px 66px; }
  .hf-plot__row--axis > span { display: none; }
}

/* --------------------------------------------------------------------------
   Formularer (kontakt)
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: 20px;
}

.form-row {
  display: grid;
  gap: 20px;
}

@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field__label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-ink);
  background-color: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color 0.2s ease;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--color-rule);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
}

.form-field select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231C1C1C' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Valgmuligheden "Vælg emne" vises dæmpet, indtil der er valgt noget */
.form-field select:invalid { color: var(--color-muted); }
.form-field select option { color: var(--color-ink); }

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

.form__submit {
  justify-self: start;
  margin-top: 8px;
}

.form-alert {
  background: #FBEAE7;
  color: var(--color-rust);
  border: 1px solid var(--color-rust);
  border-radius: 4px;
  padding: 14px 18px;
  font-size: 15px;
  margin-bottom: 24px;
}

.form-alert p { margin: 0; }

.form-alert--success {
  background: #EAF3EC;
  color: #2E7D46;
  border-color: #2E7D46;
}

.form-note {
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 15px;
  color: var(--color-muted);
}

.form-note a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-surface);
  padding-block: 60px;
}

.site-footer__inner {
  display: grid;
  gap: 32px;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.site-footer__links a {
  text-decoration: none;
  font-size: 14px;
}

.site-footer__links a:hover {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Cookie-banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: 640px;
  margin-inline: auto;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner p {
  margin: 0;
  font-size: 14px;
  flex: 1 1 280px;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
}

.cookie-banner__actions .btn {
  padding: 10px 20px;
}

/* --------------------------------------------------------------------------
   Burger-menu (mobil). Knappen er skjult på bred skærm.
   -------------------------------------------------------------------------- */
.site-nav__toggle { display: none; }

@media (max-width: 760px) {
  .site-nav__inner { position: relative; padding-block: 12px; }
  .site-nav__logo { flex: none; }
  .site-nav__logo img { width: 150px; height: auto; max-width: none; }
  .site-nav.is-open { border-bottom-color: var(--color-border); }

  .site-nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; margin-right: -12px; padding: 0 12px;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .site-nav__toggle span { display: block; height: 2px; background: var(--color-ink); border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; }
  .site-nav.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-nav.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
  .site-nav.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav__inner > nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-paper); border-bottom: 1px solid var(--color-border);
    box-shadow: 0 16px 24px -18px rgba(28, 28, 28, 0.35);
  }
  .site-nav.is-open .site-nav__inner > nav { display: block; max-height: calc(100vh - 70px); overflow-y: auto; }

  .site-nav__menu { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 24px 12px; }
  .site-nav__menu a { display: block; padding: 15px 0; font-size: 16px; white-space: normal; border-top: 1px solid var(--color-border); }
  .site-nav__menu > li:first-child > a { border-top: 0; }

  /* "Ydelser" folder grupperne ud midt i burger-menuen */
  .site-nav__drop { display: flex; justify-content: space-between; width: 100%; padding: 15px 0; font-size: 16px; }
  .nav-panel { position: static; box-shadow: none; border: 0; background: none; }
  .nav-panel__line { display: none; }
  .nav-panel__inner { grid-template-columns: 1fr; gap: 4px; padding: 0 0 10px 14px; }
  .nav-panel__col h2 { margin: 12px 0 4px; padding-bottom: 6px; }
  .site-nav__menu .nav-panel a { padding: 6px 0; font-size: 16px; border-top: 0; }
  .site-nav__menu .nav-panel a:hover { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   Kompasset: sigma-ringen som navigation (public/js/kompas.js)
   Forsidens ring, "Relaterede ydelser" og læsefremdriften deler ringens former.
   -------------------------------------------------------------------------- */
/* Forsiden: hero tæt på ringen, så ringen står højt (som i mockuppen) */
.kp-hero { padding-bottom: 24px; }
.kp-compass { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(320px, 600px) minmax(200px, 1fr); gap: 32px; align-items: center; }
.kp-col--l { order: 1; text-align: right; }
.kp-mid { order: 2; }
.kp-col--r { order: 3; }
.kp-col h2 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-bottom: 10px; line-height: 1.4; }
.kp-col h2 a { color: inherit; text-decoration: none; }
.kp-col--l h2 { color: var(--color-blue); }
.kp-col--r h2 { color: var(--color-rust); }

.kp-svc { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--color-border); text-decoration: none; }
.kp-svc:last-child { border-bottom: 1px solid var(--color-border); }
.kp-col--l .kp-svc { flex-direction: row-reverse; }
.kp-svc i { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--c, var(--color-border)); transition: transform 0.2s ease; }
/* Alle punkter er to linjer høje (ét-linjers titler står midt i), så listen ikke ændrer højde ved hover */
.kp-svc span { display: grid; align-content: center; height: 2.6em; font-size: 17px; line-height: 1.3; transition: transform 0.2s ease; }
.kp-svc small { display: block; font-size: 13px; line-height: 1.35; color: var(--color-muted); letter-spacing: 0.02em; margin-top: 2px; }
.kp-svc.active i { transform: scale(1.5); }
.kp-svc.active span { font-weight: 500; }
.kp-col--r .kp-svc.active span { transform: translateX(8px); }
.kp-col--l .kp-svc.active span { transform: translateX(-8px); }
.kp-compass--dim .kp-svc:not(.active) { opacity: 0.5; }

.kp-ringbox { position: relative; width: 100%; user-select: none; -webkit-user-select: none; }
.kp-ringbox svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.kp-seg { cursor: pointer; outline: none; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease; }
.ring--has-active .kp-seg:not(.active) { opacity: 0.3; }
.kp-seg.active { transform: translate(var(--dx), var(--dy)); }
.kp-seg:focus-visible path { stroke: var(--color-ink); stroke-width: 0.9; }
.kp-pointer { fill: var(--color-ink); display: none; }
.kp-turn { display: none; }

.kp-centre { position: absolute; left: var(--cx); top: var(--cy); width: var(--hole); transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.kp-centre > * { animation: kp-pop 0.28s ease both; }
@keyframes kp-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kp-eyebrow { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; color: var(--color-muted); }
.kp-centre h3 { font-size: clamp(18px, 2vw, 26px); font-weight: 400; line-height: 1.2; margin-bottom: 8px; }
.kp-centre p { font-size: 14px; line-height: 1.45; color: var(--color-soft); margin: 0 0 8px; }
.kp-centre .kp-aud { display: block; font-size: 12.5px; color: var(--color-muted); margin-bottom: 10px; line-height: 1.35; }
.kp-go { display: inline-block; font-size: 14px; font-weight: 400; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.kp-centre .kp-go { pointer-events: auto; }

.kp-steps, .kp-detail { display: none; }

/* ---- Mobil / touch: ringen er et hjul, der drejes ---- */
.kp-compass.is-rotate .kp-ringbox svg { touch-action: none; cursor: grab; }
.kp-compass.is-rotate .kp-ringbox svg:active { cursor: grabbing; }
.kp-compass.is-rotate .kp-pointer { display: block; }
.kp-compass.is-rotate .ring--has-active .kp-seg:not(.active) { opacity: 0.55; }
.kp-compass.is-rotate .kp-turn { display: block; opacity: 0.7; animation: kp-turn 1.8s ease-in-out infinite; }
.kp-compass.is-rotate.is-touched .kp-turn { display: none; }
@keyframes kp-turn { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
.kp-compass.is-rotate .kp-centre .kp-go { background: var(--color-ink); color: var(--color-paper); border: 0; padding: 7px 14px; border-radius: 2px; margin-top: 4px; font-size: 13px; letter-spacing: 0.04em; }
/* på mobil står kun navnet i midten; beskrivelsen står under ringen */
/* Teksten skal holde sig inde i hullet (inden for en cirkel, ikke et rektangel): smal blok og skrift, der følger ringens bredde */
.kp-compass.is-rotate .kp-ringbox { container-type: inline-size; }
.kp-compass.is-rotate .kp-centre { width: calc(var(--hole) * 0.94); }
.kp-compass.is-rotate .kp-centre .kp-eyebrow { font-size: clamp(9px, 3.1cqw, 10.5px); letter-spacing: 0.08em; line-height: 1.3; margin-bottom: 4px; }
.kp-compass.is-rotate .kp-centre h3 { font-size: clamp(14px, 5cqw, 17px); line-height: 1.2; margin-bottom: 6px; }
.kp-compass.is-rotate .kp-centre .kp-go { padding: 6px 12px; font-size: 12.5px; }
.kp-compass.is-rotate .kp-centre p,
.kp-compass.is-rotate .kp-centre .kp-aud { display: none; }

.kp-compass.is-rotate .kp-steps { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 6px; }
.kp-steps button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-ink); background: var(--color-card); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-ink); }
.kp-steps button:active { background: var(--color-ink); color: var(--color-paper); }
.kp-steps__mid { display: flex; flex-direction: column; align-items: center; min-width: 150px; line-height: 1.3; }
.kp-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--color-ink); letter-spacing: 0.02em; }
.kp-hint svg { width: 22px; height: 22px; animation: kp-wiggle 1.6s ease-in-out infinite; }
@keyframes kp-wiggle { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } }
.kp-hint.is-gone { display: none; }
.kp-counter { font-size: 13px; letter-spacing: 0.08em; color: var(--color-muted); }
.kp-compass.is-rotate .kp-detail { display: block; text-align: center; max-width: 420px; margin: 6px auto 0; min-height: 56px; }
.kp-detail p { margin: 0 0 4px; font-size: 15px; line-height: 1.45; color: var(--color-soft); }

@media (max-width: 900px) {
  .kp-compass { grid-template-columns: 1fr; gap: 12px; }
  .kp-mid { order: 1; }
  .kp-ringbox { margin: 0 auto; max-width: 460px; }
  .kp-compass.is-rotate .kp-ringbox { max-width: 324px; }
  .kp-col--l, .kp-col--r { text-align: left; }
  .kp-col--l { order: 3; }
  .kp-col--r { order: 4; }
  .kp-col--l .kp-svc { flex-direction: row; }
  .kp-col--l .kp-svc.active span { transform: translateX(8px); }
  .kp-svc span { height: auto; }
  .kp-svc small { display: none; }
  .kp-col h2 { margin-top: 8px; }
  /* kompakt hero, så ringen starter højt og toppen af menuen kan ses under den */
  .kp-hero { padding-block: 14px 0 !important; }
  .kp-hero p { margin-top: 8px !important; font-size: 16px !important; }
  .kp-compass-sec { padding-top: 8px !important; padding-bottom: 48px !important; }
}

.kp-trust p { max-width: 560px; margin: 0 auto 20px; font-size: 20px; }
.kp-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.kp-chips li { border: 1px solid var(--color-border); background: var(--color-card); padding: 6px 16px; border-radius: 99px; font-size: 14px; letter-spacing: 0.04em; }

/* ---------- Læsefremdrift: ringen fyldes op, mens man læser ---------- */
.kp-progress {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; align-items: center; gap: 12px;
  background: var(--color-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--color-border); border-radius: 99px; padding: 6px 20px 6px 8px; box-shadow: 0 10px 30px -14px rgba(28, 28, 28, 0.35);
  opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.kp-progress.is-on { opacity: 1; transform: none; }
.kp-progress svg { width: 80px; height: auto; display: block; overflow: visible; }
.kp-progress__txt { font-size: 14px; line-height: 1.3; font-weight: 400; min-width: 96px; }
@media (max-width: 640px) {
  .kp-progress { right: 10px; bottom: 10px; padding-right: 8px; }
  .kp-progress:not(.is-done) .kp-progress__txt { display: none; }
  .kp-progress svg { width: 66px; }
}

/* ---------- Relaterede ydelser: ringen med "Du er her" ---------- */
.kp-rel { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 64px; align-items: center; }
.kp-rel .kp-ringbox { max-width: 340px; }
.kp-you { margin-top: 10px; text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--color-primary); min-height: 1.6em; }
.kp-rel__list { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; max-width: 520px; }
.kp-rel__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); text-decoration: none; font-size: 18px; transition: padding 0.2s ease, color 0.2s ease; }
.kp-rel__list li:last-child a { border-bottom: 1px solid var(--color-border); }
.kp-rel__list a:hover,
.kp-rel__list a.active { color: var(--color-primary); padding-left: 8px; }
.kp-rel__list a.here { font-weight: 500; pointer-events: none; }
.kp-rel__list a small { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.kp-rel .kp-seg.here path { stroke: var(--color-ink); stroke-width: 1.2; }
@media (max-width: 760px) {
  .kp-rel { grid-template-columns: 1fr; gap: 24px; }
  .kp-rel .kp-ringbox { margin: 0 auto; max-width: 260px; }
}

/* --------------------------------------------------------------------------
   Mørk tilstand. Sættes på <html data-theme="dark"> af skifteknappen i menuen (public/js/main.js)
   eller af enhedens indstilling, se partials/head.php. De fleste farver er variabler,
   så det meste skifter af sig selv; her står paletten og de få steder, der ikke bruger variabler.
   -------------------------------------------------------------------------- */
:root { color-scheme: light; }

[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: #E9ECF1;
  --color-paper: #0E1117;
  --color-surface: #151922;
  --color-border: #2A303B;
  --color-blue: #7DAEE6;
  --color-amber: #E3BC5C;
  --color-rust: #E58A7C;

  --color-muted: #9AA3B2;
  --color-soft: #B7BECB;
  --color-faint: #6E7683;
  --color-rule: #3A4150;
  --color-card: #151922;
  --color-glass: rgba(21, 25, 34, 0.95);
  --color-on-primary: #0E1117;
}

/* Logo: det hvide i mørk tilstand */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

[data-theme="dark"] .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E9ECF1' stroke-width='1.2'/%3E%3C/svg%3E");
}
[data-theme="dark"] .form-alert { background: rgba(229, 138, 124, 0.12); }
[data-theme="dark"] .form-alert--success { background: rgba(111, 207, 142, 0.12); color: #6FCF8E; border-color: #6FCF8E; }
[data-theme="dark"] .site-nav__menu { color: var(--color-ink); }

/* Prikklokkens grundlinje er en SVG-attribut, så den skal overstyres her */
.dvd-rule line { stroke: var(--color-border); }

/* --------------------------------------------------------------------------
   Skifteknap for mørk tilstand: en lille kontakt i menuen. På bred skærm kun kontakten i hjørnet,
   på mobil står den nederst i burger-menuen under Kontakt, adskilt af en tynd streg.
   -------------------------------------------------------------------------- */
.site-nav__theme { display: flex; align-items: center; }

.theme-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 0; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--color-ink); -webkit-tap-highlight-color: transparent;
}
.theme-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-toggle__track {
  position: relative; flex: none; width: 36px; height: 20px; border-radius: 99px;
  border: 1px solid var(--color-muted); transition: background-color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-ink); transition: transform 0.2s ease;
}
.theme-toggle:hover .theme-toggle__track { border-color: var(--color-ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }
[data-theme="dark"] .theme-toggle__thumb { transform: translateX(16px); }

@media (max-width: 760px) {
  .site-nav__theme { border-top: 1px solid var(--color-border); }
  .theme-toggle { width: 100%; justify-content: space-between; padding: 15px 0 6px; }
  .theme-toggle__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 16px; letter-spacing: 0.06em; }
}