/* Legatio -- mørk grund, petrol som hovedfarve og en klar petrol til fremhævninger.
   Skrifttyperne ligger på siden selv (static/fonte), så der hentes intet fra Google.
   Bricolage Grotesque til overskrifter, Figtree til tekst og JetBrains Mono til små etiketter.
   Ét tema: siden er altid mørk, og kun quizkortet er lyst (farverne sættes om i .quiz). */

@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
  src: url(fonte/bricolage-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
  src: url(fonte/bricolage-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonte/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonte/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonte/jetbrainsmono-latin.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --papir: #121615;
  --flade: #1a201f;
  --hvid: #171d1c;
  --felt: #161c1b;          /* feltet bag quizzen på forsiden */
  --blaek: #ece8e1;
  --graa: #9ba5a2;
  --linje: #28302e;
  --linje-staerk: #4f5b58;
  --primaer: #2d696b;       /* petrol: knapper og valgte svar */
  --primaer-moerk: #1f4e50;
  --primaer-tekst: #ffffff;
  --accent: #3fd0c1;        /* klar petrol: links, tal og fremhævninger på den mørke grund */
  --signal: var(--accent);
  --ok: #86c795;
  --advarsel: #e9b35c;
  --advarsel-flade: #2e2412;
  --fejl: #ef6b6b;
  --fejl-flade: #341819;
  --ok-flade: #18261a;
  --fokus: var(--accent);

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --tekst: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 8px;
}

/* De lyse farver: quizkortet og siderne med lister og tekst (legatlisten, legatsiderne, resultaterne, bloggen, Om Legatio
   og redaktionens lister, body.lys). Sidehovedet forbliver mørkt, så siderne hænger sammen. */
.quiz, .lys {
  color-scheme: light;
  --papir: #f4f3ef; --flade: #eceeed; --hvid: #ffffff; --blaek: #1c2322; --graa: #5d6664;
  --linje: #dfe2e0; --linje-staerk: #b9c0bd; --signal: var(--primaer); --accent: var(--primaer-moerk); --fokus: var(--primaer-moerk);
  --ok: #2f6b3b; --ok-flade: #e3eddc; --advarsel: #8a5a00; --advarsel-flade: #f6ead2; --fejl: #a3261c; --fejl-flade: #f7e1dc;
}
.quiz { --linje-staerk: #cdd2d0; }
.lys .top {
  color-scheme: dark;
  --papir: #121615; --flade: #1a201f; --blaek: #ece8e1; --graa: #9ba5a2; --linje: #28302e; --accent: #3fd0c1; --fokus: #3fd0c1;
  color: var(--blaek);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.55 var(--tekst);
  color: var(--blaek);
  background: var(--papir);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; font-stretch: 85%; line-height: 1.08; margin: 0; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
.lille { font-size: .875rem; color: var(--graa); }
.skjult { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skjult:focus { position: static; width: auto; height: auto; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.bredde { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.smal { max-width: 820px; margin-inline: auto; }
.afsnit { margin-top: 3rem; }
/* Lodret rytme på indholdssider: overskrifter har ellers margin 0 */
.smal > h1 { margin-bottom: 1rem; }
.smal > h2 { margin: 2.25rem 0 .6rem; }
.afsnit > h2 { margin-bottom: 1rem; }

/* ------------------------------------------------ sidehoved */
.top { background: var(--papir); border-bottom: 1px solid var(--linje); }
.top .bredde { display: flex; align-items: center; gap: .5rem 1.75rem; min-height: 64px; flex-wrap: wrap; }
/* Logoet er ordet, hvor prikken over i'et er en cirkel i den klare petrol (i'et er et prikløst ı). */
.logo { color: var(--blaek); text-decoration: none; font: 800 1.6rem/1 var(--display); font-stretch: 85%; letter-spacing: -.03em; }
.logo i { font-style: normal; position: relative; }
.logo i::after { content: ""; position: absolute; left: 50%; top: .12em; width: .2em; height: .2em; margin-left: -.105em; border-radius: 50%; background: var(--accent); }
.nav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--graa); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .45rem .85rem; border-radius: 999px; transition: color .15s, background .15s; }
.nav a:hover { color: var(--blaek); background: var(--flade); }
.nav a[aria-current="page"] { color: var(--blaek); background: color-mix(in srgb, var(--primaer) 35%, var(--papir)); }
/* Mobil: menuen på én linje under logoet, som kan rulles vandret, hvis den ikke kan være der */
@media (max-width: 599px) {
  .top .bredde { padding-top: .7rem; }
  .nav { margin-left: -.85rem; width: calc(100% + 1.7rem); flex-wrap: nowrap; overflow-x: auto; gap: .15rem; scrollbar-width: none; padding-bottom: .45rem; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; font-size: .9rem; }
}


main { padding: 2rem 0 4rem; }
.fod { border-top: 1px solid var(--linje); padding: 2rem 0 3rem; color: var(--graa); font-size: .875rem; }
.fod .bredde { display: grid; gap: .25rem; }
.fod p { margin: 0 0 .5rem; max-width: 60ch; }
.fod a { color: var(--graa); }
/* "Er noget forkert …" i bunden: dæmpet, så den ikke tager opmærksomheden. */
.fod .tekstknap { color: var(--graa); }
.fod .tekstknap:hover { color: var(--blaek); }

/* ------------------------------------------------ knapper og felter */
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .75rem 1.3rem; border-radius: 999px; border: 1px solid var(--primaer);
  background: var(--primaer); color: var(--primaer-tekst); font: 700 1rem/1.2 var(--tekst);
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .05s;
}
.knap:hover { background: var(--primaer-moerk); border-color: var(--primaer-moerk); }
.knap:active { transform: translateY(1px); }
.knap.sekundaer { background: transparent; color: var(--blaek); border-color: var(--linje-staerk); }
.knap.sekundaer:hover { border-color: var(--blaek); }
.knap.lille-knap { padding: .42rem .75rem; font-size: .9rem; }
.knap-raekke { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
/* Søgefeltet under overskriften på redaktionens lister (fonde, legater). */
.admin-soeg { margin: 1.1rem 0 1.25rem; }
.tekstknap { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

label { font-weight: 600; display: block; margin-bottom: .3rem; font-size: .92rem; }
input[type=text], input[type=search], input[type=number], input[type=date], input[type=url], input[type=email],
input[type=password], select, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--hvid);
  border: 1px solid var(--linje-staerk); border-radius: var(--r); padding: .6rem .7rem;
}
textarea { min-height: 5.5rem; resize: vertical; }
/* Et tekstfelt, der starter som én linje og vokser med teksten (data-vokser). */
textarea.red-enlinje { min-height: 0; resize: none; overflow: hidden; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fokus); outline-offset: 0; border-color: transparent; }

/* ------------------------------------------------ forside */
/* Quizzen er det første, man møder. Ved siden af står tallet over legater, der passer, som tæller ned
   for hvert svar (app.js, data-tilbage-tal). På mobil kommer quizzen først og tallet under. */
.forside-side main { padding: 1.5rem 0 3.5rem; background: var(--felt); border-bottom: 1px solid var(--linje); }
.forside { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  /* Tallet til venstre og quizzen til højre. I HTML'en kommer quizzen først, så den står øverst på mobil. */
  .forside { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: 1.75rem; align-items: stretch; }
  .tilbage-boks { order: -1; align-self: start; }
  /* Quizkortet er mindst lige så højt som teksten ved siden af, med knapperne i bunden af kortet. */
  .forside > div, .forside .stor-quiz { display: flex; flex-direction: column; }
  .forside .stor-quiz, .forside .stor-quiz .quiz { flex: 1; }
  .forside .stor-quiz .quiz { display: flex; flex-direction: column; }
  .forside .stor-quiz .quiz-fod { margin-top: auto; }
}
/* Overskriften fylder hele bredden: første linje går fra kant til kant (bredden delt med ca. 10,8 giver
   skriftstørrelsen), og "så du kun skal lede her." står på sin egen linje. */
.forside-titel { font-size: clamp(2.1rem, calc((100vw - 2rem) / 10.8), 4.7rem); line-height: 1; letter-spacing: -.035em; margin-bottom: 1.75rem; }
.forside-titel em { display: block; font-style: normal; color: var(--accent); }
.tilbage-boks { padding-top: 1.25rem; }
@media (min-width: 900px) { .tilbage-boks { position: sticky; top: 2rem; } }
.forside-etiket { font: 700 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graa); }
.tilbage-tal { font: 700 clamp(3rem, 6vw, 4.75rem)/.9 var(--display); font-stretch: 85%; letter-spacing: -.035em; color: var(--accent); margin-top: .75rem; font-variant-numeric: tabular-nums; }
.tilbage-boks h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: .9rem; }
.tilbage-boks h2 em { font-style: normal; color: var(--accent); }
.tilbage-boks p { color: var(--graa); margin: .6rem 0 0; }
.tilbage-linje { display: none; margin: 0 0 .6rem; color: var(--graa); font-size: .95rem; }
.tilbage-linje b { font: 700 1.15rem/1 var(--display); font-stretch: 85%; color: var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .tilbage-linje { display: block; }
  .tilbage-boks .forside-etiket, .tilbage-boks .tilbage-tal { display: none; }
  .tilbage-boks h2 { margin-top: 0; }
}
/* Stor quiz (forsiden og /match): skal kunne ses i sin helhed på en almindelig bærbar, når siden indlæses. */
.stor-quiz .quiz { padding: clamp(1.1rem, 2.6vw, 1.75rem); border-radius: 18px; box-shadow: 0 20px 50px -24px rgb(0 0 0 / .7); }
.stor-quiz .quiz-hoved { font-size: .9rem; margin-bottom: .4rem; }
.stor-quiz .trin { max-width: 360px; }
.stor-quiz .quiz legend { font-size: clamp(1.3rem, 1.8vw, 1.45rem); margin-bottom: .15rem; }
.stor-quiz .quiz .hjaelp { font-size: .92rem; margin-bottom: .4rem; }
.stor-quiz .quiz.trinvis fieldset.vis { min-height: 0; margin-bottom: .75rem; }
.stor-quiz .valg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: .6rem; }
.stor-quiz .valg label { display: flex; min-width: 0; }
.stor-quiz .valg label > span { flex: 1; min-width: 0; }
.stor-quiz .valg span { min-height: 46px; padding: .6rem .9rem; font-size: 1.02rem; }
.stor-quiz .valg.kort span { padding: .55rem .85rem; gap: .1rem; font-size: 1rem; }
.stor-quiz .valg.kort small { font-size: .82rem; line-height: 1.3; }
.stor-quiz .valg .spring-over span { min-height: 38px; padding-block: .45rem; }
.stor-quiz .quiz-fod { padding-top: .6rem; }
.stor-quiz .quiz-fod .knap { padding: .55rem 1.1rem; }
.match-side main { padding-top: 1rem; }
.match-intro { margin-bottom: .9rem; }
.match-intro h1 { font-size: clamp(1.8rem, 3vw, 2.2rem); }
.match-intro p { font-size: 1rem; color: var(--graa); margin: .3rem 0 0; max-width: 62rem; }
/* Fire svar ved siden af hinanden på store skærme (udsagnene står stadig i én kolonne, se længere nede). */
/* Forsiden har tallet ved siden af quizzen, så dér først fra 1024 px; under det står svarene to og to. */
@media (min-width: 900px) { .match-side .stor-quiz .valg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .forside .stor-quiz .valg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* "Hvem søger?": kolonnerne følger teksten, så de korte svar er smalle, og de lange højst fylder to linjer. */
@media (min-width: 900px) { .match-side .stor-quiz [data-felt="ansoeger"] .valg { grid-template-columns: repeat(4, auto); } }
@media (min-width: 1024px) { .forside .stor-quiz [data-felt="ansoeger"] .valg { grid-template-columns: repeat(4, auto); } }
@media (min-width: 900px) and (max-width: 1023px) { .forside .stor-quiz [data-felt="ansoeger"] .valg { grid-template-columns: repeat(2, auto); } }
/* Quizzen er stor både på /match og på forsiden, hvor den er det første, man møder. */
.match-side .stor-quiz .quiz, .forside .stor-quiz .quiz { padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 3vw, 2.25rem); }
.match-side .stor-quiz .quiz-hoved, .forside .stor-quiz .quiz-hoved { font-size: .95rem; margin-bottom: .8rem; }
.match-side .stor-quiz .quiz legend, .forside .stor-quiz .quiz legend { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .3rem; }
.match-side .stor-quiz .quiz .hjaelp, .forside .stor-quiz .quiz .hjaelp { font-size: 1rem; margin-bottom: .6rem; }
.match-side .stor-quiz .valg, .forside .stor-quiz .valg { gap: 8px; margin-top: .7rem; }
.match-side .stor-quiz .valg span, .forside .stor-quiz .valg span { min-height: 44px; padding: .55rem .9rem; font-size: 1rem; }
.match-side .stor-quiz .valg.kort span, .forside .stor-quiz .valg.kort span { padding: .6rem .9rem; gap: .15rem; font-size: 1rem; }
.match-side .stor-quiz .valg.kort small, .forside .stor-quiz .valg.kort small { font-size: .84rem; line-height: 1.3; }
.match-side .stor-quiz .valg .spring-over span, .forside .stor-quiz .valg .spring-over span { min-height: 38px; }
.match-side .stor-quiz .quiz-fod, .forside .stor-quiz .quiz-fod { padding-top: 1rem; }
.match-side .stor-quiz .quiz-fod .knap, .forside .stor-quiz .quiz-fod .knap { padding: .75rem 1.4rem; font-size: 1.05rem; }

