/* 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: var(--creme-dybest);
  color: var(--tekst-sort);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--guld-tekst); text-decoration: none; }
a:hover { color: var(--guld-tekst); }
img { max-width: 100%; }

/* ------------------------------------------------------------------
   FARVERNE — ét sted.

   Der stod 301 hex-værdier i denne fil i 47 forskellige nuancer, og
   nul af dem var en variabel — mens skriftstørrelserne (--f-brod og
   de fire andre) havde haft deres eget sted længe. Det var §1 gjort
   færdig på det ene og glemt på det andet.

   Målt på de 13 sider som de rendrer: 44 forskellige kontrastfejl i
   294 forekomster. Alle sammen i en håndfuld farver. Derfor ligger de
   her nu: én rettelse, ét sted, og en prøve der kan holde den fast.

   Navnene siger ROLLEN, ikke farven. Det er med vilje: `--guld` er
   streger og kanter, `--guld-tekst` er guld når det ER tekst, og de
   to har vidt forskellige krav — en streg skal være synlig, en
   sætning skal kunne læses.

   Nuancerne `tekst-daempet-*` og `tekst-note-*` er en OPGØRELSE over
   det, der står i filen i dag, ikke et design. Seks grå til den samme
   slags tekst er fem for mange. De slås sammen i næste skridt.
   ------------------------------------------------------------------ */
:root {
  /* flader og kanter */
  --papir: #ffffff;
  --papir-varm: #faf9f7;
  --papir-valgt: #fdfbf7;
  --papir-hover: #fdf8f2;
  --creme: #f7f5f0;
  --creme-dyb: #efece4;
  --creme-dybest: #f0ede6;
  --creme-aaben: #fdf5e6;
  --navy: #1a1a2e;
  --navy-lys: #2a2a4e;
  --navy-dyb: #12121c;
  --kant: #e2ddd5;
  --kant-lys: #eeeae2;
  --kant-markeret: #cfc6b2;
  --kant-graa: #dddddd;
  --kant-lilla: #ddd5e2;
  --rullepanel: #d8d2c6;

  /* guld — pynt og tekst er to ting */
  --guld: #c8a96e;
  --guld-lys: #d4b87d;
  --guld-tekst: #7d6220;

  /* tekst */
  --tekst-graa: #686868;
  --tekst-sort: #1a1a1a;
  --tekst-citat: #3d3d3d;
  --tekst: #555555;
  --tekst-daempet: #6b6558;
  --tekst-lilla: #4a3a5e;

  /* status */
  --gron-tekst: #2d7a2d;
  --gron-kant: #a8d8a8;
  --gron-flade: #e8f4e8;
  --gron-flade-lys: #eaf3e8;
  --rod-tekst: #aa3333;
  --rod-kant: #e0b4b4;
  --rod-flade: #fdeeee;

}

: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: 13px;     /* OVERLINJER · FOOTER-ETIKETTER · FELTETIKETTER — versaler, spatieret. Var 12,5: målt 19-09-2026 som det mindste på sitet, og feltetiketterne på en telefon skal kunne læses */
  --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: var(--guld); color: var(--navy);
  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: var(--guld-lys); color: var(--navy); }
.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: var(--guld-tekst);
  font-size: var(--f-lille); font-weight: 500; padding: 15px 28px;
  border-radius: 6px; min-height: 48px;
}
.btn-ghost:hover { border-color: var(--guld-tekst); background: rgba(200,169,110,0.1); }
.btn-navy {
  background: var(--navy); color: var(--papir); 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: var(--navy-lys); }

/* ---- menu ---- */
.nav { background: var(--papir); border-bottom: 1px solid var(--kant); }
.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: var(--navy); }
.brand-titel { font-size: var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--guld-tekst); font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.navlink { font-size: var(--f-lille); color: var(--tekst); }
.navlink:hover { color: var(--navy); }
.navlink-active { font-size: var(--f-lille); color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--guld); padding-bottom: 3px; }

/* ---- målgruppevælger ---- */
.vaelger { background: var(--papir); border-bottom: 1px solid var(--kant); }
.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: var(--tekst-graa); 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: var(--tekst-graa); padding: 11px 22px; border-radius: 24px; }
.pill:hover { color: var(--tekst); background: var(--papir-varm); }
.pill-on { font-size: var(--f-lille); font-weight: 500; background: var(--navy); color: var(--papir); 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: var(--guld-tekst); font-weight: 500; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; color: var(--navy); 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: var(--tekst); 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: var(--tekst-daempet); font-style: italic; line-height: 1.6; }
.dæmpet { color: var(--tekst-graa); }

/* ---- sidehoved i navy ---- */
.hoved { background: var(--navy); }
.hoved .wrap { padding-top: 76px; padding-bottom: 76px; }
.hoved h1 { color: var(--papir); 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: var(--papir); border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant); padding: 84px 0; margin-top: 86px; }
.kort { --kort-x: 34px; --kort-y: 32px;
  background: var(--papir); border: 1px solid var(--kant); 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 var(--guld); }
.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: var(--navy); white-space: nowrap; }
.amount-lille { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; color: var(--navy); 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: var(--tekst-daempet); 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 var(--kant); 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: var(--tekst); }
.tilvalg-linje em { color: var(--tekst-graa); font-size: var(--f-meta); }
.tilvalg-linje b { font-weight: 400; color: var(--navy); font-size: var(--f-meta); }
.laast-link { font-size: var(--f-meta); font-weight: 500; color: var(--guld-tekst); white-space: nowrap; }
.mærke { font-size: var(--f-label); font-weight: 600; background: var(--gron-flade); color: var(--gron-tekst); border: 1px solid var(--gron-kant); border-radius: 20px; padding: 3px 9px; }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: var(--f-meta); color: var(--tekst); background: var(--papir-varm); border: 1px solid var(--kant); border-radius: 20px; padding: 7px 14px; }
.chip-tema { font-size: var(--f-meta); color: var(--tekst-lilla); background: var(--papir); border: 1px solid var(--kant-lilla); border-radius: 20px; padding: 8px 16px; }

