/* mads-andersen.dk — designet fra prisbladet, samlet ét sted.
   Farver: navy #1a1a2e · guld #c8a96e · creme #f0ede6 · kant #e2ddd5 */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  background: #f0ede6;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}
a { color: #c8a96e; text-decoration: none; }
a:hover { color: #b8996e; }
img { max-width: 100%; }

:root {
  /* Sidemargenen står ÉT sted. Alt der skal bløde ud til kanten — heltbrede
     billeder, kortenes fotos — regner ud fra den, så de ikke kan komme til at
     bløde 22 px, når margenen er 34. */
  --gutter: 50px;

  /* SKRIFTSKALAEN — fem trin, og ikke ét mere.
     ------------------------------------------------------------------
     Sitet havde 27 forskellige skriftstørrelser fra 10 til 60 px, fordi
     hvert afsnit fik sin egen værdi, da det blev bygget. Det er ikke en
     skala, det er drift: samme slags tekst stod 13 px et sted og 15 px
     et andet, og 9.200 tegn brødtekst stod under 15 px, hvor de fleste
     over 40 år begynder at knibe øjnene sammen.

     Hvert trin har nu ÉN opgave. Er der brug for en sjette størrelse, er
     det næsten altid et tegn på, at teksten hører i et af de fem.

     Ingenting er mindre end 12,5 px, og det trin bruges KUN til korte
     spatierede etiketter i versaler, hvor hvert bogstav står frit. */
  --f-label: 12.5px;   /* OVERLINJER · FOOTER-ETIKETTER — versaler, spatieret */
  --f-meta:  14.5px;   /* specifikationer, kilder, bobler, momsetiket */
  --f-lille: 16px;     /* knapper, menu, lister, sekundær tekst */
  --f-brod:  17px;     /* brødtekst */
  --f-stor:  18.5px;   /* intro og citater */
}
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- knapper ---- */
.btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  background: #c8a96e; color: #1a1a2e;
  font-size: var(--f-lille); font-weight: 500; padding: 15px 28px;
  border-radius: 6px; min-height: 48px; border: none; cursor: pointer;
  font-family: inherit;
}
.btn-gold:hover { background: #d4b87d; color: #1a1a2e; }
.btn-lille { padding: 12px 22px; min-height: 44px; font-size: var(--f-meta); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid rgba(200,169,110,0.45); color: #c8a96e;
  font-size: var(--f-lille); font-weight: 500; padding: 15px 28px;
  border-radius: 6px; min-height: 48px;
}
.btn-ghost:hover { border-color: #c8a96e; background: rgba(200,169,110,0.1); }
.btn-navy {
  background: #1a1a2e; color: #fff; font-size: var(--f-lille); font-weight: 500;
  padding: 15px 30px; border-radius: 6px; min-height: 48px; border: none;
  cursor: pointer; font-family: inherit;
}
.btn-navy:hover { background: #2a2a4e; }

/* ---- menu ---- */
.nav { background: #fff; border-bottom: 1px solid #e2ddd5; }
.nav-inner { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand-navn { font-family: 'Playfair Display', Georgia, serif; font-size: var(--f-stor); color: #1a1a2e; }
.brand-titel { font-size: var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: #c8a96e; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.navlink { font-size: var(--f-lille); color: #555; }
.navlink:hover { color: #1a1a2e; }
.navlink-active { font-size: var(--f-lille); color: #1a1a2e; font-weight: 500; border-bottom: 1px solid #c8a96e; padding-bottom: 3px; }

/* ---- målgruppevælger ---- */
.vaelger { background: #fff; border-bottom: 1px solid #e2ddd5; }
.vaelger-inner { padding: 26px var(--gutter); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.vaelger-label { font-size: var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: #999; font-weight: 500; }
.pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Fire målgrupper i stedet for tre kunne ikke være på en telefon: den
   fjerde pille blev skåret af i kanten. Rækken bryder nu i stedet. */
.pill { font-size: var(--f-lille); font-weight: 500; color: #aaa; padding: 11px 22px; border-radius: 24px; }
.pill:hover { color: #555; background: #faf9f7; }
.pill-on { font-size: var(--f-lille); font-weight: 500; background: #1a1a2e; color: #fff; padding: 11px 22px; border-radius: 24px; }

/* ---- typografi ---- */
.overlinje { margin: 0 0 12px; font-size: var(--f-label); letter-spacing: 0.22em; text-transform: uppercase; color: #c8a96e; font-weight: 500; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: #1a1a2e; margin: 0; }
/* clamp: mindste · foretrukne (skalerer med bredden) · største.
   Overskrifterne behøver derfor ikke sættes om i hvert breakpoint, og der
   findes ingen inline font-size i skabelonerne, som kan overtrumfe dem. */
h1 { font-size: clamp(29px, 5.2vw, 46px); line-height: 1.18; }
h2 { font-size: clamp(23px, 3.6vw, 34px); line-height: 1.25; }
h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.3; }
/* Loftet er i ch, ikke px: 620px holder 78 tegn ved 16px og kun 67 ved 18,5px,
   og sitet har fem skriftstørrelser. ch følger skriften, så linjelængden bliver
   den samme uanset hvilken af dem afsnittet er sat i. Båndet er 45-75 tegn. */
.brød { font-size: var(--f-brod); line-height: 1.8; color: #555; text-wrap: pretty; max-width: 62ch; }
/* Noterne bærer hele sætninger ("Du får en kvittering på mail med det samme"),
   ikke etiketter. Derfor på brødtekstens nabotrin og ikke på meta. */
.note { font-size: var(--f-lille); color: #8a8272; font-style: italic; line-height: 1.6; }
.dæmpet { color: #999; }

/* ---- sidehoved i navy ---- */
.hoved { background: #1a1a2e; }
.hoved .wrap { padding-top: 76px; padding-bottom: 76px; }
.hoved h1 { color: #fff; margin-bottom: 20px; }
.hoved .intro { margin: 0; font-size: var(--f-brod); line-height: 1.8; color: rgba(255,255,255,0.6); max-width: 58ch; text-wrap: pretty; }

/* ---- sektioner og kort ---- */
section { padding: 80px 0 0; }
section.hvid { background: #fff; border-top: 1px solid #e2ddd5; border-bottom: 1px solid #e2ddd5; padding: 84px 0; margin-top: 86px; }
.kort { --kort-x: 34px; --kort-y: 32px;
  background: #fff; border: 1px solid #e2ddd5; border-radius: 10px;
  padding: var(--kort-y) var(--kort-x); display: flex; flex-direction: column; gap: 14px;
  /* position: relative er IKKE pynt. Uden den havner `.mere-flag` — det
     skjulte 1 px afkrydsningsfelt i hvert udtalelseskort — i forhold til
     `.karrusel`, som er den nærmeste positionerede forfader. Kortet selv
     bliver klippet af karrusellens rulleboks, men det lille felt gjorde ikke,
     og 46 usynlige felter spredt ud til 4.084 px fik HELE siden til at kunne
     skubbes til højre på en telefon: man skubbede lidt og sad og kiggede på
     et tomt, beige felt. Målt på iPhone-bredde: 4.084 px indhold i et 390 px
     vindue. Se også ARKITEKTUR.md, fælde 7. */
  position: relative; }
.kort-fremhaevet { border-top: 3px solid #c8a96e; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.raekke-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; margin-bottom: 24px; flex-wrap: wrap; }

/* ---- priser ---- */
.amount { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; color: #1a1a2e; white-space: nowrap; }
.amount-lille { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; color: #1a1a2e; white-space: nowrap; }
/* ÉN momsetiket, én farve.
   Der var to klasser for det samme: `.moms-grå` (#a8a8a8) til inkl./ekskl. og
   `.moms-fri` (gyldent og halvfedt) til momsfri. Resultatet var, at "Momsfri"
   lyste op, mens "Inkl. moms" trådte tilbage — en fremhævelse uden mening, af
   det felt der tilfældigvis havde en anden værdi. Etiketten er samme slags
   oplysning uanset hvad der står i den, og skal se ens ud. */
.moms-etiket { display: block; font-size: var(--f-label); color: #8a8272; margin-top: 3px; letter-spacing: 0.02em; }

/* Farven er sitets dæmpede tekstfarve — den samme som kilden under en
   udtalelse og undertitlen på et kort. Den gamle #a8a8a8 gav 2,5:1 mod hvid
   og var altså under grænsen for læsbar tekst; #8a8272 giver 4,0:1. Skal en
   momsnote have en anden farve et sted, er det et tegn på, at der er to
   slags momsnoter — og så er dét problemet, ikke farven. */
/* Titlen skal kunne krympe (min-width:0), og prisen skal kunne falde ned på
   egen linje i stedet for at stikke ud af kortet. Uden begge dele skred
   beløbet uden for kassen mellem ca. 900 og 1100 px. */
.pris-hoved { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; }
.pris-hoved > *:first-child { flex: 1 1 55%; min-width: 0; }
.pris-hoved > .pris-tal { flex: 0 0 auto; text-align: right; }
.pris-hoved h3 { overflow-wrap: anywhere; }
.pris-tal { text-align: right; }
.tilvalg { border-top: 1px solid #e2ddd5; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.tilvalg-linje { display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; font-size: var(--f-meta); line-height: 1.55; color: #555; }
.tilvalg-linje em { color: #aaa; font-size: var(--f-meta); }
.tilvalg-linje b { font-weight: 400; color: #1a1a2e; font-size: var(--f-meta); }
.laast-link { font-size: var(--f-meta); font-weight: 500; color: #c8a96e; white-space: nowrap; }
.mærke { font-size: var(--f-label); font-weight: 600; background: #e8f4e8; color: #2d7a2d; border: 1px solid #a8d8a8; border-radius: 20px; padding: 3px 9px; }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: var(--f-meta); color: #555; background: #faf9f7; border: 1px solid #e2ddd5; border-radius: 20px; padding: 7px 14px; }
.chip-tema { font-size: var(--f-meta); color: #4a3a5e; background: #fff; border: 1px solid #ddd5e2; border-radius: 20px; padding: 8px 16px; }

/* ---- cta ---- */
.cta { background: #1a1a2e; border-radius: 10px; padding: 52px 60px; display: flex; align-items: center; justify-content: space-between; gap: 50px; margin: 80px 0; }
.cta-overskrift { margin: 0 0 10px; font-family: 'Playfair Display', Georgia, serif; font-size: 28px; color: #fff; line-height: 1.3; }
.cta-tekst { margin: 0; font-size: var(--f-brod); line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 560px; }

/* --- "vælg én": længden på en workshop, og lignende ----------------------
   Radioknapper og ikke en dropdown. Der er to-tre muligheder, de koster
   forskelligt, og prisen skal kunne læses uden at klikke — en dropdown
   skjuler netop det, valget handler om.

   Rækkerne er bygget som .afkryds, fordi de gør det samme: et tilvalg med
   en pris i højre side. To slags kontroller i samme formular skal ligne
   hinanden, ellers ser den lappet sammen ud.

   Vælgerne er skrevet med ekstra vægt (.felt .valg og input[type=radio]),
   fordi .felt label og .felt input står SENERE i filen og ellers vinder på
   rækkefølge: teksten ville blive versaler i etiketstørrelse, og
   radioknappen lige så bred som rækken. */
.valg-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.felt .valg { display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: #fff; border: 1px solid #e2ddd5; border-radius: 6px; padding: 14px 16px;
  min-height: 48px; font-size: var(--f-lille); font-weight: 400; color: #555;
  letter-spacing: normal; text-transform: none;
  transition: border-color .15s ease, background-color .15s ease; }
.felt .valg:hover { border-color: #c8a96e; }
.felt .valg span { flex: 1 1 auto; }
.felt .valg b { font-weight: 500; color: #1a1a2e; white-space: nowrap; }
.valg input[type="radio"] { accent-color: #c8a96e; width: 18px; height: 18px;
  min-width: 18px; flex: 0 0 auto; margin: 0; padding: 0; min-height: 0; border-radius: 50%; }
.felt .valg:has(input:checked) { border-color: #c8a96e; background: #fdfbf7; }
.felt .valg:has(input:focus-visible) { outline: 2px solid #c8a96e; outline-offset: 2px; }

/* ---- formular ---- */
.felt { display: flex; flex-direction: column; gap: 6px; }
.felt label { font-size: var(--f-label); font-weight: 500; color: #888; letter-spacing: 0.04em; text-transform: uppercase; }
.felt input, .felt select, .felt textarea {
  font-family: inherit; font-size: var(--f-lille); color: #1a1a1a; background: #fff;
  border: 1px solid #ddd; border-radius: 6px; padding: 13px 15px; min-height: 48px; width: 100%;
}
.felt textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: none; border-color: #c8a96e; }
.fuld { grid-column: 1 / -1; }

/* ---- pladsholdere ---- */
.pladsholder { border: 1px dashed #cfc6b2; background: #faf9f7; border-radius: 10px; padding: 30px 32px; color: #9a917d; }
.pladsholder-mærke { font-size: var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: #b0a68f; border: 1px dashed #cfc6b2; border-radius: 4px; padding: 6px 12px; }

/* ---- footer ---- */
.footer { background: #1a1a2e; margin-top: 0; }
.footer .wrap { padding-top: 72px; padding-bottom: 40px; }
.footer-kolonner { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 60px; padding-bottom: 48px; }
.footer-label { margin: 0 0 20px; font-size: var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: #c8a96e; font-weight: 500; }
.footer-gospel { margin: 0 0 14px; font-family: 'Playfair Display', Georgia, serif; font-size: 20px; color: #fff; }
.footer-liste { display: flex; flex-direction: column; gap: 10px; font-size: var(--f-lille); color: rgba(255,255,255,0.62); }
.footer-liste a { color: rgba(255,255,255,0.62); }
.footer-liste a:hover { color: #c8a96e; }
.footer-liste .dæmpet { color: rgba(255,255,255,0.35); margin-top: 6px; }
.footer-bund { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.footer-bund-venstre { display: flex; align-items: center; gap: 26px; }
.dmf { height: 42px; width: auto; opacity: 0.85; display: block; }
.copyright { font-size: var(--f-meta); color: rgba(255,255,255,0.3); }
.sociale { display: flex; align-items: center; gap: 18px; }
.sociale a { color: rgba(255,255,255,0.5); display: inline-flex; }
.sociale a:hover { color: #c8a96e; }

/* ---- mobil ---- */
@media (max-width: 900px) {
  .nav-inner { height: auto; padding-block: 18px; flex-wrap: wrap; gap: 16px; }
  .nav-links { order: 3; width: 100%; gap: 18px; flex-wrap: wrap; }
  .navlink, .navlink-active { font-size: var(--f-lille); }
  h1 { font-size: 32px; }
  h2 { font-size: 27px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .vaelger-inner { padding: 18px var(--gutter); }
  .footer-kolonner { grid-template-columns: 1fr; gap: 40px; }
  .footer-bund { flex-direction: column; align-items: flex-start; gap: 24px; }
  section { padding-top: 56px; }
  section.hvid { margin-top: 56px; padding: 56px 0; }
  .hoved .wrap { padding-top: 52px; padding-bottom: 52px; }
}

/* ---- forsidens egne blokke ---- */
.hero { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 70px; align-items: center; min-height: 560px; padding-top: 0; padding-bottom: 0; }
.hero-tekst { padding: 72px 0; }
.hero-h1 { font-size: clamp(34px, 4vw, 50px); color: #fff; letter-spacing: -0.01em; text-wrap: pretty; }
.hero-knapper { display: flex; align-items: center; gap: 16px; margin-top: 42px; flex-wrap: wrap; }
.hero-foto { align-self: stretch; width: 420px; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
/* Linjen ved siden af den gyldne knap. Står på navy, så den kan ikke bruge
   .note, der er skrevet til lys baggrund. */
.hero-note { margin: 0; font-size: var(--f-lille); color: rgba(255,255,255,0.5); font-style: normal; }
.om-teaser { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 70px; align-items: center; }
/* Mangler billedet til pladsen, skal teksten ikke stå i en 340 px tom spalte —
   og heller ikke i venstre halvdel af en tom side, som om noget var faldet ud.
   Én spalte, centreret, venstrestillet tekst: så ser det ud som et valg. */
.om-teaser-uden-foto { grid-template-columns: minmax(0, 760px); justify-content: center; }
/* Temaerne. Stod før på forsiden på navy; står nu på Ydelser → erhverv,
   hvor køberen alligevel skal hen for at se prisen. Derfor lyse farver. */
.temaer-blok { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px 40px; margin-top: 26px; }
.tema { border-top: 1px solid rgba(200,169,110,0.6); padding-top: 20px; }
.tema h3 { margin: 0 0 8px; color: #8a6f38; }
.tema p { margin: 0; font-size: var(--f-lille); line-height: 1.75; color: #777; }
.om-foto { width: 340px; height: 420px; object-fit: cover; object-position: center 12%; border-radius: 10px; display: block; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .om-hero { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .om-hero-tekst { padding: 40px 0 34px; }
  .om-hero-foto { order: -1; height: 300px; align-self: auto; }
  .gospel-blok { grid-template-columns: 1fr; gap: 34px; padding-top: 52px; padding-bottom: 52px; }
  .gospel-kontakt { border-left: none; padding-left: 0; border-top: 1px solid rgba(200,169,110,0.3); padding-top: 24px; }
  .hero-tekst { padding: 44px 0 36px; }
  .hero-h1 { font-size: 34px; }
  .hero-foto { order: -1; height: 300px; }
  .temaer-blok { grid-template-columns: 1fr; gap: 22px; }
  .om-teaser { grid-template-columns: 1fr; gap: 34px; }
  .om-foto { width: 100%; height: 300px; }
}

/* ---- om mig ---- */
.om-hero { display: grid; grid-template-columns: 460px minmax(0,1fr); gap: 80px; align-items: center; min-height: 560px; padding-top: 0; padding-bottom: 0; }
.om-hero-foto { width: 460px; height: 100%; object-fit: cover; object-position: center 15%; align-self: stretch; display: block; }
.om-hero-tekst { padding: 80px 0; }
.gospel-blok { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 80px; align-items: center; padding-top: 80px; padding-bottom: 80px; }
.gospel-kontakt { border-left: 1px solid rgba(200,169,110,0.3); padding-left: 40px; display: flex; flex-direction: column; gap: 12px; font-size: var(--f-lille); color: rgba(255,255,255,0.62); }

/* ---- medier ---- */
.video-stor { position: relative; padding-top: 42%; border-radius: 10px; overflow: hidden; background: #efece4; }
.video-stor iframe, .video-lille iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-stor > .pladsholder { position: absolute; inset: 0; }
.video-lille { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #efece4; }
.video-lille > .pladsholder { position: absolute; inset: 0; }
.lyd-raekke { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 30px; border-bottom: 1px solid #e2ddd5; flex-wrap: wrap; }
.lyd-raekke:last-child { border-bottom: none; }
.lyd-raekke audio { max-width: 320px; }
.galleri-foto { width: 100%; height: 280px; object-fit: cover; border-radius: 10px; display: block; }

@media (max-width: 900px) {
  .om-hero { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .om-hero-foto { height: 320px; }
  .om-hero-tekst { padding: 40px 0; }
  .gospel-blok { grid-template-columns: 1fr; gap: 34px; padding-block: 52px; }
  .gospel-kontakt { border-left: none; border-top: 1px solid rgba(200,169,110,0.3); padding: 24px 0 0; }
  .video-stor { padding-top: 56.25%; }
}

/* ---- prisbladet ---- */
.pris-sektion { border: 1px solid #e2ddd5; border-radius: 10px; overflow: hidden; background: #fff; margin-bottom: 20px; }
.pris-sektion-hoved { background: #f7f5f0; padding: 18px 30px 15px; border-bottom: 1px solid #e2ddd5; }
.pris-sektion-titel { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 20px; color: #1a1a2e; }
.pris-sektion-under { margin: 4px 0 0; }
.pris-raekke {
  width: 100%; text-align: left; background: #fff; border: none; border-left: 3px solid #c8a96e;
  padding: 20px 30px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 20px;
  align-items: baseline; cursor: pointer; font-family: inherit;
}
.pris-raekke:hover { background: #fdf8f2; }
.pris-raekke[aria-expanded="true"] { background: #fdf5e6; }
.pris-raekke-navn { font-size: var(--f-brod); font-weight: 500; color: #1a1a1a; }
.pris-raekke-hint { grid-column: 1 / -1; font-size: var(--f-label); color: #c8a96e; font-weight: 500; }
.pris-form { padding: 26px 30px 22px; background: #faf9f7; border-top: 1px solid #e2ddd5; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.afkryds { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2ddd5; border-radius: 6px; padding: 14px 16px; font-size: var(--f-lille); color: #555; cursor: pointer; min-height: 48px; }
.afkryds input { width: 18px; height: 18px; accent-color: #c8a96e; }
.afkryds span { flex-grow: 1; }
.afkryds em { color: #aaa; font-size: var(--f-meta); }
.afkryds b { font-weight: 500; color: #1a1a2e; white-space: nowrap; }
.prisoversigt { background: #fff; border: 1px solid #e2ddd5; border-radius: 8px; padding: 20px 24px; margin-top: 20px; font-size: var(--f-lille); color: #555; }
.oversigt-linje { display: flex; justify-content: space-between; gap: 20px; padding: 4px 0; }
.oversigt-total { border-top: 1px solid #e2ddd5; margin-top: 8px; padding-top: 10px; font-weight: 600; color: #1a1a2e; font-size: var(--f-brod); }
.oversigt-moms { margin: 10px 0 0; font-size: var(--f-meta); color: #8a8272; }
/* Noten siger, at kørslen ikke er i totalen. Det er ikke en detalje, det er
   en oplysning om, at tallet ovenover ikke er hele prisen — så den skal ses.
   Grå kursiv læste som et forbehold, man kunne springe over. */
.oversigt-note { margin: 8px 0 0; font-size: var(--f-meta); line-height: 1.5; color: #8a6f38; }
.form-bund { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.form-svar { margin: 16px 0 0; padding: 14px 18px; border-radius: 6px; font-size: var(--f-lille); }
.form-svar-ok { background: #eaf3e8; border: 1px solid #a8d8a8; color: #2d7a2d; }
.form-svar-fejl { background: #fdeeee; border: 1px solid #e0b4b4; color: #a33; }
.tillaeg-raekke { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 30px; border-bottom: 1px solid #e2ddd5; font-size: var(--f-brod); color: #1a1a1a; }
.tillaeg-raekke:last-child { border-bottom: none; }
.tillaeg-raekke em { display: block; font-size: var(--f-meta); color: #aaa; margin-top: 3px; }
.tillaeg-raekke b { font-weight: 500; color: #1a1a2e; white-space: nowrap; }
/* .moms-note og .vaelger-moms stod her, da momsen blev forklaret tre steder
   på hver side. Forklaringen er væk; etiketten under prisen siger det hele. */

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .pris-raekke, .pris-form, .tillaeg-raekke, .pris-sektion-hoved { padding-left: 20px; padding-right: 20px; }
  .form-bund { flex-direction: column; align-items: stretch; }
}

/* ---- kontaktsiden ---- */
.kontakt-layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 50px; align-items: start; }
.kontakt-side { display: flex; flex-direction: column; gap: 24px; }
.kontaktkort { background: #1a1a2e; border-radius: 10px; padding: 38px 36px; }
.kontaktkort-hoved { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.kontaktkort-hoved img { width: 62px; height: 62px; border-radius: 50%; display: block; }
.kontaktkort-navn { margin: 0 0 3px; font-family: 'Playfair Display', Georgia, serif; font-size: 20px; color: #fff; }
.kontaktkort-titel { margin: 0; font-size: var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: #c8a96e; }
.kontaktkort-linjer { display: flex; flex-direction: column; gap: 12px; font-size: var(--f-brod); color: rgba(255,255,255,0.85); }
.kontaktkort-linjer a { color: rgba(255,255,255,0.85); }
.kontaktkort-linjer a:hover { color: #c8a96e; }
.godt-titel { margin: 0 0 4px; font-size: var(--f-lille); font-weight: 500; color: #1a1a2e; }
.godt-tekst { margin: 0; font-size: var(--f-lille); line-height: 1.7; color: #777; }

@media (max-width: 900px) {
  .kontakt-layout { grid-template-columns: 1fr; gap: 28px; }
  .pris-sektion-hoved, .pris-form { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --- Ydelseskort: foto og handlingsknap ------------------------------- */
/* Fotoet bløder ud i kortets kanter: bredden er kortets indhold PLUS begge
   sidepolstringer, og de negative marginer trækker det ud. Men `img { max-width:
   100% }` højere oppe klippede de ekstra 68px væk igen, så billedet stoppede en
   sidepolstring for tidligt i højre side. Den globale spærre er rigtig for alle
   andre billeder — dette ene skal have lov at stikke ud, og siger det selv.
   `object-fit: cover` beskærer af sig selv, så et foto i et hvilket som helst
   format udfylder rammen uden at blive strakt. */
.ydelse-foto { width: calc(100% + var(--kort-x) * 2); max-width: none;
  height: 180px; object-fit: cover;
  margin: calc(var(--kort-y) * -1) calc(var(--kort-x) * -1) 4px;
  border-radius: 10px 10px 0 0; display: block; }
.btn-kort { margin-top: auto; align-self: flex-start; }

/* --- Aktivitetsbobler (afløser dropdown'en) --------------------------- */
.felt .label { display: block; font-size: var(--f-meta); letter-spacing: 0.04em; text-transform: uppercase;
  color: #999; margin-bottom: 10px; }
.bobler { display: flex; flex-wrap: wrap; gap: 8px; }
.boble { font-family: inherit; font-size: var(--f-meta); color: #555; background: #fff; border: 1px solid #e2ddd5;
  border-radius: 20px; padding: 9px 17px; cursor: pointer; transition: all .15s ease; }
.boble:hover { border-color: #c8a96e; color: #1a1a2e; }
.boble-valgt { background: #1a1a2e; border-color: #1a1a2e; color: #fff; }
.boble-valgt:hover { color: #fff; }
.boble:focus-visible { outline: 2px solid #c8a96e; outline-offset: 2px; }

/* --- Organisationer man har spillet for ------------------------------- */
.org-liste { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.org-liste li { font-size: var(--f-meta); color: #777; background: #faf9f7; border: 1px solid #e2ddd5;
  border-radius: 20px; padding: 8px 16px; }

/* --- "Hvem er I?" — de tre kort ER målgruppevalget ------------------- */
.kort-valgbar { text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.kort-valgbar:hover { border-color: #c8a96e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,26,46,.07); }
.kort-valgbar:focus-visible { outline: 2px solid #c8a96e; outline-offset: 3px; }
.kort-valgt { background: #1a1a2e; border-color: #1a1a2e; }
.kort-valgt h3, .kort-valgt .brød { color: #fff; }
.kort-valgt .brød { color: rgba(255,255,255,.78); }
.kort-valgt .laast-link { color: #c8a96e; }
.kort-valgt:hover { border-color: #c8a96e; }
.valgt-flueben { color: #c8a96e; font-size: 0.7em; margin-left: 10px; vertical-align: middle; }

/* --- Henvisning ud af huset (fx sangundervisning på Skrål.dk) --------- */
.henvisning { margin-top: 26px; background: #fff; border: 1px solid #e2ddd5; border-left: 3px solid #c8a96e;
  border-radius: 8px; padding: 26px 32px; display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; }

/* --- Citater ---------------------------------------------------------
   ÉN definition, der holder på alle bredder. Før var der tre: kursiv
   Playfair 18,5 px på skærm, opret Playfair 17 px mellem 900 og 1150, og
   DM Sans 17 px på mobil. At der var brug for to undtagelser var beskeden:
   kursiv Playfair er en display-skrift — høj kontrast, tynde streger — og
   den blev sat til at bære udtalelser på op til 947 tegn. Målt var
   forsidens kort på 36 tegn pr. linje i kursiv serif, og Referencer på 63.
   Det er ikke en overskrift, det er brødtekst, og så skal det sættes som
   brødtekst: samme skrift og samme størrelse som resten af sitet læses i.

   Citatet kendes nu på anførselstegnene og på kilden under sig — ikke på
   en skrift, der gør det svært at læse. Farven er en tone mørkere end
   brødteksten, så kortet stadig har et midtpunkt. */
.citat { margin: 0; font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  font-style: normal; font-size: var(--f-brod); line-height: 1.75; color: #3d3d3d;
  flex-grow: 1; text-wrap: pretty; }
.citat-kilde { margin: 0; font-size: var(--f-meta); color: #8a8272; }

/* Citatspalterne får deres egen bredde. Tre spalter gav ~31 tegn pr. linje
   i kursiv serif, hvilket er halvt af det læsbare. auto-fit med 380 px
   minimum giver to rolige spalter på skærm og én på smal. */
.grid-citater {
  display: grid;
  /* auto-FILL, ikke auto-fit: en enkelt udtalelse skal fylde ÉN spalte, ikke
     strække sig over hele bredden. Med auto-fit blev "Som optrædende"
     ét kort på 1140 px med ~100 tegn pr. linje.
     align-items:start, så et kort ikke bliver kunstigt højt, fordi
     nabokortet har en lang tekst. */
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  align-items: start;
  gap: 24px;
}

/* --- Læsbarhed mellem 900 og 1150 px --------------------------------
   Tre spalter blev for smalle, når vinduet fylder halvdelen af en bred
   skærm: priserne kom i klemme. To spalter i stedet.
   Citaterne har ingen undtagelse mere — de er sat som brødtekst på alle
   bredder, og det var netop de to undtagelser her, der viste at
   grundreglen var forkert. */
@media (max-width: 1150px) {
  :root { --gutter: 34px; }
  .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  /* Kortene bruger mindre polstring på en telefon — fotoets udblødning
     følger med af sig selv, fordi den regner ud fra de samme variabler. */
  .kort { --kort-x: 24px; --kort-y: 26px; }
}


/* --- Kor-links: profil først, Facebook som sekundær ------------------- */
.kor-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.kor-fb { font-size: var(--f-meta); color: #999; border-bottom: 1px solid #e2ddd5; }
.kor-fb:hover { color: #555; border-bottom-color: #c8a96e; }


/* --- Telefon: mindre polstring i panelerne, større trykflader ---------- */
@media (max-width: 600px) {
  .pris-sektion-hoved { padding: 16px 20px 13px; }
  .pris-form { padding: 22px 20px 20px; }
  .prisoversigt { padding: 16px 18px; }
  .cta { padding: 30px 24px; margin: 56px 0; }
  .cta-overskrift { font-size: 23px; }
  .hoved .wrap { padding-top: 40px; padding-bottom: 40px; }
  .om-hero-tekst { padding: 34px 0 30px; }
  /* Knapper i fuld bredde er lettere at ramme med en tommelfinger. */
  .form-bund { flex-direction: column; align-items: stretch; }
  .form-bund .btn-navy { width: 100%; }
  .hero-knapper { gap: 12px; }
  .hero-knapper .btn-gold, .hero-knapper .btn-ghost { flex: 1 1 100%; justify-content: center; }
  .btn-kort { align-self: stretch; text-align: center; justify-content: center; }
  /* Menuen: navn og knap på én linje, links på deres egen. */
  .nav-inner { gap: 12px; padding-block: 14px; }
  .nav-links { gap: 14px 16px; }
  .navlink, .navlink-active { font-size: var(--f-lille); }
  .lyd-raekke { padding: 16px 20px; }
  .lyd-raekke audio { max-width: 100%; width: 100%; }
  .galleri-foto, .om-foto { height: 240px; }
  .org-liste { gap: 8px; }
  .org-liste li { font-size: var(--f-meta); padding: 7px 13px; }
}

/* Kontaktsidens panel er sidens hovedindhold og må have lidt mere luft
   end prisbladets rækker — men kun hvor der er plads til det. */
.pris-sektion-hoved-stor { padding: 24px 40px 20px; }
.pris-form-stor { padding: 34px 40px 36px; }
@media (max-width: 600px) {
  .pris-sektion-hoved-stor { padding: 18px 20px 15px; }
  .pris-form-stor { padding: 24px 20px 22px; }
}


/* --- Udblødning til kanten -------------------------------------------
   Et billede der skal gå helt ud i skærmkanten, skal VOKSE lige så meget
   som det trækkes tilbage. Ellers hænger det skævt: 0 px til venstre og
   44 px til højre, som portrætterne gjorde. Reglen står til sidst i filen,
   så den ikke kan overskrives af en senere sektion, og den regner ud fra
   --gutter, så den følger sidemargenen automatisk. */
@media (max-width: 900px) {
  .hero-foto, .om-hero-foto {
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
}

/* Målgruppevælgerens piller var 38 px høje — under de 44 px, en tommelfinger
   har brug for. Den valgte var 40, så de sad også en smule skævt. */
.pill, .pill-on { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Telefon: mere luft ----------------------------------------------
   Menuen, portrættet og knapperne stod for tæt. Her er afstandene sat
   op, og portrættet er trukket ind i sidemargenen igen, så der er luft
   HELE vejen rundt om det i stedet for kant-til-kant. */
@media (max-width: 900px) {
  .nav-inner { padding-block: 26px; gap: 22px; }
  .nav-links {
    width: 100%;
    gap: 16px 22px;
    padding-top: 20px;
    border-top: 1px solid #eeeae2;   /* skiller navn og knap fra menupunkterne */
  }
  .navlink, .navlink-active { font-size: var(--f-lille); }

  /* Portrættet med luft omkring — ikke længere ud i kanten. */
  .hero-foto, .om-hero-foto {
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    border-radius: 10px;
    height: 300px;
  }
  .hero { gap: 30px; }
  .hero-tekst { padding: 34px 0 46px; }
  .om-hero-tekst { padding: 30px 0 44px; }
  .hoved .wrap { padding-top: 40px; padding-bottom: 52px; }

  /* Knapperne skal have plads at stå på. */
  .hero-knapper { margin-top: 34px; gap: 14px; }
  .forloeb-fod { gap: 22px; margin-top: 34px; }
  .btn-kort { margin-top: 20px; }
}

@media (max-width: 600px) {
  .nav-inner { padding-block: 24px; gap: 20px; }
  /* Knappen i menuen må ikke klemme sig op ad navnet. */
  .nav-inner .btn-gold { margin-left: 12px; }
  section { padding-top: 62px; }
  section.hvid { margin-top: 62px; padding: 62px 0; }
  .kort { --kort-y: 28px; }
  .cta { padding: 34px 26px; margin: 62px 0; }
}

/* --- Menuknappen ------------------------------------------------------
   Vises kun på små skærme, og kun når JavaScript har meldt sig (klassen
   menu-js). Uden JavaScript står linkene synlige som før. */
.nav-knap { display: none; }
.nav-cta-mobil { display: none; }

@media (max-width: 900px) {
  .nav-knap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto;
    background: none; border: 1px solid #e2ddd5; border-radius: 8px;
    cursor: pointer; padding: 0;
  }
  .nav-knap:focus-visible { outline: 2px solid #c8a96e; outline-offset: 2px; }
  .nav-streger, .nav-streger::before, .nav-streger::after {
    display: block; width: 20px; height: 1.5px; background: #1a1a2e;
    border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
  }
  .nav-streger::before, .nav-streger::after { content: ''; position: absolute; }
  .nav-streger::before { transform: translateY(-6px); }
  .nav-streger::after  { transform: translateY(6px); }
  .nav-knap[aria-expanded="true"] .nav-streger { background: transparent; }
  .nav-knap[aria-expanded="true"] .nav-streger::before { transform: rotate(45deg); }
  .nav-knap[aria-expanded="true"] .nav-streger::after  { transform: rotate(-45deg); }

  /* Kun med JavaScript foldes menuen sammen. */
  .menu-js .nav-links {
    display: none;
    flex-direction: column; align-items: flex-start;
    gap: 4px; padding-top: 20px; margin-top: 4px;
    border-top: 1px solid #eeeae2;
  }
  .menu-js .nav-links-aaben { display: flex; }
  /* :not(.btn-gold) — ellers nulstiller denne regel knappens sidepolstring,
     præcis som padding-shorthand gjorde ved .wrap tidligere. */
  .menu-js .nav-links a:not(.btn-gold) { padding: 13px 0; font-size: var(--f-brod); }
  .menu-js .nav-cta { display: none; }          /* knappen flytter ind i menuen */
  .menu-js .nav-cta-mobil { display: inline-flex; margin-top: 18px; align-self: stretch; justify-content: center; }
  .menu-js .nav-inner { gap: 0; row-gap: 0; }
  .menu-js .brand { margin-right: auto; }
}

/* --- Medlemscitat på korkortene ---------------------------------------
   Havde før sin egen størrelse, fordi grundreglen var 18,5 px kursiv og
   det var for meget i et korkort. Nu er grundreglen brødtekst, og så er
   der ingen undtagelse at holde. Kun stregen over og luften under kilden
   er kortets eget. */
.kor-citat { margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid #e2ddd5; }
.kor-citat .citat-kilde { margin-top: 10px; }
@media (max-width: 900px) { .kor-citat .citat { font-size: var(--f-lille); } }

/* --- Udvalgt erfaring: årstal i venstre spalte, opgaven i højre --------- */
.erfaring { margin: 0; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 0; }
.erfaring dt, .erfaring dd { margin: 0; padding: 18px 0; border-top: 1px solid #e2ddd5; }
.erfaring dt { font-size: var(--f-meta); color: #b09256; letter-spacing: 0.02em; font-weight: 500;
  font-variant-numeric: tabular-nums; padding-right: 24px; }
.erfaring dd { font-size: var(--f-brod); line-height: 1.75; color: #555; text-wrap: pretty; }
@media (max-width: 700px) {
  /* På telefon står årstallet over teksten, uden streg imellem. */
  .erfaring { grid-template-columns: 1fr; }
  .erfaring dt { padding: 20px 0 0; }
  .erfaring dd { padding: 4px 0 18px; border-top: none; font-size: var(--f-brod); }
}

/* --- FællesSkabere: "Vælg dem når"-linjen er sidens omdrejningspunkt --- */
.vaelg-dem { margin: 0; font-size: var(--f-lille); line-height: 1.6; color: #1a1a2e;
  background: #faf9f7; border: 1px solid #e2ddd5; border-left: 3px solid #c8a96e;
  border-radius: 6px; padding: 12px 16px; }
.vaelg-dem span { display: block; font-size: var(--f-label); letter-spacing: 0.16em;
  text-transform: uppercase; color: #b09256; font-weight: 500; margin-bottom: 4px; }

/* --- Ydelseskortets bund: pris og knap side om side -------------------
   Prisen er flyttet hertil fra toppen, så aktivitetsnavnene fanges først.
   margin-top:auto holder bunden i ro, så priserne står på linje på tværs
   af rækken og stadig kan sammenlignes. */
/* Kortets bund: pris og knap. De står stablet — ikke side om side — fordi
   en kolonne i grid3 kun er ~330 px: med lange knaptekster som "Book en
   optræden" ombrød rækken alligevel, og så stod nogle kort med prisen ved
   siden af knappen og andre over den. Stablet ser alle kort ens ud, og
   knappen får kortets fulde bredde at blive ramt på. margin-top:auto holder
   bunden i bund, så priserne flugter på tværs af en række. */
.kort-bund { margin-top: auto; padding-top: 18px; border-top: 1px solid #e2ddd5;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
/* Prisen højrestilles — den skal stå i SAMME kolonne som beløbene over den.
   I det samme kort stod tillægget "+ 1.200 kr." højrestillet ved kortets
   kant (x=399) og grundbeløbet "3.695 kr." venstrestillet (x=105), tyve
   pixels under hinanden. To beløb, to retninger, i samme kasse. Tal, man
   skal kunne sammenligne, hører i én kolonne — det er hele grunden til, at
   regnskaber højrestiller. */
.kort-bund .pris-tal { text-align: right; }
.kort-bund .btn-kort { margin-top: 0; align-self: stretch; text-align: center; }

/* Beløbet i en tilvalgslinje må aldrig brydes over flere linjer ("+ 22.500
   kr." blev tre linjer i et smalt kort). Teksten til venstre må gerne. */
.tilvalg-linje b { white-space: nowrap; }
.tilvalg-linje span { min-width: 0; }

/* Ydelseskortets grå specifikationslinje. Står lige under overskriften som
   en underrubrik — derfor lidt negativ topmargin, så den følger navnet
   tættere end de øvrige blokke i kortet. */
/* Specifikationslinjen: grå og kursiv, tæt under overskriften. Kursiven
   skiller den fra brødteksten, så den læses som en underrubrik og ikke som
   den første sætning i beskrivelsen. Samme regel for ydelseskort og
   prisblad — samme funktion skal se ens ud. */
.kort-spec, .pris-sektion-under { font-size: var(--f-meta); line-height: 1.6; color: #999;
  font-style: italic; letter-spacing: 0.01em; }
.kort-spec { margin: -14px 0 0; }

/* Forsidens citatstrimmel: præcis tre kort i én række på brede skærme.
   auto-fill gav to kolonner og et enligt tredje kort på næste linje. */
@media (min-width: 1050px) { .grid-citater-3 { grid-template-columns: repeat(3, 1fr); } }

/* Ydelsesgruppens hoved (MusikBesøg). Gruppen er selve ydelsen, kortene er
   varianter af den — derfor h2-vægt og luft ned til gitteret. */
.gruppe-hoved { margin: 0 0 26px; }
.gruppe-hoved h2 { margin: 0 0 10px; }

/* Ydelsesnavnet over variantens navn inde i kortet. */
.kort-overlinje { margin: 0 0 6px; font-size: var(--f-label); letter-spacing: 0.2em;
  text-transform: uppercase; color: #c8a96e; font-weight: 500; }

/* Pris og SPAR-mærke på samme linje nederst i kortet. Mærket er større og
   får luft, så det ses — 10 px blegt grønt forsvandt. */
.pris-linje { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kort-bund .mærke { font-size: var(--f-label); padding: 5px 12px; letter-spacing: 0.04em; }

/* SPAR-mærket i prisbladets rækkeknap: mærket til venstre for beløbet, som
   er højrestillet i grid'et. Baseline holdes, så tallet ikke hopper. */
.pris-raekke .pris-linje { justify-self: end; align-items: baseline; gap: 10px; }
.pris-raekke .mærke { font-size: var(--f-label); padding: 4px 10px; }

/* Aktivitetsbobler der kan klikkes. Spørgsmålstegnet er det eneste signal
   om, at der ER en forklaring — uden det ligner boblen bare et mærkat. */
/* Klikbar aktivitetsboble — uden nogen markering.
   Først et spørgsmålstegn, så en punkteret understregning, nu ingenting:
   boblen er i forvejen en afrundet kapsel med kant og baggrund, og den form
   siger "tryk på mig" af sig selv. Hver ekstra markering var støj oven på et
   signal, der allerede var der. Hover og tastaturfokus står tilbage — de
   bekræfter, hvad formen lovede. */
.chip-link { text-decoration: none; display: inline-flex; align-items: center; }
.chip-link:hover, .chip-link:focus-visible { background: #1a1a2e; border-color: #1a1a2e;
  color: #fff; }

/* Tekst der kun findes for skærmlæsere. Ikke display:none — så ville den
   heller ikke blive læst op. */
.kun-skaermlaeser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Beskrivelsen man lander på. :target markerer den i to sekunder, så man
   kan se hvilken af de ni man blev sendt til. */
.aktivitet-def { border-top: 1px solid #e2ddd5; padding-top: 20px; }
.aktivitet-def:target { border-top-color: #c8a96e; }
.aktivitet-def:target h3 { color: #c8a96e; }

/* Vilkårsboksen på nodesiden. Guldkant til venstre som de øvrige
   "læs også dette"-bokse på sitet, så den signalerer samme slags tekst. */
.vilkaar { margin-top: 40px; background: #fff; border: 1px solid #e2ddd5;
  border-left: 3px solid #c8a96e; border-radius: 8px; padding: 26px 32px; }
.liste-check { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 720px; }
.liste-check li { position: relative; padding-left: 26px; font-size: var(--f-lille); line-height: 1.7; color: #555; }
.liste-check li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: #c8a96e; font-size: var(--f-meta); font-weight: 600; }

/* "Se alle 21 udtalelser". details/summary, så den virker uden JavaScript. */
/* --- Karrusel: udtalelser på tværs i stedet for nedad -------------------
   Mekanikken er CSS alene. Sporet er en vandret rulleboks med snap; kortene
   har fast bredde, så det sidste synlige kort altid er halvt afskåret i
   kanten — det er DEN detalje, der siger "der er mere", og den skal ikke
   fjernes for at få en pænere kant. Pile og tæller kommer fra karrusel.js og
   er lagt ovenpå: uden JavaScript mangler der pile, ikke indhold. */
.karrusel { position: relative; }
.karrusel-spor {
  display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* Luft til kortenes skygge og fokusring, og plads så et snappet kort ikke
     klistrer til kanten. Negativ margen holder rækken på linje med resten. */
  padding: 4px 4px 18px; margin: -4px -4px -18px;
  scroll-padding-left: 4px;
}
/* 460 px, ikke 360. Kortet er smallere end teksten i det: 460 − 68 px
   polstring giver ~46 tegn pr. linje, altså lige inde i det læsbare bånd på
   45-75. Ved 360 px falder det til 34, og så har man byttet en lang side ud
   med en side, der er svær at læse — det var netop den fejl, skriften på
   udtalelserne lige er blevet rettet for. To brede kort ad gangen slår tre
   smalle, når opgaven er at LÆSE ét af dem. */
.karrusel-spor > .kort {
  flex: 0 0 460px; scroll-snap-align: start;
  /* Kortene i en række skal være lige høje — et klippet citat fylder sine
     seks linjer, og resten er luft mellem tekst og bund (se .citat-bund). */
  align-self: stretch;
}
.karrusel-spor:focus-visible { outline: 2px solid #c8a96e; outline-offset: 4px; border-radius: 12px; }

/* Rullepanelet er en del af affordansen på en computer: det viser både at
   der er mere, og hvor langt man er. Derfor gøres det diskret, ikke usynligt. */
.karrusel-spor { scrollbar-width: thin; scrollbar-color: #d8d2c6 transparent; }
.karrusel-spor::-webkit-scrollbar { height: 6px; }
.karrusel-spor::-webkit-scrollbar-thumb { background: #d8d2c6; border-radius: 3px; }
.karrusel-spor::-webkit-scrollbar-track { background: transparent; }

/* Pile og tæller — kun når JavaScript har sat dem ind. */
.karrusel-styring { display: flex; align-items: center; gap: 10px; }
.karrusel-knap {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e2ddd5;
  background: #fff; color: #1a1a2e; font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}
.karrusel-knap:hover:not(:disabled) { border-color: #c8a96e; color: #8a6f38; }
.karrusel-knap:focus-visible { outline: 2px solid #c8a96e; outline-offset: 2px; }
.karrusel-knap:disabled { opacity: .3; cursor: default; }
.karrusel-tael { font-size: var(--f-meta); color: #8a8272; font-variant-numeric: tabular-nums;
  white-space: nowrap; min-width: 4.5em; text-align: right; }

/* Rollens hoved: overskrift til venstre, antal og pile til højre. */
.rolle-hoved { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.rolle-antal { font-size: var(--f-meta); color: #8a8272; }
/* Rollebåndene er søskende af samme slags og skal stå tættere end sidens
   almindelige sektioner — ellers bliver luften mellem dem det, man ser mest af. */
.rolle-baand { padding-top: 54px; }
.rolle-baand:first-of-type { padding-top: 72px; }

/* Karrusellens egne breakpoints står HER og ikke oppe i de almindelige
   mediablokke: reglerne længere oppe i filen ville tabe til grundreglen lige
   ovenfor, fordi den kommer sidst. Samme vægt, senere linje — den vinder. */
@media (max-width: 1150px) {
  /* 460 px gav kun ÉT synligt kort i et halvt vindue, og en karrusel med ét
     kort ad gangen er bare en side, der er svær at rulle i. 420 px giver to
     og ~42 tegn pr. linje, hvilket stadig kan læses. */
  .karrusel-spor > .kort { flex-basis: 420px; }
}
@media (max-width: 900px) {
  /* Smallere kort, så det næste altid kigger frem i kanten. */
  .karrusel-spor > .kort { flex: 0 0 82vw; max-width: 380px; }
  .karrusel-spor { gap: 16px; }
}

/* Den, der har slået bevægelse fra, skal ikke have et spor der glider. */
@media (prefers-reduced-motion: reduce) {
  .karrusel-spor { scroll-behavior: auto; }
}

/* Præcisering nederst i et ydelseskort, fx at AnSlag også er navnet på et band. */
.kort-fodnote { margin: 0; font-size: var(--f-meta); line-height: 1.65; color: #8a8272; font-style: italic; }

/* Den lange aktivitetsbeskrivelse. Foldet sammen, så ni aktiviteter ikke
   bliver til en mur — og åben uden JavaScript, hvis nogen lander direkte. */
.aktivitet-mere { margin-top: 14px; }
.aktivitet-mere > summary { cursor: pointer; list-style: none; display: inline-flex;
  align-items: center; gap: 8px; font-size: var(--f-meta); color: #c8a96e; font-weight: 500; padding: 6px 0; }
.aktivitet-mere > summary::-webkit-details-marker { display: none; }
.aktivitet-mere > summary::after { content: "↓"; font-size: var(--f-label); }
.aktivitet-mere[open] > summary::after { content: "↑"; }
.aktivitet-mere > summary:hover { color: #1a1a2e; }
.aktivitet-mere p { margin: 12px 0 0; font-size: var(--f-lille); line-height: 1.8; color: #666; }
.aktivitet-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px;
  margin: 0 0 16px; display: block; }

/* Kanalens logo (MorgenMokka) i henvisningsboksen. */
.kanal-logo { width: 84px; height: 84px; object-fit: cover; border-radius: 8px;
  border: 1px solid #e2ddd5; flex: 0 0 auto; }
.kanal-hoved { display: flex; align-items: flex-start; gap: 18px; }

/* Kundens egen overskrift over udtalelsen, og emnet nederst. Med 44
   udtalelser skal siden kunne skimmes — ikke kun læses fra ende til anden. */
.citat-overskrift { margin: 0; font-family: 'DM Sans', sans-serif; font-size: var(--f-brod);
  font-weight: 500; color: #1a1a2e; line-height: 1.5; }
.citat-fod { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: auto; }
.citat-emne { font-size: var(--f-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: #b09a6e; white-space: nowrap; }

/* Nummereret forløb (Indspilning). Tallet står som et mærke til venstre, så
   rækkefølgen læses før teksten — det er rækkefølgen, der beroliger. */
.trin { margin: 0; padding: 0; list-style: none; counter-reset: trin;
  display: grid; gap: 18px; max-width: 760px; }
.trin li { counter-increment: trin; position: relative; padding-left: 52px;
  font-size: var(--f-brod); line-height: 1.8; color: #555; }
.trin li::before { content: counter(trin); position: absolute; left: 0; top: 2px;
  width: 32px; height: 32px; border-radius: 50%; background: #1a1a2e; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: var(--f-lille); font-weight: 500;
  display: flex; align-items: center; justify-content: center; }
@media (max-width: 600px) { .trin li { padding-left: 44px; font-size: var(--f-lille); } }

/* Lange udtalelser klippes til seks linjer, med en label der folder ud.
   Ingen JavaScript: et skjult afkrydsningsfelt styrer CSS-reglen. Feltet er
   ikke display:none, for så kunne man ikke nå det med tastaturet. */
.mere-flag { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* flex-grow og -webkit-line-clamp kan ikke være sande på samme tid.
   .citat har flex-grow:1, så kilden bliver i bunden af et strakt kort — men
   det strækker også klippekassen ud over sine seks linjer: ellipsen sættes
   efter linje 6, og linje 7 og frem bliver stående, hvor den nederste
   skæres midt over. Det så ud som en fejl i teksten, og det var en fejl i
   layoutet. Det klippede citat vokser derfor ikke; .citat-fod har
   margin-top:auto og holder kilden nede af sig selv. */
.citat-klip { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden; flex-grow: 0; }
.mere-flag:checked ~ .citat-klip { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Knap og kilde i bunden. Vokser her — ikke i citatet — så luften i et
   strakt kort lægger sig mellem tekst og bund og ikke under knappen. */
.citat-bund { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.mere-knap { align-self: flex-start; cursor: pointer; font-size: var(--f-meta); font-weight: 500;
  color: #c8a96e; letter-spacing: 0.02em; padding: 2px 0; }
.mere-knap:hover { color: #1a1a2e; }
.mere-knap::after { content: " ↓"; font-size: var(--f-label); }
.mere-ud { display: none; }
/* Knappen ligger nu inde i .citat-bund, så afkrydsningsfeltet skal nå den
   gennem den — ikke som nabo. Glemmes det, folder teksten ud, men knappen
   bliver stående og siger "Læs hele udtalelsen" med en pil nedad. */
.mere-flag:checked ~ .citat-bund .mere-knap::after { content: " ↑"; }
.mere-flag:checked ~ .citat-bund .mere-knap .mere-ind { display: none; }
.mere-flag:checked ~ .citat-bund .mere-knap .mere-ud { display: inline; }
.mere-flag:focus-visible ~ .citat-bund .mere-knap { outline: 2px solid #c8a96e; outline-offset: 3px; }

/* Forsidens tre citater strækkes til samme højde. Et kort med kundens egen
   overskrift er ellers 37 px højere end et uden, og tre kort i én række skal
   slutte i samme linje. citat-fod har margin-top:auto, så kilden bliver i
   bunden af det strakte kort. */
.grid-citater-3 { align-items: stretch; }

/* ============================================================
   BLØDT SCROLL OG KONSEKVENT SVAR PÅ MUSEN
   ============================================================

   1) Ankre.
   Klik på en aktivitetsboble sprang før hårdt ned til beskrivelsen, og man
   mistede fornemmelsen af hvor på siden man landede. Nu glider den derhen.
   Respekterer systemindstillingen "reducér bevægelse": sætter man den, springer
   den som før — nogle mennesker bliver utilpasse af glidende bevægelse.

   scroll-margin-top gælder ALT med et id, ikke kun aktiviteterne. Uden den
   lander ankeret i allerøverste kant, hvor overskriften klistrer til toppen.
   ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
[id] { scroll-margin-top: 90px; }   /* svarer til menuens højde (88 px) */

/* 2) Hover og tastaturfokus.
   Reglen er: det der KAN klikkes, svarer på musen — og altid på samme måde.
   Det der ikke kan klikkes, svarer ikke. Et kort der løfter sig, men ikke gør
   noget når man trykker, er et løfte der ikke holdes. Derfor har ydelses-,
   citat- og kollegakortene bevidst ingen hover: knappen inde i dem har den.

   Samme regel dækker tastaturet. Uden :focus-visible kan man ikke se, hvor man
   er, når man tabber sig gennem siden — og det er den eneste måde, nogle
   mennesker kan bruge den på. */
.kort-valgbar, .pris-raekke, .boble, .chip-link, .btn-gold, .btn-navy, .btn-ghost,
.pill, .laast-link, .mere-knap, .aktivitet-mere > summary, .karrusel-knap,
.navlink, .navlink-active, .kor-fb, .nav-knap {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              transform .15s ease, box-shadow .15s ease;
}

/* Ét synligt fokusmærke til alt, hvad man kan nå med tabulatortasten. */
a:focus-visible, button:focus-visible, summary:focus-visible, label.mere-knap:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #c8a96e;
  outline-offset: 3px;
  border-radius: 3px;
}

/* 3) Kort man ikke kan klikke på, men som HAR noget at klikke på.
   Ydelseskortet er ikke et link — boblerne inde i det er, og et link kan ikke
   ligge inde i et andet. Men markøren skal alligevel svare, ellers ligner
   kortet dødt ved siden af målgruppekortene, der løfter sig.

   Løsningen er ærlig: når musen er over kortet, lyser KNAPPEN op — der hvor
   man faktisk skal klikke. Kortet selv rører sig ikke og lover derfor
   ingenting. :focus-within gør det samme for tastaturet. */
.kort:hover .btn-navy, .kort:focus-within .btn-navy,
.henvisning:hover .btn-navy, .henvisning:focus-within .btn-navy { background: #2a2a4e; }
.kort:hover .laast-link, .kort:focus-within .laast-link { color: #1a1a2e; }

/* Boblerne på forsiden står på beige og skal derfor være hvide, ikke
   transparente. Størrelsen er den samme som alle andre bobler. */
.chips-hvid .chip { background: #fff; padding: 10px 18px; }
.chips-hvid .chip-link:hover, .chips-hvid .chip-link:focus-visible { background: #1a1a2e; }

/* Tilvalgets note på sin egen linje under navnet.
   Inline klemte den sig ind mellem navn og beløb ("Ekstra musikere *pr.
   musiker pr. besøg* + 2.995 kr."), og på en telefon brækkede rækken midt i
   noten, så beløbet hang alene på anden linje. Navn og beløb er linjen;
   noten er en fodnote til navnet. */
.tilvalg-note { display: block; margin-top: 2px; font-size: var(--f-label);
                line-height: 1.45; color: #a39a88; }

/* SPAR-mærket på sin egen linje over prisen. Ved siden af beløbet skubbede
   det prisen ind mod midten, så kortene i en række ikke flugtede. */
.spar-linje { display: flex; justify-content: flex-end; margin-bottom: 2px; }

/* ---------------------------------------------------------------- guiden
   Kunden ved hvad dagen skal føre til, ikke hvad ydelsen hedder. Guiden
   spørger om anledningen og længden og finder selv ydelsen — og den er en
   almindelig GET-formular, så den virker uden JavaScript og kan sendes
   videre som et link. Farverne og de fem skriftstørrelser er sitets egne;
   der er ikke kommet en sjette til her. */
.guide { background: #faf9f7; border-top: 1px solid #e2ddd5; border-bottom: 1px solid #e2ddd5; padding: 38px 0 42px; }
.guide-overskrift { margin: 0 0 8px; font-size: 26px; font-weight: 500; color: #1a1a2e; letter-spacing: -0.01em; }
.guide-intro { margin: 0 0 26px; font-size: var(--f-brod); line-height: 1.7; color: #555; max-width: 62ch; }

.guide-gruppe { border: 0; padding: 0; margin: 0 0 22px; }
.guide-gruppe legend { padding: 0; margin-bottom: 11px; font-size: var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: #8a8272; font-weight: 500; }

.guide-valg { display: flex; flex-wrap: wrap; gap: 10px; }
.guide-boks { flex: 1 1 230px; position: relative; }
.guide-boks input { position: absolute; opacity: 0; width: 0; height: 0; }
.guide-boks span { display: block; height: 100%; background: #fff; border: 1px solid #e2ddd5; border-radius: 10px; padding: 13px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.guide-boks strong { display: block; font-size: var(--f-lille); font-weight: 500; color: #1a1a2e; }
.guide-boks em { display: block; margin-top: 3px; font-style: normal; font-size: var(--f-meta); color: #8a8272; line-height: 1.5; }
.guide-boks span:hover { border-color: #c8a96e; }
.guide-boks input:checked + span { background: #1a1a2e; border-color: #1a1a2e; }
.guide-boks input:checked + span strong { color: #fff; }
.guide-boks input:checked + span em { color: rgba(255,255,255,0.62); }
.guide-boks input:focus-visible + span { outline: 2px solid #c8a96e; outline-offset: 2px; }

.guide-bund { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.guide-bund label { font-size: var(--f-meta); color: #8a8272; display: block; margin-bottom: 5px; }
.guide-bund input { font: inherit; font-size: var(--f-lille); padding: 13px 14px; border: 1px solid #e2ddd5; border-radius: 8px; background: #fff; width: 150px; }
.guide-bund input:focus-visible { outline: 2px solid #c8a96e; outline-offset: 1px; }
.guide-bund > div { display: flex; flex-direction: column; }

.guide-svar { margin-top: 30px; background: #fff; border: 1px solid #e2ddd5; border-left: 3px solid #c8a96e; border-radius: 0 10px 10px 0; padding: 22px 26px; scroll-margin-top: 90px; }
.guide-svar-hoved { margin: 0 0 4px; font-size: var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: #c8a96e; font-weight: 500; }
.guide-svar-navn { margin: 0; font-size: 24px; font-weight: 500; color: #1a1a2e; line-height: 1.2; }
.guide-svar-under { margin: 6px 0 0; font-size: var(--f-meta); color: #8a8272; }
.guide-svar-tekst { margin: 14px 0 0; font-size: var(--f-brod); line-height: 1.75; color: #555; max-width: 62ch; }
.guide-svar-note { margin: 14px 0 0; font-size: var(--f-meta); color: #8a8272; line-height: 1.6; }

@media (max-width: 640px) {
  .guide-boks { flex: 1 1 100%; }
  .guide-bund { align-items: stretch; }
  .guide-bund input { width: 100%; }
  .guide-bund .btn-gold { width: 100%; }
}

/* ------------------------------------------------------- aktivitetssiderne
   Indgangen fra Google. Folk søger på "firmagospel" og "stomp workshop",
   ikke på "AnSlag" — så aktiviteten får sin egen side med sit eget navn i
   titlen, og kategorinavnet dukker først op ved prisen. */
.akt-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.akt-kort { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e2ddd5; border-radius: 10px; padding: 20px 22px; text-decoration: none; transition: border-color .15s; }
.akt-kort:hover { border-color: #c8a96e; }
.akt-kort-navn { font-size: var(--f-stor); font-weight: 500; color: #1a1a2e; }
.akt-kort-tekst { font-size: var(--f-lille); line-height: 1.65; color: #555; }
.akt-kort-mere { margin-top: auto; padding-top: 6px; font-size: var(--f-meta); color: #c8a96e; }

.akt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.akt-liste li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; background: #faf9f7; border: 1px solid #e2ddd5; border-radius: 8px; padding: 12px 16px; }
.akt-liste strong { font-size: var(--f-lille); font-weight: 500; color: #1a1a2e; }
.akt-liste span { font-size: var(--f-meta); color: #8a8272; }

.akt-handling { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.aktivitet-side { font-size: var(--f-meta); color: #c8a96e; }
.aktivitet-side:hover { text-decoration: underline; }

/* Målgruppevalget på forsiden: en lille linje under anledningskortene, ikke
   et konkurrerende hovedvalg. Den der allerede ved, hun ringer fra et
   plejehjem, skal ikke tvinges gennem et spørgsmål hun har svaret på. */
.veje-maalgruppe { margin: 22px 0 0; font-size: var(--f-meta); color: #8a8272; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.veje-maalgruppe a { color: #1a1a2e; border-bottom: 1px solid rgba(200,169,110,0.5); padding-bottom: 1px; }
.veje-maalgruppe a:hover { border-bottom-color: #c8a96e; }
.veje-maalgruppe a[aria-current="true"] { color: #c8a96e; font-weight: 500; }
.guide-note { margin: 10px 0 0; font-size: var(--f-meta); color: #8a8272; line-height: 1.6; max-width: 62ch; }

/* Forslagskortet med billede. Kunden skal kunne SE hvad der foreslås — et navn
   og en pris er ikke nok at beslutte ud fra. Uden foto falder kortet tilbage
   til én kolonne, så en manglende fil aldrig efterlader et tomt hul. */
.guide-svar-foto { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.guide-svar-billede { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
@media (max-width: 640px) {
  .guide-svar-foto { grid-template-columns: 1fr; gap: 16px; }
  .guide-svar-billede { aspect-ratio: 16 / 9; }
}

/* Fravalget i guiden: "Betyder ikke noget" er et svar, ikke en mulighed på
   linje med de fire længder. Dæmpet, så den ikke konkurrerer — men synlig,
   så man kan se, at man HAR lov at springe spørgsmålet over. */
/* Kun når den IKKE er valgt. Reglen stod uden :not(), og den kom efter
   `input:checked + span strong { color:#fff }` i filen — så den vandt, og
   "Betyder ikke noget" stod navy på navy, når den var markeret. Altså
   usynlig netop i den tilstand, den har fra sidens start. */
.guide-boks-fravalg input:not(:checked) + span strong { font-weight: 400; color: #7a7164; }
/* #7a7164 og ikke husets #8a8272: sidstnævnte giver 3,81:1 mod hvid, og
   brødtekst skal have 4,5:1 (WCAG AA). Denne giver 4,80:1 og er stadig
   tydeligt dæmpet i forhold til de fire rigtige valg på 17:1. */

/* Indgangssiderne — flere døre til samme ydelse (indgang.php). */
.kort-doere { margin: 0; font-size: var(--f-meta); color: #999; }
.kort-doere a { color: #8a8272; text-decoration: underline; text-decoration-style: dotted;
                text-underline-offset: 3px; }
.kort-doere a:hover { color: #1a1a2e; }
/* Beskåret som alle andre fotos på sitet. Uden aspect-ratio blev et
   ståfoto fra en telefon 660 × 990 px og fyldte hele skærmen, før man nåede
   en eneste sætning. Nu opfører de fire billedpladser sig ens: en liggende
   kasse, beskåret fra midten. */
.indgang-foto, .aktivitet-side-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 10px; margin-bottom: 30px; display: block; }

/* Oversigtskortet med billede: fotoet i fuld bredde øverst, som på
   ydelseskortene. Uden foto ser kortet ud præcis som før — så de ni kan
   få billeder ét ad gangen uden at gitteret falder fra hinanden. */
.akt-kort-foto { padding-top: 0; overflow: hidden; }
.akt-kort-foto > img { width: calc(100% + 44px); margin: 0 -22px 12px; height: 150px;
  object-fit: cover; display: block; border-radius: 10px 10px 0 0; }
.indgang-ydelse { margin-top: 44px; background: #fff; border: 1px solid #e2ddd5;
                  border-left: 3px solid #c8a96e; border-radius: 0 10px 10px 0; padding: 22px 26px; }
.indgang-ydelse-navn { margin: 0; font-family: 'Playfair Display', Georgia, serif;
                       font-size: 22px; color: #1a1a2e; }
.indgang-ydelse-spec { margin: 4px 0 0; font-size: var(--f-meta); line-height: 1.6; color: #999; }

/* Hvem ydelsen er til, over hver delliste på en aktivitetsside. */
.akt-liste-hvem { margin: 22px 0 8px; font-size: var(--f-meta); letter-spacing: .08em;
                  text-transform: uppercase; color: #c8a96e; }
.akt-liste-hvem:first-of-type { margin-top: 0; }

/* Linjerne i "Hvor Stomp kan indgå" er links til ydelsens prisfelt. Hele
   linjen er klikbar — en lille pil til højre er et for lille mål på en
   telefon, og linjen ER handlingen. */
.akt-liste li { padding: 0; }
.akt-liste li > a { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  padding: 12px 16px; text-decoration: none; border-radius: 8px; width: 100%;
  transition: border-color .15s, background .15s; }
.akt-liste li:hover, .akt-liste li:focus-within { border-color: #c8a96e; background: #fff; }
.akt-liste li > a em { margin-left: auto; font-style: normal; font-size: var(--f-meta);
  color: #8a8272; white-space: nowrap; }
.akt-liste li:hover > a em, .akt-liste li:focus-within > a em { color: #1a1a2e; }

/* ---------------------------------------------------- luft før footeren
   Sidens sidste sektion havde ingen bundpolstring: `section` er
   `padding: 80px 0 0`, altså luft OVER og ingen under. Det gik godt, så
   længe hver side sluttede med cta-boksen, der har `margin: 80px 0` og
   dermed selv leverede afstanden.

   Fem sider gør ikke det — aktivitetssiderne, indgangssiderne, kontakt,
   prisbladet og forsiden. Målt: 0 px mellem knappen og den mørke footer
   på aktivitet- og indgangssiderne, 20 px på prisbladet, 80 px på de
   øvrige seks. Det er ikke bare klemt; det er uens fra side til side.

   Reglen her giver den SIDSTE sektion sin bundpolstring, og cta-boksens
   egen bundmargin fjernes, så de to ikke lægger sig oveni hinanden.
   `.hvid` og `.hoved` er undtaget: de er farvede bånd med deres egen
   polstring, og et bånd, der møder footeren, ser rigtigt ud. */
section:last-of-type:not(.hvid):not(.hoved) { padding-bottom: 80px; }
.cta { margin-bottom: 0; }

@media (max-width: 600px) {
  section:last-of-type:not(.hvid):not(.hoved) { padding-bottom: 62px; }
}