/* =========================================================================
   Velkommen til Odense — tjekliste-app
   Designsystem baseret på Odense Kommunes brand (odense.dk).

   Brandfarver:
   - Mørkeblå #072A63   (header, CTA, overskrifter)
   - Lyseblå  #009CE2   (accent, progress, fokus)
   - Sand     #F0EDE8   (baggrund)
   - Grøn     #36864A   (completed, success)
   - Gul      #FFDF00   (highlight)

   Typografi: Arial (body), med serif-fallback. Oswald til display
   (bruges sparsomt — primært til store overskrifter og badges).
   ========================================================================= */

/* =========================================================================
   Oswald — HENTET HJEM, ikke fra Google.

   Her stod et @import fra fonts.googleapis.com. Det betød at hver eneste
   borgers telefon sendte sin IP-adresse til Google ved hver sideindlaesning,
   i en app hvis privatlivstekst siger at intet forlader telefonen. En tysk
   domstol har fundet praecis det i strid med GDPR (LG Muenchen I, 2022), og
   for en kommunal app er det ikke en teoretisk indvending.

   Filerne ligger i assets/fonts/. Subsets: latin og latin-ext (dansk,
   engelsk) og cyrillic (ukrainsk). Vietnamesisk og cyrillic-ext er udeladt —
   de er ballast paa en telefon.

   Oswald er udgivet under SIL Open Font License 1.1, som tillader at vi
   videredistribuerer den. Licensen ligger i assets/fonts/LICENSE.txt og skal
   foelge med.

   font-display: swap staar i hver blok: teksten vises med det samme i en
   reserveskrift og skifter naar filen er hentet. Uden den ville overskrifter
   vaere usynlige de foerste sekunder paa en langsom forbindelse.
   ========================================================================= */

/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/oswald-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/oswald-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/oswald-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/oswald-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/oswald-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* === TYPOGRAFI === */
  --font-sans: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Oswald', Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* === ODENSE BRAND === */
  /* Officielle Odense-farver fra designguide (Pantone → HTML) */
  --brand-navy: #002e5e;         /* Pantone 648C — primær mørkeblå (officiel) */
  --brand-navy-dark: #001e3f;    /* mørkere til hover (afledt) */
  --brand-navy-light: #1a4980;   /* lysere til gradient (afledt) */
  --brand-sky: #0096ce;          /* Pantone 801C — lyseblå accent (officiel) */
  --brand-sky-dark: #00708d;     /* Pantone 7705C — mørkeblå-grøn (officiel hover) */
  --brand-sky-light: #bbd7f3;    /* Pantone 277C — lys blå tint (officiel) */
  /* Neutrale + accenter — alle officielle fra Odense designguide */
  --brand-sand: #f0f0ed;         /* Warm Grey 1C — officiel neutral */
  --brand-sand-dark: #b1aba5;    /* Warm Grey 4C — officiel mørk neutral */
  --brand-green: #009149;        /* Pantone 3405C — officiel grøn */
  --brand-green-light: #bfd8b9;  /* Pantone 7728C-light — officiel lys grøn */
  --brand-yellow: #ffdc00;       /* Pantone 107C — officiel gul */
  --brand-yellow-light: #fbecb9; /* Pantone 7404C — officiel lys gul */
  --brand-red: #a7172b;          /* Pantone 187C — officiel rød (til error) */
  --brand-cream: #f0f0ed;        /* alias til warm grey 1C */

  /* === NEUTRALER === */
  --neutral-50: #fafaf8;
  --neutral-100: #f5f4f0;
  --neutral-200: #e8e5e0;
  --neutral-300: #d4d0c8;
  --neutral-400: #a3a09a;
  --neutral-500: #737069;
  --neutral-600: #525049;
  --neutral-700: #3f3d38;
  --neutral-800: #262520;
  --neutral-900: #171612;

  /* === SEMANTISK (genbrug af brand) === */
  --color-ink: var(--neutral-800);
  --color-ink-soft: var(--neutral-600);
  --color-ink-muted: var(--neutral-500);
  --color-primary: var(--brand-navy);
  --color-primary-hover: var(--brand-navy-dark);
  --color-accent: var(--brand-sky);
  --color-accent-hover: var(--brand-sky-dark);
  --color-success: var(--brand-green);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  /* Body: Odense's officielle Warm Grey 1C (#f0f0ed).
     Tekst står ALDRIG direkte på denne farve — kun cards holder brødtekst. */
  --color-bg: #f0f0ed;
  --color-surface: #ffffff;
  --color-surface-alt: var(--brand-cream);

  /* === SPACING === */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgb(7 42 99 / 0.05);
  --shadow: 0 1px 3px 0 rgb(7 42 99 / 0.08), 0 1px 2px -1px rgb(7 42 99 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(7 42 99 / 0.10), 0 2px 4px -2px rgb(7 42 99 / 0.06);
  --shadow-lg: 0 10px 20px -5px rgb(7 42 99 / 0.12), 0 4px 8px -4px rgb(7 42 99 / 0.08);
  --shadow-xl: 0 20px 30px -8px rgb(7 42 99 / 0.15);

  /* === RADIUS === */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;

  /* === LAYOUT === */
  --content-max: 840px;
  --header-height-top: 44px;
  --header-height-main: 64px;
}

/* =========================================================================
   Reset og base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem); font-weight: 500; }
h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); font-weight: 500; }
h3 { font-size: var(--text-lg); font-weight: 600; }

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--brand-sky);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button { font-family: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  font-weight: 600;
}
.skip-link:focus { top: 0; }

/* =========================================================================
   Header — replikerer Odense.dk's to-lags struktur
   Top: mørkeblå stribe med logo + utility-nav
   Bund: lyseblå stribe med hovednavigation
   ========================================================================= */

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--shadow);
}