/* ---- cta ---- */
.cta { background: var(--navy); 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: var(--papir); 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: var(--papir); border: 1px solid var(--kant); border-radius: 6px; padding: 14px 16px;
  min-height: 48px; font-size: var(--f-lille); font-weight: 400; color: var(--tekst);
  letter-spacing: normal; text-transform: none;
  transition: border-color .15s ease, background-color .15s ease; }
.felt .valg:hover { border-color: var(--guld-tekst); }
.felt .valg span { flex: 1 1 auto; }
.felt .valg b { font-weight: 500; color: var(--navy); white-space: nowrap; }
.valg input[type="radio"] { accent-color: var(--guld-tekst); 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: var(--guld-tekst); background: var(--papir-valgt); }
.felt .valg:has(input:focus-visible) { outline: 2px solid var(--guld); outline-offset: 2px; }

/* ---- formular ---- */
.felt { display: flex; flex-direction: column; gap: 6px; }
/* Et skjult felt SKAL være skjult — også når .felt får display:flex/grid et
   sted. Samme fælde som .pris-form[hidden] og .admin-menu[hidden]. */
.felt[hidden] { display: none; }
/* Krydssalget nederst i formularen: en lille gruppe med sin egen overskrift
   og en linje, der forklarer den halve pris. Afkrydsningerne er de samme som
   tilvalgenes, bare samlet. */
.krydssalg { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--kant); }
/* .afkryds er en <label> inde i .felt og arver derfor feltetikettens
   versaler og lille skrift — det skal den ikke: her er det et valg. */
.krydssalg .afkryds { margin-top: 8px; text-transform: none; letter-spacing: 0; font-size: var(--f-lille); font-weight: 400; color: var(--tekst); }
.krydssalg .afkryds b { font-weight: 500; color: var(--tekst-daempet); font-size: var(--f-meta); }
.krydssalg-note { margin: 2px 0 6px; font-size: var(--f-meta); line-height: 1.5; color: var(--tekst-daempet); }
/* »Vil du noget andet end at booke?« under formularens overskrift: et link i
   brødtekststørrelse, guld, ikke en knap — det er en sidedør, ikke en handling. */
.kontakt-andet { margin: 10px 0 0; font-size: var(--f-lille); }
.kontakt-andet a { color: var(--guld-tekst); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.kontakt-andet a:hover { color: var(--navy); }
.felt label { font-size: var(--f-label); font-weight: 500; color: var(--tekst-graa); letter-spacing: 0.04em; text-transform: uppercase; }
/* En hjælpesætning UNDER et felt (»en dag regnes som 8 timer«): brødtekst-
   grå, ikke etikettens versaler — det er en forklaring, ikke et feltnavn. */
.felt .felt-hint { display: block; margin-top: 6px; font-size: var(--f-meta); line-height: 1.5; color: var(--tekst-daempet); }
.felt input, .felt select, .felt textarea {
  font-family: inherit; font-size: var(--f-lille); color: var(--tekst-sort); background: var(--papir);
  border: 1px solid var(--kant-graa); 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: var(--guld-tekst); }
.fuld { grid-column: 1 / -1; }

/* ---- pladsholdere ---- */
.pladsholder { border: 1px dashed var(--kant-markeret); background: var(--papir-varm); border-radius: 10px; padding: 30px 32px; color: var(--tekst-daempet); }
.pladsholder-mærke { font-size: var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-daempet); border: 1px dashed var(--kant-markeret); border-radius: 4px; padding: 6px 12px; }

/* ---- footer ---- */
.footer { background: var(--navy); 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; }
/* Guldet er læsbart på navy (7,60:1) og ulæseligt på hvid (2,24:1), og
   begge klasser bruges på begge flader. Grundreglen er derfor den
   lyssikre, og guldet lægges tilbage INDE i de navy sektioner. Den vej
   rundt fejler en ny brug af klassen til den rigtige side. */
.hoved .overlinje, .footer .footer-label { color: var(--guld); }
.footer-label { margin: 0 0 20px; font-size: var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--guld-tekst); font-weight: 500; }
.footer-gospel { margin: 0 0 14px; font-family: 'Playfair Display', Georgia, serif; font-size: 20px; color: var(--papir); }
.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: var(--guld); }
.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: var(--guld); }

/* ---- 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: var(--papir); letter-spacing: -0.01em; text-wrap: pretty; }
/* Ordet, der skifter (hero.js): guld, så øjet finder det, og en kort glidning
   op ved hvert skift. Uden JavaScript er det bare et guldfarvet ord. */
/* clip-path: et nyt, længere ord må ikke lægge sig oven i »– sammen«, mens
   pladsen endnu er ved at vokse — det klippes af til højre og kommer frem,
   som pladsen åbner sig. Top og bund har luft til g, j og bevægelsen. */
.rul-ord { display: inline-block; white-space: nowrap; color: var(--guld); clip-path: inset(-0.5em 0 -0.5em -0.3em);
  transition: opacity .26s ease, transform .26s ease, width .4s ease-in-out; }
/* Sættes af hero.js, når »– sammen« ellers ville skifte linje undervejs. */
.rul-egen-linje .rul-rest { display: block; }
.rul-ord-linje .rul-ord { display: block; width: max-content; }
.rul-ord.rul-ud  { opacity: 0; transform: translateY(-0.28em); }
/* Ind-trinnet slukker KUN fade og glid, ikke bredden: »transition: none«
   ville afbryde en igangværende glidning, og så sprang »– sammen«. */
