/* =========================================================
   Hesteassisteret Praksis — designsystem
   Farvetema: mose/oliven + sand (udendørs, varmt, roligt)
   ========================================================= */

:root {
  /* --- Brandfarver --- */
  --brand:        #5a6b45;   /* mosegrøn */
  --brand-dark:   #3f4c31;
  --brand-light:  #8ea172;
  --brand-tint:   #eef1e7;   /* meget lys grøn */
  --accent:       #b9743a;   /* varm terrakotta (CTA) */
  --accent-dark:  #96562a;
  --cta-bg:       #667949;   /* baggrund i CTA-bokse. Lysnet igen 15/8.
                                Graensen for hvid tekst: kontrast 4,8:1.
                                Lysere end dette kraever moerk tekst i stedet. */

  /* --- Neutrale --- */
  --sand:         #f6f2ea;
  --paper:        #ffffff;
  --ink:          #24291f;
  --ink-soft:     #5b6155;
  --line:         #e2ddd1;

  /* --- Typografi --- */
  --font-head: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;

  /* --- Mål --- */
  --wrap: 1200px;

  /* Bredden paa en tom ramme. Den har intet indhold at faa sin bredde fra,
     saa den skal have den her. Samme stoerrelse som et staaende foto faar
     i toppen af siden, saa en tom ramme og et foto ser lige store ud. */
  --tom-ramme-bredde: 520px;

  /* Afstanden fra tekstspaltens top ned til selve overskriften. Mikroteksten
     over overskriften fylder den. Rammen ved siden af rykkes lige saa meget
     ned, saa den ikke starter hoejere oppe end overskriften. Maalt til
     39 px paa alle sider. */
  --mikrotekst-plads: 39px;

  /* Tekstspalten i en to-spaltet sektion: den halve bredde minus det halve
     mellemrum, saa den bliver praecis saa bred som foer. */
  --tekstspalte: minmax(0, calc(50% - clamp(1rem, 2vw, 1.75rem)));
  /* Topbjaelken maa vaere bredere end tekstspalten: den skal rumme logo,
     to forloebsmenuer, fire punkter og en knap. Maalt behov er 1215px. */
  --wrap-header: 1380px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(36, 41, 31, .06), 0 8px 24px rgba(36, 41, 31, .07);
  --shadow-lg: 0 2px 4px rgba(36, 41, 31, .06), 0 18px 48px rgba(36, 41, 31, .12);
  --header-h: 76px;
}

/* =========================================================
   Reset / basis
   ========================================================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-dark);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.3rem + 3.1vw, 3.25rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem); letter-spacing: -.01em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-dark); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

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

ul, ol { padding-left: 1.25em; margin: 0 0 1.1em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--brand-dark);
}

/* =========================================================
   Layout-hjælpere
   ========================================================= */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section--sand { background: var(--sand); }
.section--tint { background: var(--brand-tint); }

.section-head { max-width: 720px; margin-bottom: 2.5rem; }
.section-head p { color: var(--ink-soft); font-size: 1.125rem; margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .75rem;
}

.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; }

.center { text-align: center; }
.center .section-head { margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brand-dark); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* =========================================================
   Knapper
   ========================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit; font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); color: #fff; }

.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-dark); color: #fff; }