.app-header__top {
  background: var(--brand-navy);
  color: #fff;
  min-height: var(--header-height-top);
  /* Safe-area: iPhone-notch og status-bar i standalone PWA-mode skal ikke skære header */
  padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) calc(var(--space-4) + env(safe-area-inset-right, 0px)) var(--space-2) calc(var(--space-4) + env(safe-area-inset-left, 0px));
}

.app-header__top-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.app-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: 0;
  color: inherit;
  padding: var(--space-1) 0;
  cursor: pointer;
}
.app-header__logo img {
  height: 32px;
  width: auto;
  display: block;
}
.app-header__logo:hover { opacity: 0.85; }

.app-header__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  white-space: nowrap;
  margin-right: auto;
}

/* ==========================================================================
   Søge-overlay
   ========================================================================== */
.app-header__search-trigger {
  /* Genvejen. Bevidst diskret: bjaelken har én raekke, og alt der fylder her,
     fylder paa bekostning af Forloeb, Hjaelp og sprogvaelgeren. Indgangen er
     .home-search paa forsiden. */
  background: transparent;
  border: 0;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  opacity: 0.85;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-header__search-trigger:hover { opacity: 1; background: rgb(255 255 255 / 0.1); }

/* ---- Soegefeltet paa forsiden ----
   Formen goer arbejdet: fuld bredde, hvid flade, ramme og en lup i venstre
   side. Det ligner et felt, og derfor bliver det brugt. */
.home-search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-search:hover {
  border-color: var(--brand-navy);
  box-shadow: var(--shadow, 0 2px 8px rgb(0 0 0 / 0.08));
}
.home-search svg { flex: none; color: var(--brand-navy); opacity: 0.75; }
.home-search__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 20px;
  animation: fadeIn 0.15s ease;
}
.search-overlay[hidden] { display: none; }
.search-overlay__panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.25);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-overlay__inputrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-soft);
}
.search-overlay__input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
  background: transparent;
}
.search-overlay__close {
  background: transparent;
  border: 0;
  color: var(--color-ink-soft);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
}
.search-overlay__close:hover { background: var(--color-border); }
.search-overlay__results {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}
.search-overlay__hint {
  padding: 24px;
  text-align: center;
  color: var(--color-ink-muted);
  font-size: 14px;
}
.search-overlay__result {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  font: inherit;
  color: var(--color-ink);
}
.search-overlay__result:hover,
.search-overlay__result.is-selected {
  background: var(--brand-sky-light);
}
.search-overlay__result-path {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-bottom: 2px;
}
.search-overlay__result-text {
  font-size: 14px;
  line-height: 1.4;
}
.search-overlay__result-text mark {
  background: var(--brand-yellow);
  color: var(--color-ink);
  padding: 0 2px;
  border-radius: 2px;
}
.search-overlay__footer {
  padding: 8px 18px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-ink-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.search-overlay__footer kbd {
  padding: 1px 5px;
  background: var(--color-border);
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  color: var(--color-ink);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   "Nyt siden"-badge — vises på trin-kort på forsiden hvis der er noget
   opdateret efter sidste besøg
   ========================================================================== */
.timeline-item__new-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--brand-yellow);
  color: var(--brand-navy);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}
.step-updated-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-left: 8px;
}

/* ==========================================================================
   Guide-modul (beslutningstræ)
   ========================================================================== */
.home-guides {
  /* Ligger direkte under hero — .view'ets gap er separation nok.
     Ingen ekstra margin, så guides fremstår som det første handlingstilbud. */
  margin-top: 0;
}
.home-guides h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-4);
  color: var(--brand-navy);
}
.home-guides__grid {
  display: grid;
  gap: var(--space-3);
}
.home-guides__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  font: inherit;
  color: inherit;
}
.home-guides__card:hover {
  border-color: var(--brand-sky);
  box-shadow: var(--shadow);
  transform: translateX(2px);
}
.home-guides__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-sky-light);
  color: var(--lokal-accent, var(--brand-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-guides__body { flex: 1; min-width: 0; }
.home-guides__title {
  font-weight: 600;
  color: var(--color-ink);
  font-size: var(--text-base);
  margin-bottom: 2px;
}
.home-guides__desc {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.home-guides__arrow { color: var(--brand-sky); flex-shrink: 0; }

.view--guide {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 720px;
  margin: 0 auto;
}
.guide-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.guide-header h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin: 0;
  color: var(--brand-navy);
}
.guide-header__description {
  color: var(--color-ink-soft);
  margin: 0;
  line-height: 1.5;
}
.guide-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--brand-sky-dark);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  cursor: pointer;
  align-self: flex-start;
}
.guide-header__back:hover { color: var(--brand-navy); }

.guide-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.guide-breadcrumb__sep { opacity: 0.5; }
.guide-breadcrumb__step:last-child {
  color: var(--brand-navy);
  font-weight: 600;
}

.guide-node {
  padding: var(--space-6);
}
.guide-node h2 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 var(--space-4);
  color: var(--brand-navy);
  font-size: var(--text-xl);
  line-height: 1.3;
}
.guide-node__hint {
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}
.guide-node__description {
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: var(--space-3) 0;
}

.guide-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.guide-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: all 0.15s;
}
.guide-option:hover {
  border-color: var(--brand-sky);
  background: var(--brand-sky-light);
}
/* Overskrift og hjælpetekst står SIDE OM SIDE, som designet lægger op til
   ("Bolig  Kontrakt, indflytning, skader").

   De ligger i en egen søjle ved siden af pilen. Lå de som selvstændige
   flex-børn af knappen, krævede hjælpeteksten (width:100%) hele bredden og
   klemte overskriften ned i en smal søjle — så "Digital post / MitID" brækkede
   over tre linjer.

   Overskriften må aldrig brække: den er det man scanner efter. Hjælpeteksten
   må gerne, og på en smal skærm falder den ned på sin egen linje i stedet for
   at presse pilen ud over kanten. */
.guide-option__tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-3);
}
.guide-option__label {
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}
.guide-option__hint {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  flex: 1 1 auto;
  min-width: 0;
}
.guide-option__arrow {
  color: var(--brand-sky);
  font-size: 1.2em;
  flex-shrink: 0;
}