.emner { display: grid; gap: 0; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--linje); }
.emner a { display: block; padding: .9rem .25rem .9rem 0; border-bottom: 1px solid var(--linje); text-decoration: none; color: var(--blaek); }
.emner a:hover strong { text-decoration: underline; text-underline-offset: .18em; }
.emner strong { font-family: var(--display); font-weight: 600; font-size: 1.05rem; display: block; }
.emner span { font-size: .875rem; color: var(--graa); }

/* ------------------------------------------------ spørgsmålene på /match */
/* Quizkortet er lyst på den mørke side. Farverne sættes om her, så alt inde i kortet (knapper, kort,
   forslag) følger med uden egne regler. */
.quiz { background: var(--papir); color: var(--blaek); border-radius: 14px; padding: 1.25rem; }
.quiz-hoved { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; font-size: .85rem; color: var(--graa); }
.trin { display: flex; justify-content: flex-end; gap: 4px; flex: 1; max-width: 190px; }
.trin span { flex: 1; height: 4px; border-radius: 2px; background: var(--linje); }
/* Med JavaScript er stregerne knapper til de spørgsmål, man er nået til. Knappen er højere end stregen, så den er til at ramme. */
.trin button { flex: 0 1 22px; min-width: 6px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.trin button::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--blaek); transition: background .15s; }
.trin button:hover::before { background: var(--graa); }
.trin button[aria-current]::before { background: var(--signal); }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.quiz legend { font: 700 1.3rem/1.1 var(--display); font-stretch: 85%; letter-spacing: -.02em; color: var(--primaer-moerk); padding: 0; margin-bottom: .35rem; }
.quiz .hjaelp { color: var(--graa); font-size: .9rem; margin: 0 0 .75rem; }
.quiz .hjaelp-andet { margin: .5rem 0 0; font-size: .85rem; }
.quiz button[data-vis] { transition: opacity .15s; }
.quiz button[data-vis].opdaterer { opacity: .75; }
.quiz .hjaelp-andet[hidden] { display: none; }
.valg { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: .75rem; }
.valg label { margin: 0; font-weight: 400; font-size: 1rem; }
.valg input { position: absolute; opacity: 0; pointer-events: none; }
.valg span {
  display: flex; align-items: center; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--linje-staerk);
  border-radius: 12px; cursor: pointer; background: var(--hvid); user-select: none; line-height: 1.25; font-weight: 600;
  /* Lange ord som "Professionsbachelor" deles i stedet for at løbe ind over nabosvaret. */
  hyphens: auto; overflow-wrap: anywhere;
  transition: background .15s, border-color .15s, color .15s;
}
.valg span:hover { border-color: var(--primaer); }
.valg input:checked + span { background: var(--primaer); border-color: var(--primaer); color: var(--primaer-tekst); }
.valg input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Et svar, der er et tal (alder, måneder, snit): feltet med enheden efter. */
.tal { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; }
.tal input { width: 8rem; font-size: 1.1rem; }
.tal span { color: var(--graa); }
/* "Vil ikke oplyse" / "Ved ikke": altid muligt, men visuelt tilbagetrukket */
.valg .spring-over { grid-column: 1 / -1; }
/* I quizzen trin for trin springes der over med knappen ved "Vis mine legater", ikke med et kort. */
.trinvis .valg .spring-over { display: none; }
.valg .spring-over span { min-height: 38px; background: transparent; color: var(--graa); font-size: .92rem; }
.valg .spring-over span:hover { color: var(--blaek); }
.valg .spring-over input:checked + span { background: var(--flade); border-color: var(--linje-staerk); color: var(--blaek); }
/* Quizzens fod er én linje: tilbage til venstre, spring over og "Vis N legater" altid yderst til højre. */
.quiz { container-type: inline-size; }
.quiz-fod { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border-top: 1px solid var(--linje); padding-top: 1rem; }
.quiz-fod .knap-raekke { margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; }
.quiz-fod .knap { white-space: nowrap; }
.knap-diskret {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .75rem; margin-left: -.75rem;
  background: none; border: 0; border-radius: var(--r); font: inherit; font-weight: 600; color: var(--graa); cursor: pointer;
}
.knap-diskret:hover { color: var(--blaek); background: var(--flade); }
.knap-diskret:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.knap-diskret > [aria-hidden] { font-size: 1.15em; line-height: 1; }
.knap-diskret[hidden] { display: none; }
/* Smal quiz (fx på forsiden eller mobilen): pilen alene og lidt mindre knapper, så det holder sig på én linje. */
@container (max-width: 520px) {
  .knap-diskret .tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .quiz-fod .knap { padding: .6rem .95rem !important; font-size: .98rem !important; }
}
.live { font-size: .95rem; }
.live strong { font-family: var(--display); font-size: 1.35rem; }
/* Trinvis visning (kun med JavaScript) */
.quiz.trinvis fieldset { display: none; margin-bottom: 1rem; }
.quiz.trinvis fieldset.vis { display: block; animation: ind .18s ease-out; }
/* Samme højde på alle trin på store skærme, så knapperne ikke hopper rundt */
@media (min-width: 900px) { .quiz.trinvis fieldset.vis, .oversigt { min-height: 22rem; } }
/* Flere spørgsmål på én side (fx "Lidt om dig"): overskriften står øverst, og hvert spørgsmål er mindre. */
.sammen-titel { font: 700 1.3rem/1.1 var(--display); font-stretch: 85%; letter-spacing: -.02em; color: var(--primaer-moerk); margin: 0 0 .75rem; }
.match-side .stor-quiz .sammen-titel, .forside .stor-quiz .sammen-titel { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.quiz.trinvis .sammen-titel { display: none; }
.quiz.trinvis .sammen-titel.vis { display: block; }
.quiz.trinvis fieldset.vis.sammen { min-height: 0; margin-bottom: 1.25rem; }
.quiz.trinvis fieldset.sammen legend { font-size: 1.1rem; }
/* Oversigten over svarene: én række pr. spørgsmål, og hele rækken er en knap */
.oversigt { margin-bottom: 1rem; animation: ind .18s ease-out; }
.oversigt h2 { font: 700 1.3rem/1.1 var(--display); font-stretch: 85%; color: var(--primaer-moerk); margin: 0 0 .35rem; }
.oversigt h2:focus { outline: none; }
.oversigt ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.oversigt button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; padding: .5rem .25rem;
  border: 0; border-bottom: 1px solid var(--linje); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.oversigt li:last-child button { border-bottom: 0; }
.oversigt button:hover { background: var(--flade); }
.oversigt button:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.oversigt .spg { color: var(--graa); font-size: .88rem; }
.oversigt .svar { font-weight: 600; text-align: right; }
.oversigt .svar.sprunget { font-weight: 400; color: var(--graa); font-style: italic; }
@keyframes ind { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .quiz.trinvis fieldset.vis, .oversigt { animation: none; } }

/* Verdenskort med søgning til "Hvor skal du hen?" (kun med JavaScript) */
.kort-soeg { position: relative; margin-top: .75rem; }
.kort-forslag {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--hvid); border: 1px solid var(--linje-staerk); border-radius: var(--r);
  box-shadow: 0 8px 24px rgb(0 0 0 / .14); max-height: 19rem; overflow-y: auto;
}
.kort-forslag li { padding: .55rem .7rem; border-radius: 4px; cursor: pointer; line-height: 1.3; }
.kort-forslag li[aria-selected="true"] { background: var(--flade); }
.kort-forslag li.tom { cursor: default; color: var(--graa); }
/* Havet er en svag petrol, så kortet ikke flyder sammen med quizkortet. */
.kort-ramme { position: relative; margin-top: .6rem; background: color-mix(in srgb, var(--primaer) 9%, var(--hvid)); border: 1px solid var(--linje); border-radius: var(--r); overflow: hidden; }
.landkort { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 430; user-select: none; -webkit-user-select: none; }
.landkort.zoomet { cursor: grab; touch-action: none; }
.landkort.traekker { cursor: grabbing; }
/* Lyse, neutrale lande med hvide grænser; det, man peger på, bliver halvt petrol, og det valgte helt petrol.
   Danmark (hjem) er mørkegråt, så det ikke forveksles med valget. Lande, der ikke kan vælges, er endnu lysere. */