.rul-ord.rul-ind { opacity: 0; transform: translateY(0.28em); transition-property: width; }
@media (prefers-reduced-motion: reduce) { .rul-ord { transition: none; } }
.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: var(--guld-tekst); }
.tema p { margin: 0; font-size: var(--f-lille); line-height: 1.75; color: var(--tekst-graa); }
.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: var(--creme-dyb); }
.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: var(--creme-dyb); }
.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 var(--kant); 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 var(--kant); border-radius: 10px; background: var(--papir); margin-bottom: 20px; }
/* Ikke `overflow: hidden`: det gør sektionen til en klippende forælder, og
   så virker `position: sticky` ikke for prisoversigten inde i formularen.
   Hjørnerne klippes i stedet af børnene selv. */
.pris-sektion-hoved { background: var(--creme); padding: 18px 30px 15px; border-bottom: 1px solid var(--kant); border-radius: 10px 10px 0 0; }
.pris-sektion-titel { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 20px; color: var(--navy); }
/* Guidens svar: beskrivelse og (hvis der er et) foto — 24-09-2026. */
.pris-sektion-beskrivelse { margin: 10px 0 0; max-width: 620px; font-size: var(--f-lille); line-height: 1.65; color: var(--tekst-daempet); }
.pris-sektion-hoved-foto { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.pris-sektion-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
@media (max-width: 600px) {
  .pris-sektion-hoved-foto { grid-template-columns: 1fr; gap: 14px; }
  .pris-sektion-foto { aspect-ratio: 16 / 9; }
}
/* Gruppehovedet på prisbladet: den fælles tekst over flere ydelser, der er
   varianter af samme ting. Det står UDEN kasse, så det læses som en
   indledning og ikke som en pris, man kan klikke på. */
.pris-gruppe { margin: 34px 0 18px; max-width: 660px; }
.pris-gruppe:first-of-type { margin-top: 0; }
/* Skrift, vægt og farve arver fra h1/h2/h3-reglen — kun størrelsen er min. */
.pris-gruppe-navn { margin: 0 0 10px; font-size: var(--f-stor); }
.pris-gruppe-tekst { margin: 0 0 12px; font-size: var(--f-lille); line-height: 1.7; color: var(--tekst-daempet); }
.pris-gruppe-tekst:last-child { margin-bottom: 0; }

/* Gruppens pointe (24-09-2026): »Kan vi synge sammen, kan vi tale sammen«.
   Serif og en guldstreg til venstre, så den læses som et udsagn og ikke som
   endnu et afsnit brødtekst. Kilderne i --f-meta, samme trin som andre kilder. */
.gruppe-pointe-boks { margin: 0 0 18px; padding-left: 16px; border-left: 2px solid var(--guld); max-width: 660px; }
.gruppe-pointe { margin: 0 0 6px; font-family: 'Playfair Display', Georgia, serif; font-size: 24px; line-height: 1.3; color: var(--navy); }
.gruppe-pointe-note { margin: 0; font-size: var(--f-meta); line-height: 1.6; color: var(--tekst-daempet); }
.gruppe-pointe-kilder { white-space: nowrap; }
@media (max-width: 600px) {
  .gruppe-pointe { font-size: 21px; }
  .gruppe-pointe-kilder { white-space: normal; }
}

.pris-sektion-under { margin: 4px 0 0; }
/* Udbyttet står under virkemidlerne, ikke i kursiv: det er en påstand om, hvad
   man får, og ikke en specifikation. Bredden er sat, så linjen brydes som
   brødtekst — den skal læses, ikke skimmes. */
.pris-sektion-udbytte {
  margin: 10px 0 0; max-width: 62ch; font-size: var(--f-lille); line-height: 1.6;
  color: var(--tekst-daempet);
}
.pris-raekke {
  width: 100%; text-align: left; background: var(--papir); border: none; border-left: 3px solid var(--guld);
  padding: 20px 30px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 20px;
  align-items: start; cursor: pointer; font-family: inherit;
}
.pris-raekke:hover { background: var(--papir-hover); }
.pris-raekke[aria-expanded="true"] { background: var(--creme-aaben); }
.pris-raekke-navn { font-size: var(--f-brod); font-weight: 500; color: var(--tekst-sort); }
/* Grundlaget står i første kolonne under navnet, så det læses som en
   underlinje til "Grundbeløb" og ikke til prisen. #6e6a63 og ikke det #999,
   teksten havde i overskriften: målt 2,85:1 mod hvid, altså under AA. Her er
   den 5,38:1 mod hvid og 4,96:1 mod den åbne rækkes #fdf5e6 — over AA i begge
   tilstande, og det skal den være, for det er betingelserne for prisen og
   ikke pynt. */
.pris-raekke-grundlag { font-size: var(--f-meta); line-height: 1.5; color: var(--tekst-daempet); grid-column: 1; grid-row: 2; margin-top: 2px; }
/* Tiderne (Festmusik) i fuld bredde under vilkårene, og vilkårenes kolonne
   får mindst 55 % — så kan intet i højre side klemme dem til ét ord pr.
   linje, som det skete på en iPhone (23-09-2026). (max-width i procent på
   selve prisblokken virkede ikke: i et auto-spor regnes procenten af sporet
   selv, og beløbet blev klippet.) */
.pris-raekke-tider { grid-column: 1 / -1; font-size: var(--f-meta); line-height: 1.5; color: var(--tekst-daempet); margin-top: 4px; }
.pris-raekke { grid-template-columns: minmax(55%, 1fr) auto; }
/* Prisen spænder over begge rækker i højre kolonne. Uden det var første række
   så høj som prisblokken (beløb + momsetiket), og grundlaget landede et stykke
   UNDER ordet »Grundbeløb« — det svævede frit i stedet for at hænge på det
   ord, det er betingelserne for. Mads (20-09-2026). */
.pris-raekke .pris-linje { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
/* Anvisningen er ikke en del af vilkårene, så den får sin egen luft (8 px),
   hvor vilkårene får 2 px op til »Grundbeløb«. Afstanden siger, hvad der
   hører til hvad. */
.pris-raekke-hint { grid-column: 1 / -1; margin-top: 8px; font-size: 13.5px; color: var(--guld-tekst); font-weight: 500; }  /* en anvisning, ikke en etiket — derfor større end --f-label */
.pris-form { padding: 26px 30px 22px; background: var(--papir-varm); border-top: 1px solid var(--kant); border-radius: 0 0 10px 10px; }
.pris-raekke:last-child { border-radius: 0 0 10px 10px; }

/* UDREGNINGEN SKAL KUNNE SES, MENS MAN UDFYLDER.
   ----------------------------------------------------------------------
   Prisoversigten stod nederst i formularen: man skrev adresse, satte kryds
   ved en ekstra musiker og valgte lørdag aften — og tallet, det ændrede,
   stod et skærmbillede længere nede. Mads: »det hele må gerne være samlet
   at se på én gang«.

   Bred skærm: to spalter. Felterne til venstre, oversigten til højre, og
   oversigten er `sticky`, så den følger med ned gennem felterne. Smal
   skærm: én spalte som før, men et bånd med totalen klæber til bunden af
   skærmen, mens man er i felterne (`position: sticky; bottom: 0`), og
   lægger sig til rette over den fulde oversigt, når man når derned. */
/* Under prisen: de tidspunkter, der koster noget andet end normalprisen. */
.pris-tider { display: block; margin-top: 4px; font-size: var(--f-meta); color: var(--tekst-daempet); }
.pris-baand { display: none; }
@media (min-width: 900px) {
  .pris-form { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; }
  /* `display: grid` slår browserens [hidden] ud — så ALLE formularer stod
     åbne på bred skærm, fra to-spalte-layoutet kom til (19-09-2026), og
     ingen prøve så det, fordi prøverne læste attributten, ikke skærmen.
     Reglen står udtrykkeligt, så den ikke kan tabes igen. */
  .pris-form[hidden] { display: none; }
  .pris-form .form-grid { grid-column: 1; grid-row: 1; }
  .pris-form .prisoversigt { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 104px; margin-top: 0; }
  .pris-form .form-bund { grid-column: 1; grid-row: 2; }
  .pris-form .form-svar { grid-column: 1; grid-row: 3; }
}
@media (max-width: 899px) {
  .pris-baand { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; position: sticky; bottom: 0; z-index: 3; margin: 16px -30px 0; padding: 12px 30px; background: var(--navy); color: var(--papir); font-size: var(--f-lille); box-shadow: 0 -6px 18px rgba(26,26,46,0.18); }
  /* Som i mailens totalboks: etiketten i guld, BELØBET i hvidt. Guld på navy
     er 7,6:1 og består, men det er beløbet, der skal læses, og hvidt er
     16:1. Mads bad om mere kontrast på tallet 19-09-2026. */
  .pris-baand b { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 500; color: var(--papir); white-space: nowrap; }
  .pris-baand span { color: var(--guld); }
  .pris-baand.er-tom { display: none; }
}
@media (max-width: 640px) {
  .pris-baand { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.afkryds { display: flex; align-items: center; gap: 12px; background: var(--papir); border: 1px solid var(--kant); border-radius: 6px; padding: 14px 16px; font-size: var(--f-lille); color: var(--tekst); cursor: pointer; min-height: 48px; }
.afkryds input { width: 18px; height: 18px; accent-color: var(--guld-tekst); }
.afkryds span { flex-grow: 1; }
.afkryds em { color: var(--tekst-graa); font-size: var(--f-meta); }
.afkryds b { font-weight: 500; color: var(--navy); white-space: nowrap; }
.prisoversigt { background: var(--papir); border: 1px solid var(--kant); border-radius: 8px; padding: 20px 24px; margin-top: 20px; font-size: var(--f-lille); color: var(--tekst); }
.oversigt-linje { display: flex; justify-content: space-between; gap: 20px; padding: 4px 0; }
.oversigt-total { border-top: 1px solid var(--kant); margin-top: 8px; padding-top: 10px; font-weight: 600; color: var(--navy); font-size: var(--f-brod); }
.oversigt-moms { margin: 10px 0 0; font-size: var(--f-meta); color: var(--tekst-daempet); }
/* 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: var(--guld-tekst); }
.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: var(--gron-flade-lys); border: 1px solid var(--gron-kant); color: var(--gron-tekst); }
.form-svar-fejl { background: var(--rod-flade); border: 1px solid var(--rod-kant); color: var(--rod-tekst); }
.tillaeg-raekke { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 30px; border-bottom: 1px solid var(--kant); font-size: var(--f-brod); color: var(--tekst-sort); }
.tillaeg-raekke:last-child { border-bottom: none; }
.tillaeg-raekke em { display: block; font-size: var(--f-meta); color: var(--tekst-graa); margin-top: 3px; }
.tillaeg-raekke b { font-weight: 500; color: var(--navy); 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: var(--navy); 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: var(--papir); }
.kontaktkort-titel { margin: 0; font-size: var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--guld); }
.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); }
/* Samme kort på hvid bund. Se kontakt.php: klassen er navy-kortets, og
   den ene af tre linjer manglede sin inline-rettelse — linket stod hvidt
   på hvidt. En variant med sin egen farve kan ikke glemmes for én linje. */
.kontaktkort-linjer-lys, .kontaktkort-linjer-lys a { color: var(--tekst); }
.kontaktkort-linjer-lys a:hover { color: var(--guld-tekst); }
.kontaktkort-linjer a:hover { color: var(--guld); }
.godt-titel { margin: 0 0 4px; font-size: var(--f-lille); font-weight: 500; color: var(--navy); }
.godt-tekst { margin: 0; font-size: var(--f-lille); line-height: 1.7; color: var(--tekst-graa); }

@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: var(--tekst-graa); margin-bottom: 10px; }
.bobler { display: flex; flex-wrap: wrap; gap: 8px; }
.boble { font-family: inherit; font-size: var(--f-meta); color: var(--tekst); background: var(--papir); border: 1px solid var(--kant);
  border-radius: 20px; padding: 9px 17px; cursor: pointer; transition: all .15s ease; }
.boble:hover { border-color: var(--guld-tekst); color: var(--navy); }
.boble-valgt { background: var(--navy); border-color: var(--navy); color: var(--papir); }
.boble-valgt:hover { color: var(--papir); }
.boble:focus-visible { outline: 2px solid var(--guld); 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: var(--tekst-graa); background: var(--papir-varm); border: 1px solid var(--kant);
  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: var(--guld-tekst); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,26,46,.07); }
.kort-valgbar:focus-visible { outline: 2px solid var(--guld); outline-offset: 3px; }
.kort-valgt { background: var(--navy); border-color: var(--navy); }
.kort-valgt h3, .kort-valgt .brød { color: var(--papir); }
.kort-valgt .brød { color: rgba(255,255,255,.78); }
.kort-valgt .laast-link { color: var(--guld-tekst); }
.kort-valgt:hover { border-color: var(--guld-tekst); }
.valgt-flueben { color: var(--guld-tekst); 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: var(--papir); border: 1px solid var(--kant); border-left: 3px solid var(--guld);
  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: var(--tekst-citat);
  flex-grow: 1; text-wrap: pretty; }
/* Var #8a8272: 3,81:1 mod hvid. Navn og organisation ER beviset i en
   udtalelse; de skal kunne læses. #6e6a63 er 5,38:1. */
.citat-kilde { margin: 0; font-size: var(--f-meta); color: var(--tekst-daempet); }

/* 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: var(--tekst-graa); border-bottom: 1px solid var(--kant); }
.kor-fb:hover { color: var(--tekst); border-bottom-color: var(--guld-tekst); }


/* --- 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 var(--kant-lys);   /* 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 var(--kant); border-radius: 8px;
    cursor: pointer; padding: 0;
  }
  .nav-knap:focus-visible { outline: 2px solid var(--guld); outline-offset: 2px; }
  .nav-streger, .nav-streger::before, .nav-streger::after {
    display: block; width: 20px; height: 1.5px; background: var(--navy);
    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 var(--kant-lys);
  }
  .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 var(--kant); }
.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 var(--kant); }
.erfaring dt { font-size: var(--f-meta); color: var(--guld-tekst); 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: var(--tekst); 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: var(--navy);
  background: var(--papir-varm); border: 1px solid var(--kant); border-left: 3px solid var(--guld);
  border-radius: 6px; padding: 12px 16px; }
.vaelg-dem span { display: block; font-size: var(--f-label); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--guld-tekst); 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 var(--kant);
  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: var(--tekst-graa);
  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: var(--guld-tekst); 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: var(--navy); border-color: var(--navy);
  color: var(--papir); }

/* 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 var(--kant); padding-top: 20px; }
.aktivitet-def:target { border-top-color: var(--guld-tekst); }
.aktivitet-def:target h3 { color: var(--guld-tekst); }

/* 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: var(--papir); border: 1px solid var(--kant);
  border-left: 3px solid var(--guld); 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: var(--tekst); }
.liste-check li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--guld-tekst); 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 var(--guld); 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: var(--rullepanel) transparent; }
.karrusel-spor::-webkit-scrollbar { height: 6px; }
.karrusel-spor::-webkit-scrollbar-thumb { background: var(--rullepanel); 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 var(--kant);
  background: var(--papir); color: var(--navy); 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: var(--guld-tekst); color: var(--guld-tekst); }
.karrusel-knap:focus-visible { outline: 2px solid var(--guld); outline-offset: 2px; }
.karrusel-knap:disabled { opacity: .3; cursor: default; }
.karrusel-tael { font-size: var(--f-meta); color: var(--tekst-daempet); 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: var(--tekst-daempet); }
/* 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: var(--tekst-daempet); font-style: italic; }
/* Repertoiret: en linje med navne, etiketten i husets versaler foran. Samme
   grå som specifikationerne — det er en oplysning, ikke en salgstekst. */
.kort-repertoire, .indgang-repertoire { margin: 0; font-size: var(--f-meta); line-height: 1.65; color: var(--tekst-daempet); }
.kort-repertoire { margin-top: 10px; }
.indgang-repertoire { margin-top: 8px; }
.pris-sektion-repertoire { margin-top: 6px; }
.repertoire-etiket { font-size: var(--f-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--guld-tekst); margin-right: 4px; }

/* 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: var(--guld-tekst); 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: var(--navy); }
.aktivitet-mere p { margin: 12px 0 0; font-size: var(--f-lille); line-height: 1.8; color: var(--tekst-graa); }
.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 var(--kant); 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: var(--navy); line-height: 1.5; }
.citat-fod { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: auto; }
/* Var #b09a6e: 2,73:1 mod hvid. Emnet er ikke pynt — det er dét, en køber
   skimmer efter for at finde en udtalelse om sin egen vare. */
.citat-emne { font-size: var(--f-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--guld-tekst); 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: var(--tekst); }
.trin li::before { content: counter(trin); position: absolute; left: 0; top: 2px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--papir);
  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; }

/* Kernesætningen — kortet med ÉN sætning sat stort.
   Playfair er sitets display-skrift, den samme som overskrifterne, og
   citatet er netop en overskrift: det er dét, kortet handler om, ikke en
   indledning til noget andet. Guldstregen til venstre er den samme, som
   grundbeløbslinjen på prisbladet bruger — den betyder "her står sagen".
   flex-grow, så kilden bliver liggende i bunden af et strakt kort. */
.kort-kerne { border-left: 3px solid var(--guld); border-radius: 0 10px 10px 0; }
/* Et kort med kernesætning bestemmer SIN EGEN højde. Det er en omvendt
   beslutning i forhold til de klippede kort, og målingen er grunden:

     lige høje (som før)   forskel i rækken 0 px — men folder man ét kort ud,
                           bliver ALLE kort i rækken 600 px, og naboerne står
                           med 350 px hvidt hul under sig.
     egen højde            forskel i rækken højst 90 px (159–249), og en
                           udfoldning rører kun det kort, man klikkede på.

   Da kortene blev klippet til seks linjer, var de i forvejen næsten lige
   høje, og hullet ved udfoldning var til at bære. Med én sætning pr. kort er
   kortene lave, og det samme hul er pludselig større end kortet selv. */
.karrusel-spor > .kort-kerne, .grid-citater > .kort-kerne { align-self: flex-start; }
.citat-kerne { margin: 0; font-family: 'Playfair Display', Georgia, serif;
  font-size: 23px; line-height: 1.38; color: var(--navy); flex-grow: 1; text-wrap: pretty; }
@media (max-width: 900px) { .citat-kerne { font-size: 20px; } }
/* Hele udtalelsen ligger i koden hele tiden og skjules kun visuelt, så
   søgemaskiner og skærmlæsere ser den. Den fulde tekst er brødtekst igen —
   to store citater oven på hinanden ville ikke kunne læses som ét. */
.citat-fuld { display: none; }
.mere-flag:checked ~ .citat-fuld { display: flex; flex-direction: column; gap: 12px; }
/* 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; }
/* #856825 og ikke sitets #c8a96e: guldet er 2,24:1 mod hvid, altså under
   halvdelen af AA-kravet på 4,5:1. Dette er samme guldfamilie, bare mørk nok
   at læse — målt 5,24:1 mod hvid og 4,81:1 mod cremen. */
.mere-knap { align-self: flex-start; cursor: pointer; font-size: var(--f-meta); font-weight: 500;
  color: var(--guld-tekst); letter-spacing: 0.02em; padding: 2px 0; }
.mere-knap:hover { color: var(--navy); }
.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 var(--guld); 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 var(--guld);
  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: var(--navy-lys); }