.guide-next {
  margin-top: var(--space-3);
  min-width: 120px;
}

/* Result-node — anbefaling */
.guide-node--result {
  border-left: 4px solid var(--brand-sky);
}
.guide-node--result[data-tone="red"] { border-left-color: var(--brand-red, #a7172b); }
.guide-node--result[data-tone="orange"] { border-left-color: #d97706; }
.guide-node--result[data-tone="green"] { border-left-color: var(--brand-green); }
.guide-node--result[data-tone="blue"] { border-left-color: var(--brand-sky); }

.guide-result__badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--brand-sky-light);
  color: var(--brand-navy);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.guide-node--result[data-tone="red"] .guide-result__badge {
  background: #fdecef;
  color: var(--brand-red, #a7172b);
}
.guide-node--result[data-tone="orange"] .guide-result__badge {
  background: #ffe9d1;
  color: #b45309;
}
.guide-node--result[data-tone="green"] .guide-result__badge {
  background: var(--brand-green-light);
  color: #006c37;
}

.guide-result__lead {
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  line-height: 1.4;
}
.guide-result__description {
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}
.guide-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.guide-result__referral {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt, #f9fafb);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-ink);
}
.guide-result__referral strong {
  display: block;
  color: var(--brand-navy);
  margin-bottom: 2px;
}
.guide-restart {
  display: block;
  margin-top: var(--space-5);
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--color-border-strong, #cbd0d8);
  border-radius: var(--radius-full);
  color: var(--color-ink-soft);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.guide-restart:hover {
  background: var(--brand-sky-light);
  color: var(--brand-navy);
  border-color: var(--brand-sky);
  border-style: solid;
}

/* ==========================================================================
   Fagord / ordbog — automatisk understregning af nøgleord med tap-forklaring
   ========================================================================== */
.glossary-term {
  border-bottom: 1px dotted var(--brand-sky);
  cursor: help;
  position: relative;
}
.glossary-term:hover,
.glossary-term:focus { color: var(--brand-navy); }
.glossary-tooltip {
  position: fixed;
  z-index: 300;
  max-width: 300px;
  background: var(--brand-navy);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  pointer-events: none;
}
.glossary-tooltip strong {
  display: block;
  color: var(--brand-yellow);
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Første-gangs-demo: gør ordet tydeligere mens tooltip'en står åben af sig selv */
.glossary-term--hint {
  background: var(--brand-yellow);
  color: var(--brand-navy);
  border-radius: 3px;
  padding: 0 3px;
  border-bottom-style: solid;
  animation: glossaryHintPulse 1.4s ease-in-out 2;
}
@keyframes glossaryHintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(0 150 206 / 0.5); }
  50%      { box-shadow: 0 0 0 6px rgb(0 150 206 / 0); }
}
.glossary-tooltip__hint {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgb(255 255 255 / 0.25);
  font-size: 12px;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .glossary-term--hint { animation: none; }
}

/* ==========================================================================
   Brand-feature-flags: brand.js sætter body-klasser som .feature-<navn>-off
   når en feature er slået fra i brand.config.json. Vi skjuler de tilhørende
   UI-elementer via CSS — så templaten er styret af config, ikke kode.
   ========================================================================== */
body.feature-language-switcher-off .lang-picker { display: none !important; }
body.feature-install-pwa-off .install-btn,
body.feature-install-pwa-off .install-installed-note { display: none !important; }
body.feature-translation-banner-off .translation-notice { display: none !important; }
body.feature-editable-contacts-off .contact-edit,
body.feature-editable-contacts-off .contact-reset { display: none !important; }

/* Sprog-skifter i header */
.lang-picker { position: relative; }
.lang-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-full);
  color: #fff;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lang-picker__trigger:hover,
.lang-picker__trigger:focus-visible { background: rgb(255 255 255 / 0.2); border-color: rgb(255 255 255 / 0.5); }
.lang-picker__trigger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-picker__flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
  flex-shrink: 0;
  display: inline-block;
}
.lang-picker__code { line-height: 1; }
.lang-picker__chevron { transition: transform 0.15s; }
.lang-picker[data-open="true"] .lang-picker__chevron { transform: rotate(180deg); }
.lang-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  color: #111;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1);
  min-width: 180px;
  z-index: 100;
}
.lang-picker__menu li { margin: 0; }
.lang-picker__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: var(--text-sm);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.lang-picker__menu .lang-picker__flag {
  width: 24px;
  height: 17px;
}
.lang-picker__menu button:hover,
.lang-picker__menu button:focus-visible {
  background: rgb(0 0 0 / 0.06);
  outline: none;
}
.lang-picker__menu li[aria-selected="true"] button {
  background: rgb(7 42 99 / 0.08);
  font-weight: 600;
}

/* Banner for ikke-reviewet oversættelse */
.translation-notice {
  background: #fff8e1;
  color: #6b4f00;
  border: 1px solid #ffe082;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
}

.app-header__main {
  background: var(--brand-sky);
  min-height: var(--header-height-main);
}

.app-header__main-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height-main);
}

.app-header__title {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--text-lg), 1rem + 1vw, var(--text-2xl));
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

.app-header__nav {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.app-header__nav-btn {
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.app-header__nav-btn:hover { background: rgb(255 255 255 / 0.15); }
.app-header__nav-btn.is-active { background: rgb(255 255 255 / 0.22); }

/* =========================================================================
   Main
   ========================================================================= */

.app-main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
  outline: none;
}

.view {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: fadeIn 250ms ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header h1 { margin-bottom: var(--space-1); }

/* =========================================================================
   Footer
   ========================================================================= */

.app-footer {
  background: var(--brand-navy);
  color: rgb(255 255 255 / 0.85);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  margin-top: auto;
}
.app-footer p { margin: 0; }
.app-footer a { color: #fff; text-decoration: underline; }

/* =========================================================================
   Home / Hero
   ========================================================================= */

.home-hero {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%);
  color: #fff;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.home-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgb(0 156 226 / 0.35) 0%, transparent 70%);
  pointer-events: none;
}

.home-hero h1 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.5rem + 2vw, 2.75rem);
  font-weight: 500;
  margin-bottom: var(--space-2);
  position: relative;
}

