:root {
  /* ÉN fast lys palet — siden ser ens ud for alle, uanset om deres
     computer står i lys eller mørk tilstand. Vil I ændre farverne,
     er det kun her, I skal rette. */
  --papir:        #fcfbf8;   /* sidens bund — næsten hvidt papir      */
  --papir-dyb:    #f2efe7;   /* rolig flade bag hero og bund          */
  --kort:         #ffffff;   /* kort, felter og personbokse           */
  --blaek:        #1f2622;   /* brødtekst — meget høj kontrast        */
  --blaek-svag:   #59625b;   /* underordnet tekst, stadig læsbar      */
  --linje:        #e1ddd1;   /* streger og rammer                     */
  --skovgroen:    #2f6149;   /* hovedfarve: knapper, links, accenter  */
  --skovgroen-lys:#3f7e60;   /* hover                                 */
  --okker:        #9a7b3f;   /* varm sekundærfarve: indgiftede        */
  --knap-tekst:   #ffffff;

  /* Gamle navne bevares, så resten af stilarket ikke skal skrives om */
  --messing:      var(--skovgroen);
  --messing-lys:  var(--skovgroen-lys);
  --groen:        var(--okker);

  --skygge:       0 1px 2px rgba(31,38,34,.05), 0 10px 30px rgba(31,38,34,.06);
  --radius:       10px;
  --bredde:       1100px;
  --serif:        "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }
a  { color: var(--messing); text-decoration-color: color-mix(in srgb, var(--messing) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--messing-lys); }

.wrap { max-width: var(--bredde); margin: 0 auto; padding: 0 24px; }
.smal { max-width: 720px; }

/* ---------- Topbjælke ---------- */
header.top {
  border-bottom: 1px solid var(--linje);
  /* Massiv baggrund frem for backdrop-filter: et sløret lag oven på noget,
     der animerer nedenunder, er en klassisk kilde til flimren på iOS. */
  background: var(--papir);
  position: sticky; top: 0; z-index: 40;
}
.top-inner { display: flex; align-items: center; gap: 22px; padding: 14px 24px; max-width: var(--bredde); margin: 0 auto; }
.brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blaek); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--messing); }
nav.hoved { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
nav.hoved a { font-size: .97rem; color: var(--blaek-svag); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
nav.hoved a:hover { color: var(--blaek); }
nav.hoved a.aktiv { color: var(--blaek); border-bottom-color: var(--messing); }

/* Log ind sidder i bjaelken, hvor redaktoererne rent faktisk leder efter den. */
header.top a.logind {
  font-size: .9rem; white-space: nowrap; text-decoration: none;
  color: var(--blaek-svag);
  border: 1px solid var(--linje); border-radius: 999px;
  padding: 4px 14px; margin-left: 6px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
header.top a.logind:hover,
header.top a.logind:focus-visible {
  background: var(--skovgroen); border-color: var(--skovgroen); color: #fff;
}

/* ---------- Forside-hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 84px 0 64px; border-bottom: 1px solid var(--linje);
  background: linear-gradient(180deg, var(--papir) 0%, var(--papir-dyb) 100%);
}
.hero .wrap { position: relative; z-index: 2; max-width: var(--bredde); }
.hero .tekst { max-width: 34rem; }
#trae-baggrund {
  position: absolute; inset: 0 0 0 auto; width: min(58%, 720px); height: 100%;
  z-index: 1; pointer-events: none;
  /* Udtoningen mod kanten tegnes inde i canvas'et, ikke med en CSS-maske.
     En maske på et lag, der tegner hele tiden, får iPhone til at flimre. */
}
@media (max-width: 780px) {
  /* På telefon lægger træet sig i bunden af heroen, så teksten står frit */
  #trae-baggrund { width: 100%; height: 58%; inset: auto 0 0 0; opacity: .5; }
  .hero { padding: 48px 0 190px; }
  .hero .tekst { max-width: none; }
}
.hero .kicker { font-family: var(--serif); font-style: italic; color: var(--messing); margin-bottom: 12px; }
.hero p.manchet { font-size: 1.2rem; color: var(--blaek-svag); max-width: 60ch; }

/* ---------- Knapper ---------- */
.knap {
  display: inline-block; padding: 11px 22px; border-radius: 999px;
  background: var(--messing); color: var(--knap-tekst) !important; text-decoration: none;
  font-size: .95rem; font-weight: 600; border: 1px solid var(--messing);
  cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.knap:hover { background: var(--messing-lys); transform: translateY(-1px); }
.knap.sekundaer { background: transparent; color: var(--messing) !important; }
.knap.sekundaer:hover { background: color-mix(in srgb, var(--messing) 10%, transparent); }
.knap-raekke { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Sektioner og kort ---------- */
section.blok { padding: 56px 0; }
.gitter { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kort {
  background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--skygge); text-decoration: none; color: inherit; display: block;
}
a.kort:hover { border-color: var(--messing-lys); transform: translateY(-2px); transition: .15s; }
.kort h3 { margin-bottom: .35em; }
.kort p { color: var(--blaek-svag); font-size: 1rem; margin: 0; }
.kort .ikon { font-family: var(--serif); font-size: 1.6rem; color: var(--messing); display: block; margin-bottom: 10px; }

.noegletal { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 8px; }
.noegletal div { }
.noegletal b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--messing); line-height: 1; }
.noegletal span { font-size: .85rem; color: var(--blaek-svag); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Faner ---------- */
.faner { display: flex; gap: 6px; border-bottom: 1px solid var(--linje); margin: 0 0 24px; flex-wrap: wrap; }
.faner button {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--blaek-svag); padding: 10px 14px;
}
.faner button:hover { color: var(--blaek); }
.faner button.aktiv { color: var(--blaek); border-bottom-color: var(--messing); font-weight: 600; }

/* ---------- Søgefelt ---------- */
.soegefelt {
  width: 100%; padding: 12px 16px; font: inherit; font-size: 1rem;
  border: 1px solid var(--linje); border-radius: 999px; background: var(--kort); color: var(--blaek);
}
.soegefelt:focus { outline: 2px solid var(--messing-lys); outline-offset: 1px; border-color: transparent; }

/* ---------- Stamtræ ---------- */
.trae-vaerktoej { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.trae-vaerktoej select, .trae-vaerktoej button.mini {
  font: inherit; font-size: .9rem; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--linje); background: var(--kort); color: var(--blaek); cursor: pointer;
}
.trae-scene {
  position: relative; overflow: hidden; cursor: grab;
  border: 1px solid var(--linje); border-radius: var(--radius);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--linje) 90%, transparent) 1px, transparent 0) 0 0/22px 22px,
    var(--papir-dyb);
  height: 640px; touch-action: none;
}
.trae-scene.traekker { cursor: grabbing; }
.trae-lag { position: absolute; top: 0; left: 0; transform-origin: 0 0; padding: 40px; }