.landkort { --land: #d3d9d7; }
.landkort path, .landkort circle { fill: #e6e9e8; stroke: var(--hvid); stroke-width: .7px; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: fill .12s; }
.landkort [data-vaerdi] { fill: var(--land); cursor: pointer; }
.landkort.zoomet [data-vaerdi] { cursor: inherit; }
.landkort [data-vaerdi].valgt-omraade { fill: color-mix(in srgb, var(--primaer) 25%, var(--land)); }
.landkort [data-vaerdi].over { fill: color-mix(in srgb, var(--primaer) 55%, var(--land)); }
.landkort [data-vaerdi].valgt { fill: var(--primaer); }
.landkort .hjem { fill: var(--graa); }
/* Danmarkskortet til "Hvor bor du?": højt, så det holdes smalt og centreret */
[data-kort="danmark"] { max-width: 26rem; margin-inline: auto; }
.danmarkskort { aspect-ratio: 1000 / 1206; }
.danmarkskort .indsat { fill: none; stroke: var(--linje-staerk); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.med-kort .hjaelp-andet, .med-knapper .hjaelp-andet { display: none; }
/* "Er du vokset op et af følgende steder?": stederne som knapper under hver egn */
[data-egne] { margin-top: .6rem; }
.egn { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem 1rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid var(--linje); }
.egn:first-child { border-top: 0; padding-top: 0; }
.egn-navn { margin: 0; font-weight: 600; font-size: .92rem; }
.egn-steder { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .92rem; }
.egn-nej { padding-top: .75rem; border-top: 1px solid var(--linje); font-size: .92rem; }
@media (max-width: 599px) { .egn { grid-template-columns: 1fr; gap: .35rem; } }
/* Steder uden for kortet (Grønland, Færøerne, udlandet): knapper, der kan vælges som et sted på kortet */
.kort-uden-for { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--linje); font-size: .92rem; }
.kort-uden-for > span { flex-basis: 100%; color: var(--graa); }
.kort-pille { min-height: 36px; padding: .3rem .9rem; border: 1px solid var(--linje-staerk); border-radius: 999px; background: var(--hvid); color: var(--blaek); font: inherit; cursor: pointer; }
.kort-pille:hover { background: var(--flade); }
.kort-pille[aria-pressed="true"] { background: var(--primaer); border-color: var(--primaer); color: var(--primaer-tekst); font-weight: 600; }
.kort-skilt {
  position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap;
  background: var(--blaek); color: var(--papir); font-size: .8rem; padding: .2rem .5rem; border-radius: 4px;
}
.kort-skilt.under { transform: translate(-50%, 18px); }
.kort-knapper { position: absolute; left: 6px; bottom: 6px; display: flex; flex-direction: column; border: 1px solid var(--linje-staerk); border-radius: var(--r); background: var(--hvid); overflow: hidden; }
.kort-knapper button {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none;
  color: var(--blaek); font: 500 1.05rem/1 var(--tekst); cursor: pointer;
}
.kort-knapper button + button { border-top: 1px solid var(--linje); }
.kort-knapper button:hover:not(:disabled) { background: var(--flade); }
.kort-knapper button:disabled { color: var(--linje-staerk); cursor: default; }
.kort-knapper svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
@media (max-width: 480px) { .kort-knapper { flex-direction: row; } .kort-knapper button + button { border-top: 0; border-left: 1px solid var(--linje); } }
.kort-fod { display: flex; align-items: center; min-height: 2.25rem; margin-top: .6rem; font-size: .95rem; }
.kort-hjaelp { color: var(--graa); }
/* Valget: et mærke i samme grønne som det valgte sted på kortet, med et kryds til at fjerne det */
.kort-valgt { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .25rem .25rem .8rem; border-radius: 999px; background: var(--signal); color: var(--primaer-tekst); font-weight: 600; }
.kort-valgt button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.kort-valgt button:hover { background: rgb(255 255 255 / .16); }
.kort-valgt svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kort-valgt button:focus-visible, .kort-pille:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .landkort path, .landkort circle { transition: none; } }

/* ------------------------------------------------ legatlister (kalender) */
.maaned { font: 600 .78rem/1 var(--tekst); letter-spacing: .12em; text-transform: uppercase; color: var(--graa);
  display: flex; align-items: center; gap: .75rem; margin: 2rem 0 .25rem; }
.maaned::after { content: ""; flex: 1; border-top: 1px solid var(--linje-staerk); }
.maaned:first-child { margin-top: 0; }
.liste { list-style: none; padding: 0; margin: 0; }
.raekke-legat { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linje); position: relative; }
@media (min-width: 700px) { .raekke-legat { grid-template-columns: 64px minmax(0, 1fr) auto; } }
.raekke-legat:hover { background: linear-gradient(90deg, transparent, var(--flade) 8%, var(--flade) 92%, transparent); }
.datoblok { text-align: center; border: 1px solid var(--linje-staerk); border-radius: var(--r); background: var(--hvid); align-self: start; padding: .3rem 0 .35rem; }
.datoblok .dag { display: block; font: 600 1.55rem/1 var(--display); }
.datoblok .mnd { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graa); margin-top: .2rem; }
.datoblok.snart { border-color: var(--signal); }
.datoblok.snart .dag { color: var(--signal); }
.datoblok.uden { padding: .55rem 0; }
.datoblok.uden .dag { font-size: 1rem; }
.raekke-legat h3 a { color: var(--blaek); text-decoration: none; }
.raekke-legat h3 a::after { content: ""; position: absolute; inset: 0; }  /* hele rækken er klikbar */
.raekke-legat h3 a:hover { text-decoration: underline; text-underline-offset: .18em; }
.raekke-legat .under { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .9rem; color: var(--graa); margin-top: .3rem; }
.raekke-legat .beloeb { font-weight: 600; white-space: nowrap; align-self: start; padding-top: .15rem; }
@media (max-width: 699px) { .raekke-legat .beloeb { grid-column: 2; padding-top: 0; font-size: .95rem; } }
.raekke-legat .beloeb.ukendt { font-weight: 400; color: var(--graa); font-size: .9rem; }
/* Skeletrækker, mens legaterne hentes: samme mål som en rigtig række, så listen ikke hopper. */
.skelet .raekke-legat:hover { background: none; }
.skelet .datoblok { height: 3.6rem; border-color: var(--linje); background: var(--flade); }
.skelet i { display: block; height: .8rem; border-radius: 4px; background: var(--linje); }
.skelet span:not(.beloeb) > i:first-child { width: min(22rem, 70%); height: 1.1rem; margin: .2rem 0 .65rem; }
.skelet span:not(.beloeb) > i + i { width: min(12rem, 40%); }
.skelet .beloeb i { width: 6rem; height: 1rem; }
.skelet .raekke-legat { animation: skelet 1.4s ease-in-out infinite; }
@keyframes skelet { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skelet .raekke-legat { animation: none; } }
.quiz fieldset:focus { outline: none; }
.verif { color: var(--ok); }
.verif::before { content: "✓ "; }
ul.forklaring { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
ul.forklaring li.ja { color: var(--ok); }
ul.forklaring li.ja::before { content: "✓ "; }
/* Et blødt krav sorterer aldrig fra: det står med "Fonden foretrækker", uanset om brugeren opfylder det. */
ul.forklaring li.tjek, ul.forklaring li.bloed { color: var(--advarsel); }
ul.forklaring li.tjek::before { content: "Tjek selv: "; font-weight: 600; }
ul.forklaring li.bloed::before { content: "Fonden foretrækker: "; font-weight: 600; }
ul.forklaring li.mere a { position: relative; z-index: 1; font-weight: 600; }

.tom { border: 1px solid var(--linje-staerk); border-radius: var(--r); padding: 1.25rem; color: var(--graa); }

/* ------------------------------------------------ resultatside */
.resultat-hoved { border-bottom: 1px solid var(--linje); padding-bottom: 1rem; margin-bottom: 2rem; }
.resultat-hoved h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: 0 0 .9rem; }
.resultat-bjaelke { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
/* Tilbageknappen ("Ret dine svar" på resultaterne, "Alle blogindlæg" på et indlæg): en pille med en pil,
   stor nok at ramme på mobil. */
.tilbage-knap { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .38rem .95rem .38rem .7rem; border: 1px solid var(--linje-staerk); border-radius: 999px; background: var(--hvid); color: var(--accent); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .15s, border-color .15s; }
.tilbage-knap svg { transition: transform .15s; }
.tilbage-knap:hover { background: var(--flade); border-color: var(--accent); }
.tilbage-knap:hover svg { transform: translateX(-2px); }
.tilbage-knap:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.sortering fieldset { display: flex; align-items: center; gap: .6rem; border: 0; padding: 0; margin: 0; }
.sortering legend { float: left; padding: 0; font-size: .9rem; color: var(--graa); }
/* Sorteringen som knapper i en række: alle muligheder er synlige og kan vælges med ét klik. */
.segment { display: inline-flex; border: 1px solid var(--linje-staerk); border-radius: 999px; overflow: hidden; background: var(--hvid); }
.segment label { margin: 0; font-weight: 400; position: relative; }
.segment label + label { border-left: 1px solid var(--linje); }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; padding: .38rem .9rem; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.segment span:hover { background: var(--flade); }
.segment input:checked + span { background: var(--primaer); color: var(--primaer-tekst); font-weight: 600; }
.segment input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: -3px; }
.resultat-hoved h1 .antal { color: var(--signal); }
/* Legater, der kun er for bestemte grupper, og derfor er skjult (se "sortér til" i quizzen). */
.maerke { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .82rem;
  background: var(--flade); color: var(--blaek); border: 1px solid var(--linje); text-decoration: none; }