.home-hero__subtitle {
  color: rgb(255 255 255 / 0.88);
  font-size: var(--text-lg);
  max-width: 52ch;
  margin: 0;
  position: relative;
}

/* Lead-tekst under hero — kort forklaring af hvad app'en er */
.home-lead {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-ink);
  max-width: 60ch;
  margin: 0;
}

/* "Næste for dig" — erstatter den gamle procent-progress.
   Ét konkret punkt i stedet for en procentsats: billigere at afkode under stress. */
.next-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.next-action__label {
  margin: 0;
  font-weight: 700;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.next-action__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  /* Hvid flade, accenten som kant. Tekst på en farvet flade er sværere at
     læse, ikke nemmere (Tomas, 15. september). Farven hører til knapper,
     ikoner og mærker — ikke til paneler man skal læse i. */
  background: var(--color-surface);
  border: 2px solid var(--brand-sky-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: all 0.15s;
}
.next-action__card:hover {
  box-shadow: var(--shadow);
  transform: translateX(2px);
}
.next-action__card:disabled {
  cursor: default;
  transform: none;
  box-shadow: none;
}

.next-action__body { flex: 1; min-width: 0; }

.next-action__text {
  display: block;
  font-weight: 600;
  color: var(--color-ink);
  font-size: var(--text-base);
}

.next-action__where {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.next-action__arrow { color: var(--brand-navy); flex-shrink: 0; }

.next-action__count {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Alt krydset af — rolig grøn i stedet for handlings-blå */
.next-action--done .next-action__card {
  background: var(--brand-green-light);
  border-color: var(--color-success);
}
.next-action--done .next-action__arrow { display: none; }

/* "Sidst opdateret" nederst på et trin — diskret tillids-signal, ikke et blikfang */
.step-updated {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Privatlivsnote under timeline — flyttet ud af den gamle progress-boks */
.home-privacy {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* Punktet man kom fra via "Næste for dig" — kort blink så det er til at finde */
.checklist__item--highlight {
  animation: checklistPulse 2.4s ease-out;
  border-radius: var(--radius-md);
}
@keyframes checklistPulse {
  0%, 100% { background: transparent; }
  10%, 60% { background: var(--brand-sky-light); }
}
@media (prefers-reduced-motion: reduce) {
  .checklist__item--highlight { animation: none; outline: 2px solid var(--brand-sky); }
}

/* Timeline */
.timeline-title {
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: var(--space-2) 0 0;
  color: var(--color-ink-muted);
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Vertikal linje gennem trin-markørerne */
.timeline::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 38px;
  bottom: 38px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-sky) 0%, var(--color-border) 100%);
  z-index: 0;
  opacity: 0.5;
}

.timeline-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 52px);
  position: relative;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: fadeIn 300ms ease-out both;
}
.timeline-item:nth-child(1) { animation-delay: 40ms; }
.timeline-item:nth-child(2) { animation-delay: 80ms; }
.timeline-item:nth-child(3) { animation-delay: 120ms; }
.timeline-item:nth-child(4) { animation-delay: 160ms; }

.timeline-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-sky);
}

.timeline-item__marker {
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  /* Stedets egen farve, hvis den har valgt én af organisationens godkendte
     (brand.js: --lokal-accent). Ellers organisationens egen, som hidtil. */
  background: var(--lokal-accent, var(--brand-navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  z-index: 1;
  box-shadow: 0 0 0 4px var(--color-surface), var(--shadow-sm);
  transition: background var(--transition-fast);
}
.timeline-item--done .timeline-item__marker {
  background: var(--brand-green);
}
.timeline-item--done .timeline-item__marker::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  position: absolute;
}
.timeline-item--done .timeline-item__marker > span { display: none; }

.timeline-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.timeline-item__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-sky-dark);
}

.timeline-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.timeline-item__short {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.timeline-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

/* Gennemførelsen er grøn hele vejen — ikke først når trinet er klaret. Den
   stod i husets accentfarve, og hos en kunde med orange accent (Nordhavn)
   lignede en halvt klaret bjælke en advarsel (Tomas, 15. september). */
.timeline-item__progress-bar {
  flex: 1;
  height: 6px;
  background: var(--brand-green-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.timeline-item__progress-fill {
  height: 100%;
  background: var(--brand-green);
  border-radius: var(--radius-full);
  transition: width var(--transition);
}

.timeline-item__count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.timeline-item__arrow {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-sky);
  opacity: 0.6;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.timeline-item:hover .timeline-item__arrow {
  transform: translateY(-50%) translateX(4px);
  opacity: 1;
}

/* =========================================================================
   Step view
   ========================================================================= */

.view__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  color: var(--brand-sky-dark);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) 0;
  cursor: pointer;
  align-self: flex-start;
  transition: color var(--transition-fast);
}
.view__back:hover { color: var(--color-primary); }

/* Home-ikon (inline med titlen — ingen rund knap, bare ikon) */
.step-header__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}
.step-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--brand-navy);
  border: 0;
  padding: 4px;
  margin-right: 2px;
  cursor: pointer;
  transition: color var(--transition-fast), transform 0.1s;
  flex-shrink: 0;
  opacity: 0.85;
}
.step-home:hover { color: var(--brand-sky-dark); opacity: 1; }
.step-home:active { transform: scale(0.94); }

/* Reset-knap til tjekliste (lille ikon-knap) */
.section__header { flex-wrap: wrap; }
.checklist-reset {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--color-ink-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0.7;
}
.checklist-reset:hover { background: #fff5f5; color: #c0392b; border-color: #f5c6cb; opacity: 1; }
.checklist-reset:active { transform: scale(0.94); }

/* CTA-knap på tjekliste-punkter */
.checklist__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
}
.checklist__text-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.checklist__text-row .checklist__text { flex: 1; }