.kort:hover .laast-link, .kort:focus-within .laast-link { color: var(--navy); }

/* 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: var(--papir); padding: 10px 18px; }
.chips-hvid .chip-link:hover, .chips-hvid .chip-link:focus-visible { background: var(--navy); }

/* 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: var(--tekst-daempet); }

/* 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: var(--papir-varm); border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant); padding: 38px 0 42px; }
.guide-overskrift { margin: 0 0 8px; font-size: 26px; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; }
.guide-intro { margin: 0 0 26px; font-size: var(--f-brod); line-height: 1.7; color: var(--tekst); 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: var(--tekst-daempet); 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: var(--papir); border: 1px solid var(--kant); 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: var(--navy); }
.guide-boks em { display: block; margin-top: 3px; font-style: normal; font-size: var(--f-meta); color: var(--tekst-daempet); line-height: 1.5; }
.guide-boks span:hover { border-color: var(--guld-tekst); }
.guide-boks input:checked + span { background: var(--navy); border-color: var(--navy); }
.guide-boks input:checked + span strong { color: var(--papir); }
.guide-boks input:checked + span em { color: rgba(255,255,255,0.62); }
.guide-boks input:focus-visible + span { outline: 2px solid var(--guld); outline-offset: 2px; }

/* Deltagelsesaksen: seks trin, og RÆKKEFØLGEN er hele pointen.
   ----------------------------------------------------------------------
   Med den almindelige `flex: 1 1 230px` faldt de seks i 4 + 2 i et
   1000 px-felt. En stige, der knækker efter fjerde trin, læses ikke som en
   stige: »Være med« stod under »Ingenting«, og så siger placeringen det
   modsatte af det, trinnet betyder. Tre og tre holder ordenen læsbar begge
   veje — venstre mod højre, øverste række før nederste. */