a.maerke:hover { border-color: var(--blaek); }
a.maerke .x { color: var(--graa); font-size: 1rem; line-height: 1; }
.maerke.ok { background: var(--ok-flade); color: var(--ok); border-color: transparent; }
.maerke.advarsel { background: var(--advarsel-flade); color: var(--advarsel); border-color: transparent; }
.maerke.fejl { background: var(--fejl-flade); color: var(--fejl); border-color: transparent; }

/* ------------------------------------------------ søgning */
.soeg-linje { display: flex; gap: .5rem; max-width: 40rem; margin-bottom: 1.5rem; }
.soeg-linje input { flex: 1; min-width: 0; }
.soeg-top { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.soeg-top select { width: auto; padding: .4rem .6rem; }

/* ------------------------------------------------ legatside */
/* Én smal spalte: fakta øverst, så hvad man kan få støtte til, hvem der kan søge, og hvordan man søger. */
.legat { max-width: 760px; }
.legat-hoved { padding-bottom: 1.5rem; }
.legat-hoved .fond { font-size: 1.05rem; color: var(--graa); margin: 0 0 .5rem; }
.faktaboks { display: grid; margin: 0; background: var(--hvid); border: 1px solid var(--linje); border-radius: 10px; }
.faktaboks > div { padding: .9rem 1.25rem; }
.faktaboks > div + div { border-top: 1px solid var(--linje); }
@media (min-width: 600px) {
  .faktaboks { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .faktaboks > div { padding: 1.1rem 1.25rem; }
  .faktaboks > div + div { border-top: 0; border-left: 1px solid var(--linje); }
}
.faktaboks dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--graa); }
.faktaboks dd { margin: .25rem 0 0; font: 600 1.2rem/1.25 var(--display); }
.faktaboks dd .fakta-note { display: block; margin-top: .4rem; max-width: 30ch; font: 400 .85rem/1.45 var(--tekst); color: var(--graa); }
.faktaboks dd a.fakta-note { color: var(--accent); overflow-wrap: anywhere; }
.handling { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; }
.maerke { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: var(--flade); color: var(--graa); font-size: .75rem; font-weight: 500; vertical-align: .1em; }
.legat-krop { margin-top: 2.5rem; }
.legat-krop section + section { margin-top: 2.5rem; }
.legat-krop h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
.legat-krop h3 { font: 600 .8rem/1.4 var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--graa); margin: 1.5rem 0 .5rem; }
.legat-krop h3 .lille { font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 400; }
.legat-krop h2 + h3 { margin-top: 0; }
.legat-krop p { margin: 0 0 .75rem; }
/* Krav: én linje pr. krav med et flueben; det, fonden foretrækker, med en tom cirkel. */
.krav { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linje); border-radius: 10px; background: var(--hvid); }
.krav li { position: relative; padding: .7rem 1rem .7rem 2.6rem; }
.krav li + li { border-top: 1px solid var(--linje); }
.krav li::before { content: "✓"; position: absolute; left: 1rem; top: .7rem; color: var(--ok); font-weight: 700; }
.krav.foretrukket li::before { content: "○"; color: var(--graa); font-weight: 400; }
.krav.frister li { padding-left: 1rem; }
.krav.frister li::before { content: none; }
.punkter { margin: 0; padding-left: 1.2rem; }
.punkter li { margin: .3rem 0; }
/* Kildelinjen nederst: hvor oplysningerne kommer fra, og hvad vi ikke ved. */
.legat-kilde { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linje); font-size: .875rem; color: var(--graa); }
.legat-kilde p { margin: 0 0 .4rem; }
/* Noter på legatsiden (flag, lukket, art …) under faktaboksen. */
.legat-noter { display: grid; gap: .75rem; margin-top: 1.25rem; }
.info { border-radius: var(--r); padding: .85rem 1rem; font-size: .95rem; background: var(--flade); }
.info.advarsel { background: var(--advarsel-flade); color: var(--advarsel); }
.info.ok { background: var(--ok-flade); color: var(--ok); }
.info.fejl { background: var(--fejl-flade); color: var(--fejl); }