/* Foldbar uddybning */
.checklist__detail-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--color-ink-soft);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  margin-top: -1px;
  transition: all var(--transition-fast);
}
.checklist__detail-toggle:hover {
  background: var(--brand-sky-light);
  color: var(--brand-navy);
  border-color: var(--brand-sky);
}
.checklist__detail-toggle svg { transition: transform 0.2s ease; }
.checklist__detail-toggle.is-open svg { transform: rotate(180deg); }
.checklist__detail {
  margin-top: 2px;
  padding: 10px 12px;
  /* Hvid med kant — se .next-action__card. */
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--brand-sky-light);
  border-left: 3px solid var(--brand-sky);
  border-radius: 6px;
  font-size: var(--text-sm);
  line-height: 1.5;
  width: 100%;
}

/* Gruppe-overskrift inde i checklist (for opdelte tjeklister) */
.checklist__group-title {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--brand-navy);
  border: 0;
  background: transparent;
  cursor: default;
}
.checklist__group-title:first-child { margin-top: 0; }
.checklist__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  color: var(--brand-navy);
  border: 1px solid var(--brand-sky);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.checklist__cta:hover { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.checklist__cta::after {
  content: "↗";
  font-size: 0.9em;
  opacity: 0.7;
}

/* Afkrydsede punkter — bliver grå men bliver på pladsen, så de andre får fokus */
.checklist__item {
  transition: opacity 0.25s ease, background 0.25s ease;
}
.checklist__item--done {
  opacity: 0.55;
}
.checklist__item--done .checklist__text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--color-ink-soft);
}

/* Install-knap (PWA "Læg på hjemmeskærm") */
.install-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
}
.install-installed-note {
  color: var(--brand-green);
  font-weight: 600;
  margin-top: var(--space-3);
}
/* Når appen kører i standalone (allerede installeret), skjul knappen + vis "✓" */
body.app-installed .install-btn { display: none; }
body.app-installed .install-installed-note { display: block !important; }
body.app-installed .install-installed-note[hidden] { display: block !important; }

/* "Vis afkrydsede"-toggle-knap (ikke et tjekliste-punkt, men en knap i listen) */
.checklist__toggle-wrap {
  list-style: none;
  padding: 0;
  margin-top: var(--space-2);
  background: transparent;
  border: 0;
  display: flex;
  justify-content: center;
}
.checklist__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  color: var(--color-ink-soft);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.checklist__toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
  border-color: var(--brand-sky);
  border-style: solid;
}

.step-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Tidl. padding-bottom + border-bottom skabte unødigt mellemrum til intro */
  margin-bottom: calc(var(--space-3) * -1);
}

.step-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  background: var(--brand-sky-light);
  color: var(--brand-navy);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.step-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* Tæmmet — var clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) — for stor i toppen */
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
}

.step-header__short {
  margin: 0;
  color: var(--color-ink-soft);
  /* Var text-lg — gør den til samme niveau som intro så det føles som ét hierarki */
  font-size: var(--text-base);
  line-height: 1.5;
  max-width: 60ch;
}

.step-intro {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 65ch;
}
.step-intro p { margin: 0 0 var(--space-3); }
.step-intro p:last-child { margin-bottom: 0; }

/* Section card wrapper til indhold på trinside */
.section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.section__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--brand-sky-light);
  color: var(--lokal-accent, var(--brand-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section h2 {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

/* Video block */
.video-block { padding: 0; overflow: hidden; position: relative; }

/* Rigtig video-afspiller */
.video-player {
  background: #000;
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
  position: relative;
}
/* Ekstern afspiller (YouTube/Vimeo). Posterbilledet ligger som baggrund
   indtil borgeren trykker play — først da hentes iframen. */
.video-embed {
  background-size: cover;
  background-position: center;
}
.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-embed__note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 8px 12px;
  background: rgb(0 0 0 / 0.65);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.video-player video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}

/* Stor play-knap-overlay oven på første frame */
.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.35));
  border: 0;
  cursor: pointer;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: var(--text-base);
  transition: background 0.2s, opacity 0.25s;
  padding: 0;
}
.video-play-overlay:hover,
.video-play-overlay:focus-visible {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.45));
  outline: none;
}
.video-play-overlay:focus-visible .video-play-overlay__circle {
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.5);
}
.video-play-overlay__circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.15);
  border: 3px solid rgb(255 255 255 / 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.15s, background 0.15s;
}
.video-play-overlay__circle svg { margin-left: 4px; /* visuelt centrere trekanten */ }
.video-play-overlay:hover .video-play-overlay__circle {
  transform: scale(1.06);
  background: rgb(255 255 255 / 0.25);
}
.video-play-overlay__label {
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
  letter-spacing: 0.02em;
}
.video-player[data-playing="true"] .video-play-overlay {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 768px) {
  .video-play-overlay__circle { width: 72px; height: 72px; }
  .video-play-overlay__circle svg { width: 30px; height: 30px; }
  .video-play-overlay__label { font-size: var(--text-sm); }
}