ul.trae, ul.trae ul { list-style: none; margin: 0; padding: 0; display: flex; }
ul.trae { align-items: flex-start; }
ul.trae li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 10px; }
/* forbindelseslinjer */
ul.trae li::before, ul.trae li::after {
  content: ""; position: absolute; top: 0; height: 22px; width: 50%;
  border-top: 2px solid var(--linje);
}
ul.trae li::before { left: 0; }
ul.trae li::after  { right: 0; border-left: 2px solid var(--linje); }
ul.trae li:only-child::before, ul.trae li:only-child::after { display: none; }
ul.trae li:first-child::before, ul.trae li:last-child::after { border: 0 none; }
ul.trae li:last-child::before { border-right: 2px solid var(--linje); border-radius: 0 6px 0 0; }
ul.trae li:first-child::after { border-radius: 6px 0 0 0; }
ul.trae ul { padding-top: 22px; position: relative; }
ul.trae ul::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 22px;
  border-left: 2px solid var(--linje);
}
ul.trae > li { padding-top: 0; }
ul.trae > li::before, ul.trae > li::after { display: none; }
.trae-node-wrap { padding-top: 22px; }
ul.trae > li > .trae-node-wrap { padding-top: 0; }

.par { display: flex; align-items: stretch; gap: 0; }
.par .vielse { align-self: center; width: 18px; border-top: 2px solid var(--messing-lys); }