/* ------------------------------------------------ redaktion */
/* Redaktionens linje over sidehovedet: mørk petrol, så den skiller sig ud fra det sorte sidehoved. */
.admin-nav { background: var(--primaer-moerk); color: var(--primaer-tekst); font-size: .92rem; }
.admin-nav .bredde { display: flex; gap: .4rem 1.25rem; flex-wrap: wrap; align-items: center; min-height: 42px; }
.admin-nav a, .admin-nav button { color: var(--primaer-tekst); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.admin-nav a:hover, .admin-nav button:hover { text-decoration: underline; }
.bred-side main h2:not(.maaned) { margin: 2.25rem 0 .9rem; }
.bred-side main .boks h2 { margin: 0 0 .25rem; }
.boks { border: 1px solid var(--linje); border-radius: 10px; padding: 1.1rem; background: var(--hvid); }
.boks h2 { font-size: 1.15rem; margin-bottom: .25rem; }
.tabel-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
th { color: var(--graa); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.kpi { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kpi .vaerdi { font: 600 2rem/1.1 var(--display); margin: .25rem 0; }
a.boks { text-decoration: none; color: var(--blaek); }
a.boks:hover { border-color: var(--blaek); }
.formular { display: grid; gap: 1rem; }
.bred-side .bredde { max-width: 1400px; }

/* ------------------------------------------------ blog */
.ingress { font-size: 1.15rem; color: var(--graa); margin: 1rem 0 .5rem; }
.blog-liste { margin-top: 2rem; grid-template-columns: 1fr; }
.blog-liste strong { font-size: 1.2rem; }
.artikel .brodkrumme { margin: 0 0 1.25rem; }
.artikel h2 { margin: 2.25rem 0 .75rem; }
.artikel ul, .artikel ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.artikel li { margin-bottom: .45rem; }
.kort-svar { margin-top: 1.75rem; padding: 1.1rem 1.25rem; border-left: 3px solid var(--signal); background: var(--flade); border-radius: 0 var(--r) var(--r) 0; }
.kort-svar h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.kort-svar li:last-child { margin-bottom: 0; }
.artikel-cta { margin-top: 2.5rem; }
.artikel-cta h2 { margin: 0 0 .4rem; }
.tabel-rul { overflow-x: auto; margin-bottom: .5rem; }
table.budget { max-width: 30rem; font-size: 1rem; }
table.budget .tal { text-align: right; padding-right: 0; }
table.budget .undertitel th { padding-top: 1.5rem; }
table.budget .sum th, table.budget .sum td { font-weight: 600; color: var(--blaek); border-bottom-color: var(--linje-staerk); }
table.budget .sum th { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.fejl-bund { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linje); font-size: .85rem; color: var(--graa); }
.fejl-bund .formular { max-width: 28rem; }
.fod .fejl-bund { margin: 0; padding: 0; border-top: 0; }

/* ------------------------------------------------ quiz: områdekort og antal pr. svar */
.valg.kort { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.valg.kort span { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .2rem; padding: .7rem .8rem; text-align: left; font-weight: 600; }
.valg.kort small { font-weight: 400; font-size: .82rem; line-height: 1.35; color: var(--graa); }
.valg.kort input:checked + span small { color: inherit; opacity: .85; }
.valg label[hidden] { display: none; }

/* ------------------------------------------------ legatside: bilag */
.tjekliste { list-style: none; padding: 0; margin: 0 0 .5rem; }
.tjekliste li { position: relative; padding: .3rem 0 .3rem 1.8rem; }
.tjekliste li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 1rem; height: 1rem; border: 1.5px solid var(--linje-staerk); border-radius: 3px; }

/* ------------------------------------------------ redaktion: dashboard */
.kpi a.obs { border-left: 4px solid var(--advarsel); }
.kpi a.obs .vaerdi { color: var(--advarsel); }
.stat-linje { display: flex; flex-wrap: wrap; gap: .5rem 2rem; list-style: none; padding: 0; margin: 0 0 2rem; color: var(--graa); }
.stat-linje strong { display: block; font: 600 1.75rem/1.1 var(--display); color: var(--blaek); }
.bred-side .kpi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }

/* ---------------------------------------------------------------- oplysninger om legaterne
   Alle legater står på siden. Mærkaterne siger, om et legat ser lukket ud. */
.maerke.lukket { background: var(--fejl-flade); color: var(--fejl); border-color: transparent; }
.oplysninger { margin: 0 0 1.25rem; padding: .75rem .9rem; border: 1px solid var(--linje); border-radius: var(--r); background: var(--hvid); }
.oplysninger .kasser { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.oplysninger .kasse { display: inline-flex; align-items: baseline; gap: .35rem; padding: .2rem .65rem; border: 1px solid var(--linje);
  border-radius: 999px; font-size: .85rem; color: var(--blaek); text-decoration: none; background: var(--papir); }
.oplysninger .kasse:hover { border-color: var(--linje-staerk); }
.oplysninger .kasse .n { color: var(--graa); font-size: .78rem; font-variant-numeric: tabular-nums; }
.oplysninger .kasse.ok { border-color: var(--ok-flade); }
.oplysninger .kasse.valgt { background: var(--primaer); border-color: var(--primaer); color: var(--primaer-tekst); }
.oplysninger .kasse.valgt .n { color: var(--primaer-tekst); opacity: .8; }

/* Quizzens sidste trin: én side pr. overskrift. Overskriften fylder hele rækken; tomme felter skjules. */
[data-udsagn-gruppe] > .etiket, [data-navne] > .etiket { grid-column: 1 / -1; margin: 0; font-size: .92rem; font-weight: 600; color: var(--graa); }
[data-udsagn-gruppe][hidden] { display: none; }
/* Udsagnene er hele sætninger: én kolonne, der læses som en tjekliste, ikke kort i et gitter. */
.stor-quiz .valg[data-udsagn-gruppe], .valg[data-udsagn-gruppe] { grid-template-columns: 1fr; gap: 6px; }
.stor-quiz .valg[data-udsagn-gruppe] span { min-height: 0; padding: .55rem .9rem; font-size: 1rem; line-height: 1.35; }
[data-udsagn-gruppe] > .etiket:not(:first-child), [data-navne] > .etiket:not(:first-child) { margin-top: .6rem; }
[data-udsagn-gruppe] > .side-nr { margin: 0; font-size: .85rem; color: var(--graa); }
.valg[data-udsagn-gruppe] > .navnesoeg { position: static; opacity: 1; pointer-events: auto; margin: .2rem 0 .3rem; }
[data-udsagn-gruppe] > label[hidden] { display: none; }
[data-udsagn-gruppe] > .ingen { margin-top: .4rem; }
[data-udsagn-gruppe] > .ingen span { color: var(--graa); }
.trinvis fieldset[data-felt="udsagn"] .flervalg:not([data-udsagn-gruppe]) { display: none; }

/* ------------------------------------------------ redaktionen: redigér et legat (/admin/legat/{id}) */
.red-hoved { margin-bottom: 1.5rem; }
.red-hoved h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin: .35rem 0 .6rem; max-width: 34ch; }
.red-gitter { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1000px) { .red-gitter { grid-template-columns: minmax(0, 1fr) 280px; gap: 2rem; } }
.red-indhold { display: grid; gap: 1.25rem; min-width: 0; }
.red-sektion { background: var(--hvid); border: 1px solid var(--linje); border-radius: 12px; padding: 1.4rem 1.5rem 1.5rem;
  display: grid; gap: 1.1rem; scroll-margin-top: 1rem; min-width: 0; }
.bred-side main .red-sektion h2 { font-size: 1.35rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.red-sektion-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.red-sektion > .knap { justify-self: start; }
.red-under { font: 600 1rem/1.2 var(--tekst); margin: .4rem 0 -.4rem; padding-top: 1rem; border-top: 1px solid var(--linje); }
.red-felt { display: grid; gap: .1rem; min-width: 0; align-content: start; }
.red-felt > label { margin-bottom: .25rem; }
.red-hjaelp { margin: .35rem 0 0; font-size: .85rem; color: var(--graa); }
.red-advar { color: var(--advarsel); background: var(--advarsel-flade); padding: .5rem .7rem; border-radius: var(--r); }
.red-titel { font: 600 1.25rem/1.3 var(--display) !important; }
.red-gitter-2, .red-gitter-4 { display: grid; gap: 1rem; }
.red-gitter-4 { grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
  .red-gitter-2 { grid-template-columns: 1fr 1fr; }
  .red-gitter-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.red-med-knap { display: flex; gap: .5rem; }
.red-med-knap input { flex: 1; min-width: 0; }
.red-med-knap .knap { white-space: nowrap; }
.red-slukket { opacity: .4; pointer-events: none; }
.red-enhed { position: relative; }
.red-enhed input { padding-right: 2.6rem; }
.red-enhed span { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--graa); pointer-events: none; }
.red-antal { font: 600 .78rem/1 var(--tekst); background: var(--flade); color: var(--graa); border-radius: 999px; padding: .25rem .55rem; }
.red-antal:empty { display: none; }
.red-antal.red-nul { background: var(--fejl-flade); color: var(--fejl); }

/* Valg som knapper: formål, hvem der kan søge, bilag og betingelsernes værdier. */
.red-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.red-chip { margin: 0; font-weight: 400; font-size: .9rem; position: relative; }
.red-chip[hidden] { display: none; }
.red-chip input { position: absolute; opacity: 0; pointer-events: none; }
.red-chip span { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border: 1px solid var(--linje-staerk);
  border-radius: 999px; background: var(--hvid); cursor: pointer; user-select: none; line-height: 1.25; transition: background .12s, border-color .12s; }
.red-chip span:hover { border-color: var(--blaek); }
.red-chip input:checked + span { background: var(--primaer); border-color: var(--primaer); color: var(--primaer-tekst); }
.red-chip input:checked + span::before { content: "✓"; font-size: .8em; }
.red-chip input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }
.red-gruppe + .red-gruppe { margin-top: .9rem; }
.red-gruppe[hidden] { display: none; }
.red-gruppe-navn { font: 600 .78rem/1 var(--tekst); text-transform: uppercase; letter-spacing: .06em; color: var(--graa); margin: 0 0 .5rem; }
.red-filter { max-width: 22rem; padding: .45rem .7rem !important; }
.red-valg-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .45rem; }
.red-valg-top label { margin: 0; }
.red-valgliste { max-height: 15rem; overflow-y: auto; border: 1px solid var(--linje); border-radius: var(--r); padding: .6rem; background: var(--papir); }

/* Knapper i en række (ansøgningsstatus, krav eller foretrækker). */
.red-segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--linje-staerk); border-radius: var(--r); overflow: hidden; width: fit-content; max-width: 100%; }
.red-segment label { margin: 0; font-weight: 400; position: relative; }
.red-segment label + label { border-left: 1px solid var(--linje-staerk); }
.red-segment input { position: absolute; opacity: 0; pointer-events: none; }
.red-segment span { display: block; padding: .5rem .9rem; cursor: pointer; background: var(--hvid); font-size: .92rem; }
.red-segment span:hover { background: var(--flade); }
.red-segment input:checked + span { background: var(--primaer); color: var(--primaer-tekst); font-weight: 600; }
.red-segment input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: -3px; }