/* Roter-tip — vises kun på små skærme i portrait når video er klar */
.video-rotate-hint {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--brand-navy, #072a63);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  border-bottom: 1px solid rgb(255 255 255 / 0.15);
}
.video-rotate-hint svg {
  flex-shrink: 0;
  animation: rotate-hint-wobble 2s ease-in-out infinite;
}
@keyframes rotate-hint-wobble {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(15deg); }
}
@media (max-width: 768px) and (orientation: portrait) {
  .video-block[data-video-ready="true"] .video-rotate-hint { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .video-rotate-hint svg { animation: none; }
}

.video-placeholder {
  color: #fff;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 60%, var(--brand-sky-dark) 100%);
  overflow: hidden;
}
/* Sikrer at [hidden] vinder over display:flex ovenfor */
.video-placeholder[hidden],
.video-placeholder__caption[hidden],
.video-player[hidden] { display: none !important; }
.video-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(0 156 226 / 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgb(255 255 255 / 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.video-placeholder__inner {
  text-align: center;
  padding: var(--space-6);
  position: relative;
  z-index: 1;
}
.video-placeholder__play {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.15);
  border: 2px solid rgb(255 255 255 / 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  backdrop-filter: blur(8px);
  transition: transform var(--transition);
}
.video-placeholder:hover .video-placeholder__play {
  transform: scale(1.06);
  background: rgb(255 255 255 / 0.22);
}
.video-placeholder__label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  letter-spacing: 0.005em;
}
.video-placeholder__duration {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.video-placeholder__caption {
  background: var(--color-surface-alt);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}
.video-placeholder__caption-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--color-primary);
}
.video-placeholder__caption-note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Checklist */
.checklist-block__help {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  max-width: 60ch;
}
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.checklist__item:hover {
  background: var(--brand-sky-light);
  border-color: var(--brand-sky);
}
.checklist__item input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 2px solid var(--brand-navy);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  margin: 2px 0 0;
  flex-shrink: 0;
  background: #fff;
  transition: all var(--transition-fast);
}
.checklist__item input[type="checkbox"]:hover {
  border-color: var(--brand-sky);
}
.checklist__item input[type="checkbox"]:checked {
  background: var(--brand-green);
  border-color: var(--brand-green);
}
.checklist__item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.checklist__item--done {
  background: var(--brand-green-light);
  border-color: #c3dcca;
}
.checklist__item--done:hover { background: #d7e8db; border-color: var(--brand-green); }
.checklist__item--done .checklist__label {
  color: var(--color-ink-muted);
  text-decoration: line-through;
  text-decoration-color: var(--brand-green);
  text-decoration-thickness: 1.5px;
}
.checklist__label,
.checklist__text {
  font-size: var(--text-base);
  line-height: 1.5;
  flex: 1;
  padding-top: 1px;
  color: var(--color-ink);
  cursor: pointer;
}

/* Extra cards ("Godt at vide") */
.extra-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .extra-cards { grid-template-columns: 1fr 1fr; }
}
.extra-card {
  background: var(--brand-sand);
  border-left: 3px solid var(--brand-sky);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: background var(--transition-fast);
}
.extra-card:hover { background: var(--brand-sky-light); }
.extra-card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.005em;
}
.extra-card p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink);
}

/* Contacts */
.contacts {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.contacts > div {
  background: var(--brand-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.contacts dt {
  font-weight: 600;
  color: var(--color-primary);
  margin: 0;
  font-size: var(--text-sm);
}
.contacts dd {
  margin: 0;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Editable kontakt-værdi (inline) */
.contact-value-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.contact-value { color: var(--color-ink); }
.contact-value--placeholder {
  color: var(--color-ink-muted);
  font-style: italic;
  font-weight: 400;
}
.contact-value[href^="tel:"],
.contact-value[href^="mailto:"],
.contact-value--address {
  color: var(--brand-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-value--address::after {
  content: " ↗";
  font-size: 0.85em;
  opacity: 0.6;
}

/* Auto-linkificerede telefoner/emails i brødtekst (hjælp-blokke, flow-branches) */
.help-blocks a[href^="tel:"],
.decision__branch-action a[href^="tel:"],
.help-blocks a[href^="mailto:"],
.decision__branch-action a[href^="mailto:"] {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.help-blocks a[href^="tel:"]:hover,
.help-blocks a[href^="mailto:"]:hover {
  color: var(--brand-sky-dark);
}
.contact-edit,
.contact-reset,
.contact-save,
.contact-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: all var(--transition-fast);
}
.contact-edit:hover { background: var(--brand-sky-light); color: var(--brand-navy); border-color: var(--brand-sky); }
.contact-reset:hover { background: #fff5f5; color: #c0392b; border-color: #f5c6cb; }
.contact-save { color: var(--brand-green); border-color: var(--brand-green); }
.contact-save:hover { background: var(--brand-green); color: #fff; }
.contact-cancel:hover { background: #f5f5f5; color: var(--color-ink); }
.contact-input {
  font: inherit;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--brand-sky);
  border-radius: var(--radius);
  background: #fff;
  min-width: 180px;
  flex: 1;
}
.contact-input:focus {
  outline: 2px solid var(--brand-sky);
  outline-offset: 1px;
}

/* Documents */
.documents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.documents li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--brand-sand);
  transition: all var(--transition-fast);
}
.documents li:hover {
  background: var(--brand-sky-light);
  border-color: var(--brand-sky);
  transform: translateX(2px);
}
.documents a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--brand-navy);
  font-weight: 500;
  font-size: var(--text-sm);
}
.documents a::before {
  content: "";
  width: 20px;
  height: 22px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
}
.documents li:hover a::before { color: var(--brand-sky-dark); }

/* Step nav */
.step-nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.step-nav button {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--brand-navy);
  background: var(--brand-navy);
  color: #fff;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.step-nav button:hover {
  background: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.step-nav__prev {
  background: transparent !important;
  color: var(--brand-navy) !important;
}
.step-nav__prev:hover {
  background: var(--brand-sky-light) !important;
  color: var(--brand-navy-dark) !important;
}
.step-nav button[hidden] { display: none !important; }

/* =========================================================================
   Settings
   ========================================================================= */

.lang-switch {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.lang-switch__btn {
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-fast);
  color: var(--color-ink);
}
.lang-switch__btn:hover {
  border-color: var(--brand-sky);
  background: var(--brand-sky-light);
}
.lang-switch__btn.is-active {
  border-color: var(--brand-navy);
  background: var(--brand-navy);
  color: #fff;
  font-weight: 600;
}

.btn {
  font: inherit;
  cursor: pointer;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}
.btn--primary {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}
.btn--primary:hover {
  background: var(--brand-navy-dark);
  border-color: var(--brand-navy-dark);
}
.btn--danger {
  background: transparent;
  color: #a03030;
  border: 2px solid #e0c0c0;
}
.btn--danger:hover {
  background: #fff4f2;
  border-color: #a03030;
}

/* =========================================================================
   Step-jump — kompakt trin-navigation til direkte hop
   ========================================================================= */

.step-jump {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.step-jump__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--brand-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.step-jump__btn:hover {
  background: var(--brand-sky-light);
  border-color: var(--brand-sky);
  color: var(--color-primary);
}

.step-jump__btn.is-current {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  cursor: default;
}

.step-jump__num {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.step-jump__btn:not(.is-current) .step-jump__num {
  background: var(--brand-sky-light);
  color: var(--brand-navy);
}

/* =========================================================================
   Flow — procesdiagram (lineære trin med pile)
   ========================================================================= */

.flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.flow__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-5);
}

.flow__step:last-child { padding-bottom: 0; }

/* Vertikal linje + nummereret cirkel */
.flow__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
}

.flow__dot {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--brand-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  flex-shrink: 0;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--color-surface);
}

.flow__line {
  width: 2px;
  flex: 1;
  background: linear-gradient(180deg, var(--brand-sky) 0%, var(--color-border) 100%);
  margin-top: var(--space-1);
}
.flow__step:last-child .flow__line { display: none; }

.flow__content {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-2);
}

.flow__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--color-primary);
  line-height: 1.2;
}