.btn--ghost { border-color: var(--brand); color: var(--brand-dark); background: transparent; }
.btn--ghost:hover { background: var(--brand); color: #fff; }

.btn--light { background: #fff; color: var(--brand-dark); }
.btn--light:hover { background: var(--sand); color: var(--brand-dark); }

.btn--outline-light { border-color: rgba(255,255,255,.65); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.15); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* =========================================================
   Header + flad navigation (ingen dropdowns)
   ========================================================= */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap { width: min(100% - 2.5rem, var(--wrap-header)); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.logo {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--brand-dark);
  font-family: var(--font-head);
  font-size: 1.2rem; font-weight: 600; line-height: 1.15;
  flex-shrink: 0;
}
.logo__mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  border-radius: 50%;
}
.logo__mark svg { width: 24px; height: 24px; }
.logo small {
  display: block; font-family: var(--font-body);
  font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}

.nav { display: flex; align-items: center; gap: .1rem; }

.nav > a:not(.btn),
.nav__parent {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: .55rem .5rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 550;
  font-size: .95rem;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav > a:not(.btn):hover, .nav__parent:hover { background: var(--brand-tint); color: var(--brand-dark); }
.nav > a:not(.btn)[aria-current="page"],
.nav__parent[aria-current="true"] {
  color: var(--brand-dark);
  background: var(--brand-tint);
  font-weight: 700;
}
.nav .btn { margin-left: .5rem; padding: .6rem 1.15rem; font-size: .93rem; }
.nav .btn:hover { background: var(--accent-dark); color: #fff; }

/* --- Undermenu (kun ét niveau) --- */

.nav__group { position: relative; }

.nav__parent::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.nav__group:hover .nav__parent::after,
.nav__group.is-open .nav__parent::after,
.nav__group:focus-within .nav__parent::after { transform: translateY(1px) rotate(225deg); }

.nav__sub {
  list-style: none; margin: 0; padding: .45rem;
  position: absolute; top: calc(100% + .35rem); left: 0;
  min-width: 290px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__group:hover .nav__sub,
.nav__group.is-open .nav__sub,
.nav__group:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub li { margin: 0; }
.nav__sub a {
  display: block;
  padding: .7rem .85rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
}
.nav__sub a small {
  display: block; font-weight: 500; font-size: .8125rem;
  color: var(--ink-soft); margin-top: .1rem;
}
.nav__sub a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.nav__sub a[aria-current="page"] { background: var(--brand); color: #fff; }
.nav__sub a[aria-current="page"] small { color: rgba(255,255,255,.8); }

.nav-toggle {
  display: none;
  align-items: center; gap: .55rem;
  background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: .55rem 1rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 1380px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: .75rem 1.25rem 1.5rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav > a:not(.btn),
  .nav__parent {
    padding: .8rem 1rem;
    border-radius: var(--radius);
    font-size: 1.0625rem;
  }
  .nav .btn { margin: .7rem 0 0; padding: .9rem 1.5rem; font-size: 1.0625rem; }
  .site-header__inner { position: relative; }

  /* Undermenuen foldes ud som en indrykket liste — ingen skjulte niveauer på mobil */
  .nav__group { position: static; }
  .nav__parent { pointer-events: none; color: var(--ink-soft); font-size: .8125rem;
    font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding-bottom: .25rem; }
  .nav__parent::after { display: none; }
  .nav__parent[aria-current="true"] { background: transparent; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; box-shadow: none; padding: 0 0 .5rem .6rem;
    border-left: 2px solid var(--brand-tint); margin-left: 1rem;
  }
  .nav__sub a { padding: .75rem 1rem; font-size: 1.0625rem; }
}

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

.hero { background: var(--brand-tint); overflow: hidden; }
.hero__inner {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
@media (min-width: 860px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
  /* Hvor tekstsoejlen er lang, skal den flugte med billedets top i stedet
     for at blive midterstillet — ellers opstaar der et tomrum oeverst. */
  .hero--top .hero__inner { align-items: start; }
}
.hero h1 { margin-bottom: .6rem; }
.hero__text p.lead { margin-bottom: 0; }
.hero__text p.lead + p { margin-top: 1.1em; }

/* Det korte, konkrete svar. Klassen bliver staaende, fordi den markerer
   svar-foerst-afsnittet for soegemaskiner og for os selv - men den saetter
   ikke laengere en tankestreg foran og rykker ikke teksten ind. Afsnittet
   skal se ud som afsnittene under det. */
.svar { }

.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 4;
  background: var(--brand-light);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Uddybende tekst inde i hero'ens tekstsoejle, saa den staar ved siden
   af billedet i stedet for i et selvstaendigt afsnit nedenunder. */
/* Portraet: mindre end de oevrige herobilleder, og trukket mod hoejre
   saa der ikke opstaar et hul mellem tekst og billede. */
.hero__media--portraet {
  aspect-ratio: 4 / 5;
  max-width: 340px;
  margin-inline-start: auto;
}

/* "Kort fortalt" — resumé i toppen af kommunesiden. Label til venstre,
   indhold til hoejre, saa oejet kan loebe ned ad etiketterne. */
.resume {
  margin-top: 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1rem;
}
.resume__titel {
  font-size: 1.05rem;
  margin: 0;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
.resume__row { display: grid; gap: .2rem; }
.resume__label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brand);
}
@media (min-width: 620px) {
  .resume__row {
    grid-template-columns: 8.5rem 1fr;
    gap: 1.25rem;
    align-items: baseline;
  }
}

/* De tre ydelser i "Kort fortalt" paa Til kommuner. Stod foer som én lang
   koerende tekst; nu er hver ydelse sin egen linje med link til sin side. */
.ydelsesliste {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.ydelsesliste li {
  margin: 0;
  padding-left: .9rem;
  border-left: 2px solid var(--brand-tint, var(--line));
  line-height: 1.45;
}
.ydelsesliste a { font-weight: 600; }

/* Loebende tekst inde i et afsnit, der ellers bruger fuld bredde. Bruges
   paa prissiden, hvor forklaringen af kontrakten staar over og under
   priskortene i samme afsnit. */
.tekstspalte {
  width: min(100%, 68ch);
  /* Ikke centreret: teksten skal dele venstrekant med priskortene og med
     overskrifterne, saa hele siden hviler paa den samme lodrette linje. */
  margin-bottom: 2.5rem;
}
.tekstspalte--luft { margin-block: 3rem 0; }
.tekstspalte > p:last-child { margin-bottom: 0; }

/* Hele kontraktdelen ligger i ét panel med samme groenne bund som
   sidehovedet, saa den laeses som én ting under sessionspriserne og ikke
   som tre loese afsnit. */
.kontraktpanel {
  margin-top: 3rem;
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.kontraktpanel > h2 { margin-top: 0; }
/* Ansvar og forsikring staar som et almindeligt afsnit i spalten: samme
   bredde, samme skriftstoerrelse og flugtende venstrekant som teksten
   omkring. Boksens groenne bund ville alligevel vaere usynlig paa panelets
   groenne bund, og padding'en gjorde den smallere end resten. Uden boks maa
   den ogsaa knaekke over spalteskiftet ligesom afsnittene — det er det, der
   goer de to spalter lige lange. */
/* Selektoren skal vaere staerkere end .note laengere nede i filen,
   ellers vinder boksens padding og baggrund. */
.kontrakttekst > .note--kontrakt {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
  orphans: 2;
  widows: 2;
}

/* Forklaringen af kontrakten er lang. Staar den i én spalte, bruger den kun
   venstre halvdel af det groenne panel og skubber priserne langt ned. Derfor
   loeber den i to spalter, saa snart panelet er bredt nok til to laeselige
   linjelaengder. Afsnit maa ikke brydes midt over. */
.kontrakttekst {
  width: 100%;
  margin-bottom: 2.25rem;
}
@media (min-width: 800px) {
  .kontrakttekst {
    columns: 2;
    column-gap: clamp(2rem, 4vw, 3.25rem);
  }
  /* To ting skal vaere opfyldt, for at browseren kan goere spalterne lige
     lange. Dels skal afsnittene kunne knaekke frit over spalteskiftet
     (orphans/widows 1) — ellers er det afsnitslaengderne, der bestemmer,
     hvor spalten slutter. Dels skal afstanden mellem afsnit vaere praecis
     én linje (1.7em = line-height), saa hele spalten ligger paa det samme
     linjeraster; med en halv linje mellem afsnittene kan de to spalter
     aldrig ende i samme hoejde. */
  .kontrakttekst > p,
  .kontrakttekst > .note--kontrakt { orphans: 2; widows: 2; }
  .kontrakttekst > p { margin-bottom: 1.7em; }
  .kontrakttekst > .note--kontrakt { margin-top: 0; }
}
.kontrakttekst > p:first-child { margin-top: 0; }
.kontrakttekst > p:last-child { margin-bottom: 0; }
/* Linjen, der peger ned i oversigten, staar for sig i fuld bredde. Den er
   sat kraftigere end broedteksten, saa man med det samme ser, at det er her
   priserne begynder. */
.kontraktpanel__leadin {
  margin: 0;
  /* Ingen maksbredde: linjen skal staa som én saetning hen over panelet i
     stedet for at knaekke i to. */
  max-width: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.125rem;
}
/* Kortene indeni skal loefte sig fra den groenne bund, derfor hvid uden
   ramme i stedet for hvid med ramme. */
.kontraktpanel .kontraktblok { border-color: transparent; }
.kontraktpanel .kontraktblok__hoved {
  background: var(--sand);
  border-bottom-color: var(--line);
}

.kontraktblokke {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.kontraktblok {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}
/* Hovedet baerer det, raekkerne nedenunder deler: varighed og pris pr. gang. */
.kontraktblok__hoved {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .35rem 1.25rem;
  padding: .85rem 1.25rem;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--line);
}
.kontraktblok__hoved h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brand-dark);
}
.kontraktblok__hoved p {
  margin: 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
.kontraktblok__linje {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1.25rem;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.kontraktblok__linje:last-child { border-bottom: 0; }
/* Linjen er en hel saetning, saa den staar i normal vaegt — kun hyppigheden
   er fremhaevet, for det er den, der skiller linjerne fra hinanden. */
.kontraktblok__hvornaar { font-weight: 400; }
.kontraktblok__hvornaar strong { font-weight: 600; }
.kontraktblok__beloeb {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kontraktblok__tal { white-space: nowrap; }
/* Enheden er ikke en fodnote, den er halvdelen af oplysningen: uden den
   laeses "Hver uge — 4.162 kr." som prisen for én uge. Derfor samme
   skriftstoerrelse og farve som saetningen til venstre. */
.kontraktblok__enhed {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  /* Samme vaegt som beloebet: enheden er en del af prisen, ikke en note. */
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink);
}

/* Nummereret trinliste inde i et klik-ud-afsnit */
.trinliste { padding-left: 1.2rem; }
.trinliste li { margin-bottom: .75rem; }

/* Overskrift i fuld bredde over hero'ens to spalter. Spalterne under skal
   saa ikke selv have luft foroven, ellers falder de fra hinanden. */
.hero__titel { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.hero__titel h1 { margin-bottom: 0; }
.hero__inner--utop { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.resume--top { margin-top: 0; }

/* Billedrammen skal flugte med bunden af "Kort fortalt". Derfor ligger de
   to i samme raekke, og billedet faar ingen fast hoejde-bredde-forhold —
   det straekker sig i stedet til raekkens hoejde, som resuméet saetter.
   Knapperne ligger i raekken nedenunder. */
@media (min-width: 860px) {
  .hero__inner--flugt { align-items: stretch; row-gap: 1.75rem; }
  .hero__inner--flugt > .resume     { grid-column: 1; grid-row: 1; }
  .hero__inner--flugt > .hero__media { grid-column: 2; grid-row: 1; aspect-ratio: auto; }
  .hero__inner--flugt > .figur { grid-column: 2; grid-row: 1; }
  /* Billedet maa ikke laengere straekke sig efter resuméets hoejde. Fotoet er
     naesten kvadratisk, og en meget hoej ramme tvang det til at blive baade
     opskaleret og forvraenget. 4/5 er samme forhold som portraetrammen. */
  .hero__inner--flugt > .figur { align-self: start; }
  .hero__inner--flugt > .figur .hero__media { aspect-ratio: 4 / 5; height: auto; }
  .hero__inner--flugt > .btn-row    { grid-column: 1; grid-row: 2; margin: 0; }
}

.hero__uddyb { margin-top: 2rem; }
.hero__uddyb > h2:first-child { margin-top: 0; }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .9rem;
  font-size: .875rem; font-weight: 600; color: var(--brand-dark);
}
.badge svg { width: 16px; height: 16px; color: var(--brand); }

/* Sidetop på undersider */
.pagehead { background: var(--brand-tint); padding: clamp(2.5rem, 5vw, 4rem) 0; }
.pagehead h1 { margin-bottom: .4rem; }
.pagehead p { max-width: 70ch; color: var(--ink-soft); font-size: 1.15rem; margin-bottom: 0; }
/* Svar-foerst-afsnittet staar foerst, Lottes egen indledning lige under.
   Afsnittene ovenfor har ingen bundmargen, saa afstanden saettes her. */
.pagehead p + p { margin-top: 1.1em; }

/* =========================================================
   Kort / grid
   ========================================================= */

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Praecis to eller tre i bredden paa store skaerme. Bruges hvor antallet af
   kort ellers ville braekke skaevt — fx seks kort, der bliver til 4 + 2. */
@media (min-width: 900px) {
  .grid--2-fast { grid-template-columns: repeat(2, 1fr); }
  .grid--3-fast { grid-template-columns: repeat(3, 1fr); }
  /* Fire i bredden. Bruges til samarbejdspartnerne, der ellers bliver 3 + 1. */
  .grid--4-fast { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-dark);
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 24px; height: 24px; }
.card__link {
  margin-top: auto; padding-top: 1.1rem;
  font-weight: 650; text-decoration: none;
  color: var(--brand-dark);
  display: inline-flex; align-items: center; gap: .4rem;
}
.card__link::after { content: "→"; transition: transform .18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-light); }
.card:hover .card__link::after { transform: translateX(3px); }

.card--flat:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* Tekst + billede-sektion */
.split {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .split--reverse .figur { order: 2; }
}
.split__media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--brand-light);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Ramme uden fast form: viser hele billedet uden beskaering, uanset
   hvilket format billedet har. */
.split__media--helt { aspect-ratio: auto; }
.split__media--helt img { height: auto; }

/* =========================================================
   Billede med billedtekst
   =========================================================

   Billedrammen har fast format og overflow: hidden, saa teksten kan ikke
   ligge inde i den. Rammen pakkes derfor ind i en <figure>, og teksten
   staar udenfor rammen men inde i figuren.

   Det betyder, at figuren og ikke rammen er grid-element. De to regler
   nederst i filen, der placerede rammen, kender derfor ogsaa figuren. */

/* width: 100% er ikke overfloedig. En TOM ramme har intet indhold at faa
   sin bredde fra, saa den faar den fra stretch - og stretch slaar fra,
   saa snart figuren faar en auto-margin eller et justify-self. Uden den
   her linje bliver den tomme ramme 0 x 0 px. */
.figur { margin: 0; width: 100%; display: grid; grid-template-rows: 1fr auto; gap: .7rem; }
.figur figcaption {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.5;
  font-style: italic;
}

/* =========================================================
   Trin / proces
   ========================================================= */

.steps { counter-reset: step; display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.step {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem;
}
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.15rem; }
.step p { color: var(--ink-soft); margin-bottom: 0; font-size: 1rem; }

/* =========================================================
   Pris
   ========================================================= */

.price-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.9rem;
  display: flex; flex-direction: column;
}
.price-card__amount {
  font-family: var(--font-head);
  font-size: 2.4rem; font-weight: 700; color: var(--brand-dark);
  line-height: 1.1; margin: .5rem 0 .15rem;
}
.price-card__unit { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.1rem; }
.price-card p { color: var(--ink-soft); font-size: 1rem; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card--highlight { border-color: var(--brand); border-width: 2px; box-shadow: var(--shadow); }

/* =========================================================
   Udtalelser
   ========================================================= */

.quote-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.75rem;
  display: flex; flex-direction: column;
}
.quote-card p {
  font-size: 1.0625rem; line-height: 1.65; margin-bottom: 1.1rem;
}
.quote-card__who {
  margin-top: auto; font-size: .9rem; font-weight: 650;
  color: var(--brand-dark); font-style: normal;
}
.quote-card__stars { color: var(--accent); letter-spacing: .1em; margin-bottom: .85rem; }

/* =========================================================
   FAQ (native details/summary — ingen JS nødvendig)
   ========================================================= */

.faq { display: grid; gap: .75rem; }

.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] { border-color: var(--brand-light); box-shadow: var(--shadow); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 3.25rem 1.1rem 1.35rem;
  position: relative;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--brand-dark);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 1.35rem; top: 50%;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { background: var(--brand-tint); }

.faq__body { padding: 0 1.35rem 1.35rem; color: var(--ink-soft); }
.faq__body > :first-child { margin-top: 0; }

/* =========================================================
   CTA-bånd
   ========================================================= */

.cta {
  background: var(--cta-bg);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.85); max-width: 60ch; margin-inline: auto; font-size: 1.1rem; }
.cta .btn-row { justify-content: center; }

/* Kontaktinfo-liste */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; margin: 0; }
.contact-list svg { width: 22px; height: 22px; color: var(--brand); flex-shrink: 0; margin-top: .25rem; }
.contact-list a { font-weight: 650; }
.contact-list span { display: block; font-size: .85rem; color: var(--ink-soft); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; }

/* =========================================================
   Søster-site-henvisning
   ========================================================= */

.sister {
  display: grid; gap: 1.5rem; align-items: center;
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 760px) { .sister { grid-template-columns: 1fr auto; } }
.sister h3 { margin-bottom: .35rem; }
.sister p { color: var(--ink-soft); margin-bottom: 0; }
.sister .btn { white-space: nowrap; }

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

.site-footer {
  background: var(--brand-dark);
  color: rgba(255,255,255,.78);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
  font-size: .975rem;
}
.site-footer h4 { color: #fff; margin-bottom: .9rem; font-size: .8125rem;
  letter-spacing: .1em; text-transform: uppercase; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-grid li { margin: 0; }
.footer__brand { font-family: var(--font-head); font-size: 1.3rem; color: #fff; margin-bottom: .5rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .875rem; color: rgba(255,255,255,.6);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }

/* Redigeringslink — skjult som udgangspunkt.
   Vises kun på enheder, hvor man har besøgt siden med ?rediger én gang.
   Selve sikkerheden ligger i GitHub-login, ikke i at linket er skjult. */
.rediger-link { display: none; }
.kan-redigere .rediger-link {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: .3rem .85rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.kan-redigere .rediger-link:hover { background: rgba(255,255,255,.22); text-decoration: none; }
.rediger-link svg { width: 14px; height: 14px; }

/* =========================================================
   Diverse
   ========================================================= */

.prose > h2 { margin-top: 2.5rem; }
.prose > h3 { margin-top: 2rem; }
.prose > :first-child { margin-top: 0; }
.prose ul li::marker { color: var(--brand); }

.note {
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  font-size: 1rem;
}
.note strong { color: var(--brand-dark); }

.pill-nav {
  display: flex; flex-wrap: wrap; gap: .6rem;
  padding: 0; margin: 0; list-style: none;
}
.pill-nav li { margin: 0; }
.pill-nav a {
  display: inline-block; padding: .5rem 1.1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ink);
}
.pill-nav a:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.pill-nav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; }

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

/* =========================================================
   Fem kort paa stribe
   =========================================================
   Forsidens fem indgange skal staa som EN stribe. Med auto-fit faldt det
   femte kort ned alene paa en raekke for sig, og saa ser det ud som om
   supervision er noget, der er blevet til overs.

   Det kraever to ting: en bredere ramme end tekstspalten, og kortere
   tekster i kortene. Under 1200 px falder de tilbage til auto-fit. */
.wrap--bred { max-width: var(--wrap-header); }

@media (min-width: 1200px) {
  .grid--5-fast { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .grid--5-fast .card { padding: 1.5rem 1.35rem; }
  .grid--5-fast .card h3 { font-size: 1.125rem; }
  .grid--5-fast .card p { font-size: .9375rem; }
}


/* =========================================================
   Billedspalten: taet paa teksten og midt paa siden
   =========================================================
   Rammen er smallere end sin spalte, fordi et staaende foto ellers bliver
   meterhoejt. Er spalten 572 px og billedet 320 px, skal de 252 px tomrum
   ligge et sted, og begge de nemme svar er forkerte:

     - Laegges de mellem billedet og teksten, ser billedet ud til at hoere
       et andet sted hen. Paa bisidder-siden blev hullet 308 px.
     - Laegges de yderst i den ene side, staar hele sektionen skaevt paa
       siden. Paa terapisiden laa den 111 px for langt til hoejre.

   Derfor: billedspalten er praecis saa bred som billedet, tekstspalten
   beholder sin halve bredde, og de to centreres tilsammen.

   minmax(0, max-content) og ikke bare max-content: et bredt foto maa
   hellere klemmes sammen end skubbe sektionen ud over sidens kant. */
@media (min-width: 860px) {
  .split:has(> .figur:first-child),
  .split:has(> .billedstak:first-child) {
    grid-template-columns: minmax(0, max-content) var(--tekstspalte);
    justify-content: center;
  }
  .split:has(> .figur:last-child:not(:first-child)),
  .split:has(> .billedstak:last-child:not(:first-child)) {
    grid-template-columns: var(--tekstspalte) minmax(0, max-content);
    justify-content: center;
  }

  /* Billedet staar lodret midt for teksten. Starter det oppe ved kanten,
     rager det op over overskriften, og saa ser sektionen skaev ud. */
  .hero__inner > .figur,
  .hero__inner > .billedstak,
  .split > .figur,
  .split > .billedstak { align-self: center; }
}

/* =========================================================
   To billeder i en spalte
   =========================================================
   Nogle tekstspalter er dobbelt saa hoeje som billedet ved siden af, og saa
   staar der et stort hul. Loesningen er et billede mere i samme spalte -
   ikke at straekke det foerste, for saa bliver motivet beskaaret.

   Er det andet felt tomt, staar der bare ét billede. En tom ramme er
   proevet af og saa forkert ud. */
.billedstak {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

@media (min-width: 860px) {
  /* Stakken er praecis saa bred som det bredeste foto i den. */
  .billedstak { width: max-content; max-width: 100%; }
}

/* =========================================================
   Den tomme ramme
   =========================================================
   Er feltet tomt, staar der en groen ramme og venter paa et foto. Den skal
   passe til teksten ved siden af: samme hoejde, fra overskriften og ned til
   sidste linje. Et foto beholder sit eget format, for ellers skaeres der i
   motivet - men en tom ramme har intet motiv at tage hensyn til, og derfor
   maa den gerne straekkes. Saa passer den ogsaa, naar Lotte retter teksten.

   Bredden staar i --tom-ramme-bredde og ikke i taggen: en style="" kan ikke
   klemmes sammen, og saa laa kontaktsiden ud over kanten paa en smal
   skaerm. */
.figur--tom .hero__media,
.figur--tom .split__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 160px;
}

@media (min-width: 860px) {
  /* Spalten er lige saa bred som rammen - minmax, saa den kan klemmes
     sammen, naar vinduet bliver smalt. */
  .split:has(> .figur--tom:first-child) {
    grid-template-columns: minmax(0, var(--tom-ramme-bredde)) var(--tekstspalte);
  }
  .split:has(> .figur--tom:last-child:not(:first-child)) {
    grid-template-columns: var(--tekstspalte) minmax(0, var(--tom-ramme-bredde));
  }
  .billedstak:not(:has(img)) { width: var(--tom-ramme-bredde); max-width: 100%; }

  /* Rammen straekker sig fra overskriften og ned til tekstens sidste linje.
     Et foto goer det ikke: det beholder sin egen stoerrelse og staar
     lodret midt for. */
  .hero__inner > .figur--tom,
  .split > .figur--tom,
  .hero__inner > .billedstak:has(.figur--tom),
  .split > .billedstak:has(.figur--tom) {
    align-self: stretch;
    margin-top: var(--mikrotekst-plads);
  }
  .split > .figur--tom,
  .split > .billedstak:has(.figur--tom) { margin-top: 0; }

  /* Staar den tomme ramme under et foto, faar fotoet sin egen hoejde, og
     rammen tager resten. Er den alene i stakken, faar den det hele. */
  .billedstak:has(> .figur--tom:only-child) { grid-template-rows: 1fr; }
  .billedstak:has(> .figur--tom:last-child:not(:only-child)) {
    grid-template-rows: auto 1fr;
  }
  .billedstak:has(.figur--tom) { align-content: stretch; }
}