.red-mere summary { cursor: pointer; font-size: .9rem; color: var(--graa); }
.red-mere[open] summary { margin-bottom: .8rem; }

/* Frister og betingelser som kort. */
.red-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.red-liste:empty { display: none; }
.red-tom { margin: 0; color: var(--graa); font-size: .92rem; }
.red-tom[hidden] { display: none; }
.red-kort { border: 1px solid var(--linje); border-radius: 10px; padding: 1rem; background: var(--papir); display: grid; gap: .9rem; }
.red-kort-fod { display: flex; justify-content: flex-end; }
.red-kort-fod .tekstknap { font-size: .88rem; color: var(--fejl); }
.red-k.red-fjernes { opacity: .55; background: var(--fejl-flade); }
.red-k.red-fjernes summary .red-k-tekst { text-decoration: line-through; }
.red-k.red-fjernes .red-kort-fod .tekstknap { color: var(--blaek); }
/* En frist er én række datoer med en fjern-knap. På bred skærm står overskrifterne én gang over rækkerne
   (skærmlæsere hører feltets egen overskrift); på mobil står de ved hvert felt. Fjernes en frist, bliver
   rækken til en linje med "Fortryd". */
.red-runde-hoved, .red-runde-felter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 2.75rem; gap: .75rem; }
.red-frister { gap: .4rem; }
.red-frister .red-liste { gap: .6rem; }
.red-runde-hoved { font-size: .85rem; color: var(--graa); font-weight: 600; }
.red-felt:has(.red-tom:not([hidden])) .red-runde-hoved { display: none; }
.red-runde-felter { align-items: end; }
.red-runde-felter .red-felt { margin: 0; }
.red-runde-felter .red-felt > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.red-runde-felter input { width: 100%; min-width: 0; }
.red-fjern { height: 46px; border: 1px solid transparent; border-radius: var(--r); background: none;
  color: var(--graa); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.red-fjern:hover, .red-fjern:focus-visible { color: var(--fejl); border-color: var(--fejl); background: var(--fejl-flade); }
.red-runde-fjernet { display: none; margin: 0; padding: .6rem .8rem; border-radius: var(--r); background: var(--fejl-flade); font-size: .92rem; }
.red-runde.red-fjernes .red-runde-felter { display: none; }
.red-runde.red-fjernes .red-runde-fjernet { display: block; }
.red-tilfoej { font-size: .92rem; text-decoration: none; font-weight: 600; }
.red-tilfoej:hover { text-decoration: underline; }
@media (max-width: 600px) {
  /* Fristen øverst med fjern-knappen ved siden af; åbner og svar senest under, med overskrifter på alle rækker. */
  .red-runde-felter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem;
    grid-template-areas: "frist frist fjern" "aabner svar ."; }
  .red-runde-felter > :nth-child(1) { grid-area: frist; }
  .red-runde-felter > :nth-child(2) { grid-area: aabner; }
  .red-runde-felter > :nth-child(3) { grid-area: svar; }
  .red-fjern { grid-area: fjern; }
  .red-runde-hoved { display: none; }
  .red-runde-felter .red-felt > span { position: static; width: auto; height: auto; clip: auto; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
  .red-runde + .red-runde { border-top: 1px solid var(--linje); padding-top: .75rem; }
}
.red-k { padding: 0; gap: 0; }
.red-k summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; }
.red-k summary::-webkit-details-marker { display: none; }
.red-k summary::after { content: "›"; margin-left: auto; color: var(--graa); font-size: 1.3rem; line-height: 1; transition: transform .15s; }
.red-k[open] summary::after { transform: rotate(90deg); }
.red-k[open] summary { border-bottom: 1px solid var(--linje); }
.red-k summary .maerke { margin: 0; flex: none; }
.red-k-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.red-k-krop { display: grid; gap: .9rem; padding: 1rem; }
.red-k.red-fjernes .red-k-krop { display: grid; }
.red-k.red-fjernes .red-k-krop > :not(.red-kort-fod) { display: none; }
.red-mangler { color: var(--fejl); font-weight: 400; }
.k-vaerdi:empty { display: none; }
.k-vaerdi { display: grid; gap: .8rem; }