.flow__detail {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.flow__icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--brand-sky-light);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--brand-navy);
}
.flow__icon svg { flex-shrink: 0; }

/* =========================================================================
   Flow — beslutningsdiagram (forgrening)
   ========================================================================= */

.decision {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.decision__question {
  text-align: center;
  padding: var(--space-4) var(--space-5);
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.decision__arrow {
  text-align: center;
  color: var(--color-border-strong);
  line-height: 1;
}

.decision__branches {
  display: grid;
  gap: var(--space-3);
}

.decision__branch {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.decision__branch:hover {
  border-color: var(--brand-sky);
  background: var(--brand-sky-light);
}

.decision__branch-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
}

.decision__branch--red .decision__branch-icon {
  background: #fee2e2;
  color: #dc2626;
}
.decision__branch--orange .decision__branch-icon {
  background: #fef3c7;
  color: #d97706;
}
.decision__branch--blue .decision__branch-icon {
  background: var(--brand-sky-light);
  color: var(--brand-sky-dark);
}
.decision__branch--green .decision__branch-icon {
  background: var(--brand-green-light);
  color: var(--brand-green);
}

.decision__branch-body {
  flex: 1;
  min-width: 0;
}

.decision__branch-condition {
  margin: 0 0 var(--space-1);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-ink);
}

.decision__branch-action {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.decision__branch-action strong {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Help blocks
   ========================================================================= */

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

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 640px) {
  .app-header__top { padding: var(--space-2) var(--space-3); }
  .app-header__wordmark { display: none; }
  .app-header__main-inner { padding: 0 var(--space-3); }
  .app-header__title { font-size: var(--text-base); }
  .app-header__nav-btn { padding: var(--space-2) var(--space-2); font-size: var(--text-sm); }

  .app-main { padding: var(--space-5) var(--space-3) var(--space-12); }

  .home-hero { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); }
  .section { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); }

  .timeline-item { padding: var(--space-4) var(--space-4) var(--space-4) 68px; }
  .timeline-item__marker { left: var(--space-4); width: 36px; height: 36px; font-size: var(--text-base); }
  .timeline::before { left: 30px; }
  .timeline-item__arrow { display: none; }
}

/* ==========================================================================
   Mobil-header: fold "Forløb" og "Hjælp" sammen bag menu-knappen under 600px.
   Søgning og sprogvælger bliver stående — det er de to hyppigste handlinger,
   og sprogskift må aldrig gemmes væk for en bruger der ikke læser dansk.
   ========================================================================== */
.app-header__menu { position: relative; display: none; }

.app-header__menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}
.app-header__menu-trigger:hover,
.app-header__menu-trigger[aria-expanded="true"] { background: rgb(255 255 255 / 0.15); }

.app-header__menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 170px;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.app-header__menu-list button {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  text-align: left;
  font: inherit;
  color: var(--color-ink);
  cursor: pointer;
}
.app-header__menu-list button:hover { background: var(--brand-sky-light); }

@media (max-width: 600px) {
  .app-header__nav-btn { display: none; }
  .app-header__menu { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- DEMO-mærket ----
   Demo-noten inde i heroen. STANDARDPLACERINGEN for enhver demo: den står
   under undertitlen på forsiden, i husets egne farver, og skæmmer ikke det
   første indtryk sådan som båndet gjorde.

   Det der holder en borger fra at falde over en demo, er `noindex` fra
   publish.js — ikke et bånd hun først ser når hun allerede er der. */
.home-hero__demo {
  /* FINSKRIFT, IKKE OVERSKRIFT.

     Noten skal kunne læses af den der leder efter den, og forsvinde for den
     der ser på appen. En rigtig organisations navn gør sætningen lang —
     "ikke en officiel side fra Boligselskabet Sjælland" fylder tre linjer
     hvor Nordhavn Tekniks fylder to — og tre linjer i overskriftsvægt ville
     være båndet om igen, bare flyttet ned.

     Derfor: hårstreg over, mindre grad, lavere kontrast. Så bærer længden
     ikke længere vægt, og noten kan navngive organisationen uden at overtage
     forsiden.

     ALFAEN ER MÅLT, IKKE VALGT. 0.66 så rigtigst ud, men gav 4.10:1 mod den
     lyse ende af Esbjergs hero-gradient (#235c8b) — under AA. 0.78 giver
     4.99:1 dér, og 4.5:1 er gulvet, ikke målet. Ændres den, så mål igen mod
     den LYSESTE navyLight blandt kunderne, ikke mod den mørkeste. */
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.18);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.78);
  position: relative;
}