.node {
  background: var(--kort); border: 1px solid var(--linje); border-radius: 8px;
  padding: 9px 13px; min-width: 132px; text-align: center; box-shadow: var(--skygge);
  cursor: pointer; text-decoration: none; color: inherit; display: block; white-space: nowrap;
}
.node:hover { border-color: var(--messing); }
.node.slaegt { border-left: 3px solid var(--messing); }
.node.indgift { border-left: 3px solid var(--groen); }
.node .navn { display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.node .aar { display: block; font-size: .82rem; color: var(--blaek-svag); margin-top: 1px; }

/* ---------- Personliste ---------- */
.person-liste { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.person-liste a {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  padding: 11px 14px; background: var(--kort); border: 1px solid var(--linje);
  border-radius: 8px; text-decoration: none; color: inherit;
}
.person-liste a:hover { border-color: var(--messing); }
.person-liste .navn { font-family: var(--serif); font-weight: 600; }
.person-liste .aar { font-size: .86rem; color: var(--blaek-svag); white-space: nowrap; }

/* ---------- Persondetalje ---------- */
.person-hoved { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 26px; }
.person-foto {
  width: 150px; height: 190px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--linje); background: var(--papir-dyb);
}
.person-foto.tom { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 2.6rem; color: var(--linje); }
.fakta { list-style: none; padding: 0; margin: 0; }
.fakta li { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--linje); font-size: 1rem; }
.fakta li:last-child { border-bottom: 0; }
.fakta .etiket { min-width: 130px; color: var(--blaek-svag); }
.relations-boks { margin-top: 30px; }
.relations-boks h3 { border-bottom: 1px solid var(--linje); padding-bottom: 6px; }
.chip-raekke { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: .93rem;
  background: var(--kort); border: 1px solid var(--linje); text-decoration: none; color: inherit;
}
.chip:hover { border-color: var(--messing); }

/* ---------- Historier ---------- */
article.historie { border-top: 1px solid var(--linje); padding: 34px 0; }
article.historie:first-of-type { border-top: 0; }
article.historie .dato { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--blaek-svag); }
article.historie h2 { margin: 6px 0 12px; }

/* ---------- Noter og bokse ---------- */
.note {
  background: color-mix(in srgb, var(--messing) 8%, var(--kort));
  border-left: 3px solid var(--messing); border-radius: 0 8px 8px 0;
  padding: 16px 20px; font-size: .95rem; margin: 24px 0;
}
.note strong { color: var(--messing); }

/* ---------- Formular (redaktion) ---------- */
.felt { margin-bottom: 14px; }
.felt label { display: block; font-size: .85rem; color: var(--blaek-svag); margin-bottom: 4px; }
.felt input, .felt select, .felt textarea {
  width: 100%; font: inherit; font-size: .95rem; padding: 9px 12px;
  border: 1px solid var(--linje); border-radius: 8px; background: var(--kort); color: var(--blaek);
}
.felt textarea { min-height: 110px; resize: vertical; }
.felt-par { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .felt-par { grid-template-columns: 1fr; } }

/* ---------- Bund ---------- */
footer.bund {
  border-top: 1px solid var(--linje); margin-top: 60px; padding: 34px 0 50px;
  color: var(--blaek-svag); font-size: .93rem; background: var(--papir-dyb);
}
footer.bund .wrap { display: flex; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; }
.bund-kontakt a { color: var(--blaek-svag); text-decoration: underline; text-underline-offset: 2px; }
.bund-kontakt a:hover { color: var(--skovgroen); }