/* Sidepanelet: gem, afsnit og faste oplysninger. */
.red-side { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .red-side { position: sticky; top: 1rem; } }
.red-gem { background: var(--hvid); border: 1px solid var(--linje); border-radius: 12px; padding: 1rem; display: grid; gap: .6rem; }
.red-gem-status { margin: 0; font-size: .9rem; color: var(--graa); }
.red-gem-status::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); margin-right: .45rem; vertical-align: .05em; }
.har-aendringer .red-gem-status { color: var(--advarsel); }
.har-aendringer .red-gem-status::before { background: var(--advarsel); }
.red-gem-knap { width: 100%; }
.red:not(.har-aendringer) .red-gem-knap { background: transparent; color: var(--accent); }
.red-gem .tekstknap { justify-self: start; }
.red-genvej { margin: 0; font-size: .78rem; }
.red-nav { display: grid; background: var(--hvid); border: 1px solid var(--linje); border-radius: 12px; padding: .4rem; }
.red-nav a { display: flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: var(--r); color: var(--blaek); text-decoration: none; font-size: .92rem; }
.red-nav a:hover { background: var(--flade); }
.red-nav a.aktiv { background: var(--flade); font-weight: 600; }
.red-nav a.aendret::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--advarsel); margin-left: auto; }
.red-nav .red-antal { padding: .15rem .45rem; }
.red-fakta { display: grid; gap: .6rem; padding: 0 .3rem; }
.red-fakta dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; }
.red-fakta dt { color: var(--graa); }
.red-fakta dd { margin: 0; overflow-wrap: anywhere; color: var(--blaek); }
.red-side .info ul { margin: .4rem 0; padding-left: 1.1rem; }
@media (max-width: 999px) {
  .red-nav { display: none; }
  .red-gem { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; grid-template-columns: 1fr auto; align-items: center;
    border-radius: 12px 12px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, .08); padding: .75rem 16px; }
  .red { padding-bottom: 5rem; }
  .red-toast { bottom: 6rem; }
  .red-gem-knap { width: auto; grid-column: 2; grid-row: 1 / span 2; }
  .red-genvej { display: none; }
  .red-side { position: static; }
}
.red-fejl { margin-bottom: 1.25rem; }
.red-fejl ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.red-fejl a { color: inherit; }
.red-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 20; background: var(--blaek); color: var(--papir);
  padding: .7rem 1.2rem; border-radius: 999px; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
  animation: red-toast 3.2s ease forwards; pointer-events: none; }
@keyframes red-toast { 0% { opacity: 0; transform: translate(-50%, 1rem); } 8%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .red-toast { animation-duration: 4s; } }