/* Skalaen — deltagelsen og længden.
   ----------------------------------------------------------------------
   Én sammenhængende bjælke, felterne støder op til hinanden, og bunden
   bliver mørkere fra venstre mod højre: lidt … meget. Det valgte felt er
   navy med guld. Noten til det valgte trin står under bjælken, ét ad
   gangen — `em` er absolut placeret i forhold til `.akse`, ikke til sit
   eget felt, så den kan bruge hele bredden. Enderne (LIDT / MEGET) står
   mellem bjælken og noten.

   Det er radioknapper, ikke en slider: det virker uden JavaScript, en
   skærmlæser får navngivne valg, og man kan ikke lande mellem to trin. */
.akse { position: relative; padding-bottom: 2.5em; }
.akse-bjaelke { display: flex; border: 1px solid var(--kant); border-radius: 12px; overflow: hidden; background: var(--papir); }
.akse-seg { flex: 1 1 0; min-width: 0; }
.akse-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.akse-seg span { display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; padding: 14px 6px 12px; border-right: 1px solid var(--kant); cursor: pointer; text-align: center; transition: background .15s; }
.akse-seg:last-child span { border-right: 0; }
/* Forløbet: hvert felt lidt mørkere end det forrige. */
.akse-seg:nth-child(2) span { background: rgba(26,26,46,0.025); }
.akse-seg:nth-child(3) span { background: rgba(26,26,46,0.05); }
.akse-seg:nth-child(4) span { background: rgba(26,26,46,0.08); }
.akse-seg:nth-child(5) span { background: rgba(26,26,46,0.11); }
.akse-seg:nth-child(6) span { background: rgba(26,26,46,0.14); }
.akse-seg span:hover { background: rgba(200,169,110,0.18); }
.akse-seg strong { font-size: 12.5px; font-weight: 500; color: var(--navy); line-height: 1.2; letter-spacing: 0.01em; }
.akse-ikon { width: 28px; height: 28px; fill: none; stroke: var(--guld-tekst); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.akse-seg input:checked + span { background: var(--navy); }
.akse-seg input:checked + span strong { color: var(--papir); }
.akse-seg input:checked + span .akse-ikon { stroke: var(--guld); }
.akse-seg input:focus-visible + span { outline: 2px solid var(--guld); outline-offset: -3px; }
/* Noten: kun for det valgte trin, under enderne, hele bredden. */
.akse-seg em { display: none; position: absolute; left: 0; right: 0; top: calc(100% - 1.5em); font-style: normal; font-size: var(--f-meta); color: var(--tekst-daempet); line-height: 1.5; text-align: left; }
.akse-seg input:checked + span em { display: block; }
.akse-seg em b { font-weight: 500; color: var(--navy); }
/* »Eller« mellem guidens to svar-kort. */
.svar-eller-skille { margin: -6px 0 14px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 20px; color: var(--guld-tekst); text-align: center; }
.akse-ender { display: flex; justify-content: space-between; margin-top: 7px; font-size: var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--tekst-daempet); }
/* Længden: en streg, der vokser fra felt til felt — kort … lang. */
.akse-tid-streg { display: block; height: 4px; width: 40%; border-radius: 2px; background: var(--guld-tekst); margin: 12px 0 8px; }
.akse-seg:nth-child(2) .akse-tid-streg { width: 58%; }
.akse-seg:nth-child(3) .akse-tid-streg { width: 76%; }
.akse-seg:nth-child(4) .akse-tid-streg { width: 94%; }
.akse-seg input:checked + span .akse-tid-streg { background: var(--guld); }
/* Skalaen som links (forsiden): ingen valgt tilstand fra serveren, ingen
   note under. guide.js sætter .er-valgt på det trykkede trin. */