/* Diskret indgang til redaktionen. Skal kunne findes, ikke råbe. */
footer.bund a.logind {
  color: var(--blaek-svag);
  text-decoration: none;
  border: 1px solid var(--linje);
  border-radius: 999px;
  padding: 3px 12px;
  margin-left: 4px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
footer.bund a.logind:hover,
footer.bund a.logind:focus-visible {
  background: var(--skovgroen, #2f5d3f);
  border-color: var(--skovgroen, #2f5d3f);
  color: #fff;
}

/* ============================================================
   Sortering ny/gammel — Dagbog og Historier
   ============================================================ */
.sortering {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 26px;
}
.sortering-etiket {
  font-size: .86rem; color: var(--blaek-svag); margin-right: 4px;
}
.sortering button {
  font: inherit; font-size: .9rem; cursor: pointer;
  background: transparent; color: var(--blaek-svag);
  border: 1px solid var(--linje); border-radius: 999px;
  padding: 5px 14px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sortering button:hover { border-color: var(--skovgroen-lys); color: var(--skovgroen); }
.sortering button.aktiv {
  background: var(--skovgroen); border-color: var(--skovgroen); color: #fff;
}

/* ============================================================
   Nyt i arkivet — forsiden
   En gaest skal kunne se hvad der er sket, uden at klikke.
   ============================================================ */
.nyt-hoved-raekke {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.nyt-hoved-raekke h2 { margin-bottom: 6px; }
.nyt-alle { font-size: .93rem; white-space: nowrap; }

.nyt-gitter {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
a.nyt-kort {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--linje); border-radius: 12px;
  padding: 18px 20px 20px; background: var(--papir, #fff);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
a.nyt-kort:hover {
  border-color: var(--skovgroen-lys);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(47,97,73,.10);
}
.nyt-hoved {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.nyt-dato { font-size: .84rem; color: var(--blaek-svag); }
a.nyt-kort h3 { margin: 0 0 8px; font-size: 1.06rem; line-height: 1.3; }
a.nyt-kort p  { margin: 0; color: var(--blaek-svag); font-size: .94rem; line-height: 1.55; }

@media (max-width: 560px) {
  .nyt-gitter { grid-template-columns: 1fr; }
}

/* ============================================================
   Efterlysninger — hver enkelt er en sag med et nummer
   ============================================================ */
.efterlys-hoved {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
a.efterlys-nr {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: .82rem; letter-spacing: .08em; font-weight: 600;
  color: var(--skovgroen); text-decoration: none;
  border: 1px solid var(--skovgroen); border-radius: 6px;
  padding: 2px 9px;
}
a.efterlys-nr:hover { background: var(--skovgroen); color: #fff; }
.efterlys-status {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 9px; border-radius: 999px;
}
.efterlys-status.er-aaben { background: #e8f0ea; color: #2f6149; }
.efterlys-status.er-loest { background: #ece7dc; color: #6b5a24; }
.efterlys-status.er-delvist { background: #f3ecd9; color: #8a6d1f; }

.efterlys-handling {
  margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.efterlys-handling .smal-note { font-size: .86rem; color: var(--blaek-svag); }
.efterlys-svar { margin-top: 14px; }
.efterlys-svar p { margin: 6px 0; }

article.efterlys.fremhaevet {
  outline: 2px solid var(--skovgroen-lys); outline-offset: 6px; border-radius: 4px;
}

.tom-besked { color: var(--blaek-svag); font-style: italic; padding: 30px 0; }
.skjul { display: none !important; }

/* Tydelig markering når man tabber sig rundt med tastaturet */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--skovgroen-lys);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Mellembredde: menuen faar sin egen linje ----------
   Ti punkter kan ikke staa paa samme linje som logoet paa en almindelig
   skaerm. Uden det her braekker den ragged om, og "Kilder" og "Søg"
   falder ned under logoet. Hellere to rene linjer end én rodet. */
/* Menuen faar altid sin egen linje. Ti punkter kan ikke dele plads med
   logoet inden for sidens bredde paa 1100px — maalt efter, den skal bruge
   1116. Uden det her braekker den ragged om, og "Kilder" og "Søg" falder
   ned under logoet. To rene linjer er bedre end én rodet. */
.top-inner { flex-wrap: wrap; gap: 6px 22px; padding: 12px 24px 0; }
.brand { flex: 1 1 auto; order: 1; }
header.top a.logind { margin-left: auto; order: 2; }
nav.hoved {
  order: 3;
  margin-left: 0; flex-basis: 100%; gap: 20px;
  flex-wrap: nowrap; overflow-x: auto;
  padding-bottom: 2px; scrollbar-width: none;
}
nav.hoved::-webkit-scrollbar { display: none; }
nav.hoved a { white-space: nowrap; padding: 2px 0 8px; }

/* ---------- Telefon: topbjælke ---------- */
@media (max-width: 720px) {
  header.top { position: static; }
  .top-inner { flex-direction: column; align-items: flex-start; gap: 10px;
               padding: 14px 20px 8px; position: relative; }
  header.top a.logind { position: absolute; top: 11px; right: 20px; margin-left: 0; }
  .brand { padding-right: 90px; }
  nav.hoved {
    margin-left: 0; width: 100%; gap: 20px;
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: none;
  }
  nav.hoved::-webkit-scrollbar { display: none; }
  nav.hoved a { white-space: nowrap; }
  .wrap { padding: 0 20px; }
  .noegletal { gap: 26px 32px; }
  section.blok { padding: 40px 0; }
  .trae-scene { height: 460px; }
}

/* ---------- Hjælp-banner øverst på forsiden ---------- */
.hjaelp {
  background: color-mix(in srgb, var(--skovgroen) 7%, var(--kort));
  border-bottom: 1px solid color-mix(in srgb, var(--skovgroen) 18%, transparent);
}
.hjaelp .wrap {
  display: flex; align-items: center; gap: 30px;
  padding-top: 18px; padding-bottom: 18px;
}
.hjaelp-tekst { margin: 0; font-size: 1rem; max-width: 66ch; }
.hjaelp-tekst strong { color: var(--skovgroen); }
.hjaelp-handling {
  margin-left: auto; display: flex; flex-direction: column;
  align-items: center; gap: 7px; flex-shrink: 0;
}
.hjaelp-knapper { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hjaelp-handling .knap { white-space: nowrap; }
.hjaelp-adresse { font-size: .87rem; color: var(--blaek-svag); text-decoration: none; }
.hjaelp-adresse:hover { color: var(--skovgroen); text-decoration: underline; }

@media (max-width: 780px) {
  .hjaelp .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hjaelp-handling { margin-left: 0; align-items: flex-start; gap: 10px; width: 100%; }
  .hjaelp-knapper { justify-content: flex-start; }
  .hjaelp-adresse { align-self: flex-start; }
}

/* ---------- Livsforløb på personsiden ---------- */
ol.forloeb { list-style: none; margin: 0; padding: 0; }
ol.forloeb li {
  display: flex; gap: 20px; padding: 12px 0;
  border-bottom: 1px dashed var(--linje);
}
ol.forloeb li:last-child { border-bottom: 0; }
.forloeb-aar {
  flex: 0 0 4.5rem; font-family: var(--serif); font-size: 1.05rem;
  font-weight: 600; color: var(--skovgroen); font-variant-numeric: tabular-nums;
}
.forloeb-indhold { display: flex; flex-direction: column; gap: 2px; }
.forloeb-type { font-weight: 600; }
.forloeb-flag {
  font-style: normal; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--okker);
  border: 1px solid color-mix(in srgb, var(--okker) 45%, transparent);
  border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px;
}
.forloeb-dato, .forloeb-sted { font-size: .95rem; color: var(--blaek-svag); }
.forloeb-kilde { font-size: .85rem; color: var(--blaek-svag); font-style: italic; }
ol.forloeb li.usikker .forloeb-aar { color: var(--okker); }

@media (max-width: 620px) {
  ol.forloeb li { gap: 14px; }
  .forloeb-aar { flex-basis: 3.4rem; }
}

/* ---------- Efterlysninger ---------- */
article.efterlys {
  background: var(--kort); border: 1px solid var(--linje); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--skygge); margin-bottom: 18px;
  border-left: 3px solid var(--skovgroen);
}
article.efterlys h3 { margin-top: 0; }
article.efterlys p { margin-bottom: 14px; }
article.efterlys:last-child { margin-bottom: 0; }
article.efterlys.loest { border-left-color: var(--okker); opacity: .92; }
.efterlys-svar {
  background: color-mix(in srgb, var(--okker) 9%, transparent);
  border-radius: 8px; padding: 12px 16px; font-size: .97rem;
}

/* ---------- Forskningsdagbog ---------- */
article.dagbog {
  padding: 26px 0 4px;
  border-top: 1px solid var(--linje);
}
article.dagbog:first-child { border-top: 0; padding-top: 6px; }
.dagbog-hoved { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.dagbog-dato { font-size: .85rem; color: var(--blaek-svag); }
.dagbog-art {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 999px; border: 1px solid;
}
.art-fund  { color: var(--skovgroen); border-color: color-mix(in srgb, var(--skovgroen) 40%, transparent);
             background: color-mix(in srgb, var(--skovgroen) 9%, transparent); }
.art-spor  { color: var(--okker); border-color: color-mix(in srgb, var(--okker) 45%, transparent);
             background: color-mix(in srgb, var(--okker) 10%, transparent); }
.art-blind { color: var(--blaek-svag); border-color: var(--linje); background: var(--papir-dyb); }
.art-note  { color: var(--blaek-svag); border-color: var(--linje); }
article.dagbog h3 { margin-bottom: .45em; }
article.dagbog p { max-width: 68ch; }

/* ---------- Statuskort på Forskningen ---------- */
.status-kort {
  background: var(--kort); border: 1px solid var(--linje);
  border-left: 3px solid var(--skovgroen);
  border-radius: var(--radius); padding: 28px 32px; box-shadow: var(--skygge);
}
.status-hoved {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.status-hoved h2 { margin: 0; }
.status-dato {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--blaek-svag);
}
.status-kort p { max-width: 66ch; }
.status-kort p:last-of-type { margin-bottom: 0; }
.noegletal.status-tal {
  margin-top: 26px; padding-top: 22px; gap: 34px;
  border-top: 1px solid var(--linje);
}
.noegletal.status-tal b { font-size: 1.7rem; }

@media (max-width: 620px) {
  .status-kort { padding: 22px 20px; }
}

/* ---------- Billeder i historier og dagbog ---------- */
.billeder { margin: 22px 0 6px; display: grid; gap: 16px; }
.billeder.flere { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.billeder figure { margin: 0; }
.billeder img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  border: 1px solid var(--linje); background: var(--papir-dyb);
  transition: border-color .15s ease;
}
.billeder a:hover img { border-color: var(--skovgroen); }
.billeder figcaption {
  margin-top: 8px; font-size: .88rem; color: var(--blaek-svag);
  line-height: 1.5; max-width: 60ch;
}
.billeder:not(.flere) figure { max-width: 720px; }


/* Dokumentrækker i kontrolpanelet vises på siden gennem .billeder,
   som allerede findes ovenfor. Ingen ekstra stil nødvendig her. */


/* Kildemærket under et dokumentbillede — K003 og arkivhenvisningen */
.billeder figcaption .kildemaerke{
  display:block; margin-top:5px; font-size:.78rem; letter-spacing:.02em;
  color:var(--blaek-svag); font-variant-numeric:tabular-nums;
}

/* ---------- Bidrag: doerene ind til postkassen ---------- */
.bidrag-boks {
  margin-top: 26px; padding: 22px 24px;
  border: 1px solid var(--linje); border-left: 3px solid var(--skovgroen);
  border-radius: var(--radius); background: var(--papir-dyb);
}
.bidrag-boks h3 { margin: 0 0 8px; }
.bidrag-boks p { margin: 0 0 14px; max-width: 62ch; }
.bidrag-boks .knap-raekke { margin: 0; }
.bidrag-note { font-size: .88rem; color: var(--blaek-svag); margin: 14px 0 0 !important; }

ul.efterlys-mini { margin: 0; padding-left: 1.15em; }
ul.efterlys-mini li { margin: 5px 0; }

.historie-bidrag {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--linje-svag, var(--linje));
  font-size: .92rem;
}
.historie-bidrag a { color: var(--blaek-svag); text-decoration: none; }
.historie-bidrag a:hover { color: var(--skovgroen); text-decoration: underline; }

/* Etiket, der kun findes for skærmlæsere */
.skjul-visuelt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Dokumentlisten på Forskningen — arkivet, papir for papir
   ============================================================ */
.dok-forbehold {
  color: var(--blaek-svag);
  border-left: 3px solid var(--skovgroen-lys, #b9cdc0);
  padding: 2px 0 2px 16px;
  margin: 0 0 30px;
}
.dok-liste {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
article.dok {
  border: 1px solid var(--linje, #e2ddd2);
  border-radius: 6px;
  padding: 20px 22px 22px;
  background: var(--kort);
  box-shadow: var(--skygge);
}
article.dok.fremhaevet {
  outline: 2px solid var(--skovgroen-lys); outline-offset: 6px;
}
.dok-hoved { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dok-id {
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: .78rem; letter-spacing: .08em; font-weight: 600;
  color: var(--skovgroen); border: 1px solid var(--skovgroen);
  border-radius: 6px; padding: 2px 9px;
}
.dok-aar {
  font-size: .78rem; letter-spacing: .06em; color: var(--blaek-svag);
}
article.dok h3 { margin: 0 0 10px; font-size: 1.06rem; line-height: 1.35; }
.dok-arkiv { margin: 0 0 6px; font-size: .9rem; line-height: 1.5; }
.dok-hvor  { margin: 0; font-size: .84rem; color: var(--blaek-svag); line-height: 1.5; }
figure.dok-billede { margin: 16px 0 0; }
figure.dok-billede img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linje, #e2ddd2); border-radius: 4px;
}
figure.dok-billede figcaption {
  margin-top: 8px; font-size: .84rem; line-height: 1.55; color: var(--blaek-svag);
}
.dok-folk { margin: 14px 0 0; font-size: .86rem; color: var(--blaek-svag); }
.dok-folk a { color: var(--skovgroen); }

@media (max-width: 560px) {
  .dok-liste { grid-template-columns: 1fr; }
}