.demo-baand {
  background: #3b2f00;
  color: #ffe9a3;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 7px 14px;
  line-height: 1.35;
}

/* ==========================================================================
   Udtrykket "Naert" — body.udtryk-let
   ==========================================================================

   To udtryk, og kun to (Tomas, 11. september 2026):

   "Faelles" (fuld) er appen som den altid har set ud: organisationens farve
   fylder bjaelken og forsiden. INTET i denne sektion roerer det — alt staar
   under .udtryk-let, og en kunde uden udtryk i sit brand er uaendret.

   "Naert" (let) er det Herning bad om: ikke en stor blaa bjaelke, men
   "Velkommen til institutionen — en del af Herning Kommune". Organisationen
   traeder et skridt tilbage og staar som afsender. Dens farve bliver en
   accent — titlen, den aktive knap, en streg — ikke en flade.

   Herning bruger selv begge. Forsiden paa "Velkommen til Herning Kommune" er
   den kraftige; forsiden paa "Dine foerste uger i Teknik og Miljoe" er hvid med
   fotos og et lille logo.

   KONTRAST: al tekst staar paa hvid. Titlen er --brand-navy, som hos alle
   kunder er den moerke farve (maalt: 7,2:1 og derover). Finskrift er
   --color-ink-muted (4,94:1). Intet her afhaenger af et foto. */

.udtryk-let .app-header__top {
  background: var(--color-surface);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
}

.udtryk-let .app-header__search-trigger,
.udtryk-let .app-header__nav-btn {
  color: var(--color-ink);
}
.udtryk-let .app-header__search-trigger:hover,
.udtryk-let .app-header__nav-btn:hover,
.udtryk-let .app-header__menu-trigger:hover,
.udtryk-let .app-header__menu-trigger[aria-expanded="true"] {
  background: rgb(0 0 0 / 0.06);
}
/* Den aktive knap baerer organisationens farve — det er her afsenderen ses
   i bjaelken, naar logoet er blevet lille. */
.udtryk-let .app-header__nav-btn.is-active {
  background: rgb(0 0 0 / 0.06);
  background: color-mix(in srgb, var(--brand-navy) 12%, transparent);
  color: var(--brand-navy);
}

.udtryk-let .lang-picker__trigger {
  background: rgb(0 0 0 / 0.03);
  border-color: var(--color-border);
  color: var(--color-ink);
}
.udtryk-let .lang-picker__trigger:hover,
.udtryk-let .lang-picker__trigger:focus-visible {
  background: rgb(0 0 0 / 0.06);
  border-color: var(--color-border-strong);
}
.udtryk-let .lang-picker__trigger:focus-visible { outline-color: var(--brand-navy); }

/* Forsiden: hvid flade, stedets navn i organisationens farve. */
.udtryk-let .home-hero {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.udtryk-let .home-hero::before { display: none; }
.udtryk-let .home-hero h1 { color: var(--brand-navy); }
.udtryk-let .home-hero__subtitle { color: var(--color-ink-muted); }

.udtryk-let .home-hero__demo {
  color: var(--color-ink-muted);
  border-top-color: var(--color-border);
}

/* ---- "Fælles" — roligt ----

   Tomas, 11. september, om Bakkehuset: "meget stor, blå og tung i toppen.
   Også selvom vi har den der, som er central." Det gamle "Fælles" var en
   gradient i fuld flade, og det var ikke organisationens farve der var
   problemet — det var mængden af den.

   Organisationen står stadig forrest: bjælken beholder dens farve og dens
   logo, og det er dét der skiller "Fælles" fra "Nært". Men forsiden bliver en
   hvid flade med farven i titlen.

   Der stod en 4 px streg i organisationens farve foroven. Den er fjernet
   (Tomas, 15. september): et rundt kort med en farvet kant på toppen er
   det mest genkendelige mønster i AI-genererede brugerflader.

   Kun sites der UDTRYKKELIGT har valgt et udtryk, rammes (se applyUdtryk i
   brand.js). Odense og de ældre demoer står uændret, indtil det besluttes. */
.udtryk-fuld .home-hero {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.udtryk-fuld .home-hero::before { display: none; }
.udtryk-fuld .home-hero h1 { color: var(--brand-navy); }
.udtryk-fuld .home-hero__subtitle { color: var(--color-ink-muted); }
.udtryk-fuld .home-hero__demo {
  color: var(--color-ink-muted);
  border-top-color: var(--color-border);
}

/* BEGGE udtryk: en mindre forside. Titlen var dimensioneret til en flade der
   skulle bære appen alene; nu står den over søgefeltet og "Næste for dig",
   og dem skal man kunne se uden at rulle. */
.udtryk-fuld .home-hero,
.udtryk-let .home-hero {
  padding: var(--space-6) var(--space-5);
}
.udtryk-fuld .home-hero h1,
.udtryk-let .home-hero h1 {
  font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
}

/* Stedets billede, fuld bredde øverst i kortet. De negative margener
   modsvarer heroens polstring i udtrykkene ovenfor, saa billedet gaar helt ud
   til kanten. Billedet findes kun i "Nært". */
.home-hero__billede {
  display: block;
  width: calc(100% + 2 * var(--space-5));
  max-width: none;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-5);
  aspect-ratio: 16 / 7;
  /* Loftet er til desktop: i fuld bredde blev billedet saa hoejt at
     soegefeltet og "Naeste for dig" gled under folden. Stedet skal ses, men
     det er ikke det man er kommet for. */
  max-height: 18rem;
  object-fit: cover;
  background: var(--color-surface-alt);
}
.home-hero__billede[hidden] { display: none; }

/* "En del af Herning Kommune". En lille farvet streg foran binder linjen til
   organisationens farve — afsenderen skal kunne ses, ikke kun laeses. */
.home-hero__afsender {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--brand-navy);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  position: relative;
}
.home-hero__afsender[hidden] { display: none; }