.akse-links { padding-bottom: 0; margin: 8px 0 22px; }
a.akse-seg { text-decoration: none; color: inherit; }
a.akse-seg span { padding-top: 18px; padding-bottom: 16px; }
a.akse-seg:hover span, a.akse-seg.er-valgt span { background: var(--navy); }
a.akse-seg:hover strong, a.akse-seg.er-valgt strong { color: var(--papir); }
a.akse-seg:hover .akse-ikon, a.akse-seg.er-valgt .akse-ikon { stroke: var(--guld); }
a.akse-seg:hover .akse-tid-streg, a.akse-seg.er-valgt .akse-tid-streg { background: var(--guld); }
a.akse-seg:focus-visible { outline: 2px solid var(--guld); outline-offset: -3px; }
/* Længden folder ud under skalaen på forsiden (guide.js). `hidden` skal
   vinde over .akse's egen visning — samme fælde som .pris-form[hidden]. */
.forside-tid[hidden] { display: none; }
.forside-tid { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--kant); }
.forside-tid-label { margin: 0 0 11px; font-size: var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tekst-daempet); font-weight: 500; }
.forside-tid-spring { margin: 14px 0 0; font-size: var(--f-lille); }
.forside-tid-spring a { color: var(--guld-tekst); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.forside-tid-spring a:hover { color: var(--navy); }
/* Tidsaksen har ikke længere en pille »Betyder ikke noget« under sig
   (fjernet 20-09-2026) — så den har samme luft under sig som den anden. */

@media (max-width: 640px) {
  .akse-seg span { padding: 12px 3px 10px; gap: 5px; }
  .akse-seg strong { font-size: 12.5px; }
  .akse-ikon { width: 22px; height: 22px; }
}

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

.guide-svar { margin-top: 30px; background: var(--papir); border: 1px solid var(--kant); border-left: 3px solid var(--guld); 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: var(--guld-tekst); font-weight: 500; }
.guide-svar-navn { margin: 0; font-size: 24px; font-weight: 500; color: var(--navy); line-height: 1.2; }
.guide-svar-under { margin: 6px 0 0; font-size: var(--f-meta); color: var(--tekst-daempet); }
.guide-svar-tekst { margin: 14px 0 0; font-size: var(--f-brod); line-height: 1.75; color: var(--tekst); max-width: 62ch; }
.guide-svar-note { margin: 14px 0 0; font-size: var(--f-meta); color: var(--tekst-daempet); line-height: 1.6; }

@media (max-width: 640px) {
  .guide-boks { flex: 1 1 100%; }
  .guide-bund { align-items: stretch; }
  .guide-bund input { width: 100%; }
  /* Knappen på telefon: fuld bredde, teksten i MIDTEN, højere og større.
     Før stod teksten til venstre i en 48 px høj bjælke, og den lå som det
     sidste i sektionen — lige dér, hvor Safaris værktøjslinje med
     tilbagepilen lægger sig over siden. Mads (20-09-2026): »for lille og
     for lavt«. Så: 56 px, 17 px skrift, centreret, og luft under, så den
     ikke kan ende bag værktøjslinjen. */
  .guide-bund .btn-gold { width: 100%; justify-content: center; min-height: 56px; font-size: 17px; margin-top: 6px; }
  .guide { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------- 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: var(--papir); border: 1px solid var(--kant); border-radius: 10px; padding: 20px 22px; text-decoration: none; transition: border-color .15s; }
.akt-kort:hover { border-color: var(--guld-tekst); }
.akt-kort-navn { font-size: var(--f-stor); font-weight: 500; color: var(--navy); }
.akt-kort-tekst { font-size: var(--f-lille); line-height: 1.65; color: var(--tekst); }
.akt-kort-mere { margin-top: auto; padding-top: 6px; font-size: var(--f-meta); color: var(--guld-tekst); }

.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: var(--papir-varm); border: 1px solid var(--kant); border-radius: 8px; padding: 12px 16px; }
.akt-liste strong { font-size: var(--f-lille); font-weight: 500; color: var(--navy); }
.akt-liste span { font-size: var(--f-meta); color: var(--tekst-daempet); }

.akt-handling { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.aktivitet-side { font-size: var(--f-meta); color: var(--guld-tekst); }
.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: var(--tekst-daempet); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.veje-maalgruppe a { color: var(--navy); border-bottom: 1px solid rgba(200,169,110,0.5); padding-bottom: 1px; }
.veje-maalgruppe a:hover { border-bottom-color: var(--guld-tekst); }
.veje-maalgruppe a[aria-current="true"] { color: var(--guld-tekst); font-weight: 500; }
.guide-note { margin: 10px 0 0; font-size: var(--f-meta); color: var(--tekst-daempet); 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; }
}

/* Indgangssiderne — flere døre til samme ydelse (indgang.php). */
.kort-doere { margin: 0; font-size: var(--f-meta); color: var(--tekst-graa); }
.kort-doere a { color: var(--tekst-daempet); text-decoration: underline; text-decoration-style: dotted;
                text-underline-offset: 3px; }
.kort-doere a:hover { color: var(--navy); }
/* 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; }
/* Videoen bruger samme klasse og samme kasse som fotoet, så pladsen på siden
   ikke flytter sig, når et billede bliver skiftet ud med et klip. object-fit
   er contain og ikke cover: et foto må gerne beskæres fra midten, men et klip
   skal ses som det er optaget — beskærer man en video, ryger halvdelen af det,
   der gjorde den værd at vise. Sort baggrund, så brevkasserne ikke ser ud som
   et hul i siden. */
video.aktivitet-side-foto { object-fit: contain; background: var(--navy-dyb); }

/* YouTube-plakaten: samme kasse som fotoet, med en afspilningsknap oveni.
   Et link og ikke en <button>, fordi den skal virke uden JavaScript — se
   assets/video.js. 16:9 og ikke 3:2, fordi det er dét, rammen bliver, og
   plakaten må ikke springe i størrelse, når den byttes ud. */
.video-plakat { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--navy-dyb); margin-bottom: 26px; }
.video-plakat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.video-plakat:hover img { transform: scale(1.03); }
.video-plakat-knap { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(26,26,46,0.78); border: 2px solid var(--guld); }
.video-plakat-knap::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -8px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--guld); }
.video-plakat:hover .video-plakat-knap { background: var(--navy); }
.video-plakat:focus-visible { outline: 3px solid var(--guld); outline-offset: 3px; }
.video-ramme { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; margin-bottom: 26px; display: block; background: var(--navy-dyb); }

/* 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; }
/* Eksempler fra virkeligheden (cases) på en dør: hvert eksempel er en
   artikel med foto/video øverst, navn, en metalinje og tre mærkede dele —
   Kundens ønske, Løsningen, Resultatet. Etiketten er i husets versaler,
   teksten er brødtekst: det er en historie, ikke en tabel. */
.cases { margin-top: 52px; }
.cases-hoved { margin: 0 0 22px; }
.case { padding: 26px 0 30px; border-top: 1px solid var(--kant); }
.case:last-child { border-bottom: 1px solid var(--kant); }
.case-medie { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 20px; }
.case-navn { margin: 0 0 4px; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 22px; color: var(--navy); }
.case-meta { margin: 0 0 18px; font-size: var(--f-meta); color: var(--tekst-graa); line-height: 1.5; }
.case-del { margin-top: 16px; }
.case-etiket { margin: 0 0 4px; font-size: var(--f-label); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--guld-tekst); }
.case-del .brød { margin: 0 0 8px; }

.indgang-ydelse { margin-top: 44px; background: var(--papir); border: 1px solid var(--kant);
                  border-left: 3px solid var(--guld); border-radius: 0 10px 10px 0; padding: 22px 26px; }
.indgang-ydelse-navn { margin: 0; font-family: 'Playfair Display', Georgia, serif;
                       font-size: 22px; color: var(--navy); }
.indgang-ydelse-spec { margin: 4px 0 0; font-size: var(--f-meta); line-height: 1.6; color: var(--tekst-graa); }

/* 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: var(--guld-tekst); }
.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: var(--guld-tekst); background: var(--papir); }
.akt-liste li > a em { margin-left: auto; font-style: normal; font-size: var(--f-meta);
  color: var(--tekst-daempet); white-space: nowrap; }
.akt-liste li:hover > a em, .akt-liste li:focus-within > a em { color: var(--navy); }

/* ---------------------------------------------------- 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; }
}


/* Forsidens hero på telefon: teksten tættere på portrættet (Mads,
   24-09-2026, med et skærmbillede fra iPhone). Mellem foto og overlinje
   stod 74 px — fotoets 10 px margen + 30 px gap + 34 px polstring — og
   så rullede ordene lige ned bag Safaris værktøjslinje. Nu 22 px. Kun
   forsiden (.hero): Om mig og de andre sider har deres egen hero. Står
   sidst, fordi reglerne for ≤ 900 px ovenover ellers vinder. */
@media (max-width: 600px) {
  .hero { gap: 0; }
  .hero .hero-foto { margin-bottom: 0; }
  .hero-tekst { padding-top: 22px; }
}