/* Huisstijl variant B "Museaal": wit, zwarte tekst, één deftige kleur (Pruisisch blauw).
   Eén kolom in het midden, geen lijnen over de breedte. fonts.css wordt apart in de kop geladen. */
:root {
  --wit: #ffffff;
  --inkt: #15181c;        /* koppen */
  --tekst: #262a30;       /* lopende tekst */
  --grijs: #5b6169;       /* bijschriften, kleine regels (6,2 : 1 op wit) */
  --rand: #d9dde2;        /* alleen de rand van het passe-partout */
  --blauw: #14405a;       /* Pruisisch blauw: de enige kleur (11 : 1 op wit) */
  --blauw-diep: #0d2f44;
  --op-blauw: #ffffff;
  --op-blauw-zacht: #bccbd8; /* labels en kleine tekst in de voet (6,6 : 1 op blauw) */
  --kolom: 58rem;         /* de middenkolom: kop, beeld, koppen, voet */
  --maat: 40rem;          /* regellengte van lopende tekst */
  --goot: clamp(1.25rem, 5vw, 3rem);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Meeschalen op grote schermen: alle maten staan in rem, dus als de basisletter groeit, groeien tekst,
   kolom en beeld samen mee. Tot 1280 px breed 16 px, daarboven heel geleidelijk
   tot hooguit 18 px (vanaf ca. 2500 px); meer wordt te groot (Berend, 4K-scherm). */
html { font-size: clamp(100%, 0.875rem + 0.16vw, 112.5%); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--wit);
}
::selection { background: var(--blauw); color: var(--op-blauw); }

/* Toetsenbord: zichtbare focus, en een link "naar de inhoud" die pas verschijnt bij Tab */
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 4px; }
footer :focus-visible { outline-color: var(--op-blauw); }
.naar-inhoud {
  position: absolute; left: 1rem; top: -5rem; z-index: 10;
  padding: .6rem 1.1rem; background: var(--blauw); color: var(--op-blauw);
  font-weight: 600; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
}
.naar-inhoud:focus { top: 1rem; }
main:focus { outline: none; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; color: var(--inkt); text-wrap: balance; }
strong { font-weight: 600; }
em, cite { font-style: italic; font-weight: 400; }
p { text-wrap: pretty; }

a { color: var(--blauw); text-decoration: none; }
a:hover { color: var(--blauw-diep); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }

/* Kapitalen met spatiëring: labels, menu, knoppen */
.label, .menu a, .knop, .gebieden, .maker {
  font-family: var(--serif); font-weight: 600; text-transform: uppercase;
}
.label { display: block; font-size: .84rem; letter-spacing: .26em; color: var(--blauw); }
/* Cijfers: in de lopende tekst oude stijl (ca. 1670), in labels en de voet gewone hoogte */
.label, .voet { font-variant-numeric: lining-nums; }

/* Nummering van de diensten: Romeinse cijfers, zoals in een catalogus of museumzaal */
.nummer {
  display: block; font-size: 1.4rem; font-weight: 500; line-height: 1;
  letter-spacing: .03em; color: var(--blauw);
}

/* ---------- Kop: naam en menu gecentreerd ---------- */
header.kop {
  display: flex; flex-direction: column; align-items: center; gap: 1.3rem;
  padding: 3rem var(--goot) 0; text-align: center;
}
.logo {
  font-family: var(--serif); font-size: 2.25rem; font-weight: 500; line-height: 1;
  letter-spacing: .3em; padding-left: .3em; /* spatiëring na de laatste letter compenseren */
  text-transform: uppercase; color: var(--inkt); white-space: nowrap;
}
.logo:hover { color: var(--inkt); text-decoration: none; }
.punt { color: var(--blauw); margin-left: -.22em; } /* punt dichter op de laatste letter */
/* Hoofdmenu en servicemenu op één regel, gescheiden door een middenpunt */
.menu { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.1rem; }
.menu nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 2.1rem; }
.menu nav.rechts::before { content: "·" / ""; margin-right: -1rem; font-size: 1.1rem; font-weight: 600; line-height: 1; color: var(--grijs); transform: translateY(-.12em); }
.menu a { font-size: .86rem; letter-spacing: .18em; color: var(--inkt); padding-block: .3rem; border-bottom: 1px solid transparent; }
.menu a:hover { color: var(--blauw); text-decoration: none; }
.menu a.actief { color: var(--blauw); border-bottom-color: currentColor; }
/* Taalkeuze NL · EN, iets los van het menu; huidige taal blauw met streepje, de andere grijs */
.talen { display: inline-flex; align-items: center; gap: .55rem; margin-left: .9rem; }
.talen .taal { font-size: .86rem; letter-spacing: .18em; padding-block: .3rem; border-bottom: 1px solid transparent; }
.menu .talen a.taal { color: var(--grijs); }
.menu .talen a.taal:hover { color: var(--blauw); }
.talen .taal.actief { color: var(--blauw); border-bottom-color: currentColor; }
.talen .punt-tussen { color: var(--grijs); font-size: 1.1rem; font-weight: 600; line-height: 1; transform: translateY(-.12em); }

/* ---------- Inhoud: alles in één kolom in het midden ---------- */
main { display: block; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(5rem, 10vw, 8rem); }
.plaat, .intro, .diensten, .paginakop, .tekst, .contact {
  margin-inline: auto; padding-inline: var(--goot);
}
.plaat, .intro, .paginakop, .contact { max-width: calc(var(--kolom) + 2 * var(--goot)); }
.diensten, .tekst { max-width: calc(var(--maat) + 2 * var(--goot)); }

/* Ornament: een kort streepje als adempauze tussen delen (nooit over de breedte) */
.diensten::before, .paginakop::after {
  content: ""; display: block; width: 2.5rem; height: 1px; margin-inline: auto; background: var(--blauw);
}

/* Het beeld: als een schilderij met een ruim wit passe-partout (onderaan iets breder,
   zoals een ingelijste prent), en een museumlabel eronder */
.plaat { text-align: center; }
/* Kop, schilderij en museumlabel passen samen in het eerste scherm (niet kleiner dan 30rem) */
.plaat { max-width: min(calc(var(--kolom) + 2 * var(--goot)), max(30rem, calc((100vh - 21rem) * 0.98))); }
.passe-partout {
  border: 1px solid var(--rand); background: var(--wit);
  padding: clamp(1.25rem, 9%, 4.5rem) clamp(1.25rem, 9%, 4.5rem) clamp(1.6rem, 11.5%, 5.5rem);
}
.passe-partout img { display: block; width: 100%; height: auto; }
.museumlabel { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-top: 1.4rem; line-height: 1.4; }
.museumlabel .maker { font-size: .82rem; letter-spacing: .2em; color: var(--inkt); }
.museumlabel .werk { font-size: 1.1rem; color: var(--tekst); }
.museumlabel .collectie { font-size: 1rem; color: var(--grijs); }

/* Opening van de homepage */
.intro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.opening + .plaat { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
.aanbod { margin-top: clamp(3rem, 6vw, 4.5rem); }
.intro h1 { margin-top: 1.4rem; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; max-width: 48rem; }
/* De hoofdkop van de homepage is (voorlopig) alleen het kleine label; geen grote slogan */
.intro h1.label, .paginakop h1.label { margin-top: 0; font-size: .84rem; font-weight: 600; line-height: 1.6; letter-spacing: .26em; color: var(--blauw); max-width: none; }
.intro .gebieden { margin-top: 1.5rem; font-size: .84rem; letter-spacing: .22em; color: var(--grijs); }
.intro p:not(.gebieden) { max-width: var(--maat); font-size: 1.38rem; line-height: 1.55; }

.knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2.4rem; }
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .2rem 1.9rem;
  font-size: .84rem; letter-spacing: .18em;
  background: var(--blauw); color: var(--op-blauw); border: 1px solid var(--blauw);
}
.knop:hover { background: var(--blauw-diep); border-color: var(--blauw-diep); color: var(--op-blauw); text-decoration: none; }
.knop.rustig { background: transparent; color: var(--blauw); }
.knop.rustig:hover { background: var(--blauw); color: var(--op-blauw); }

/* Diensten op de homepage: onder elkaar, elk een rustig blok */
.diensten { margin-top: clamp(4.5rem, 9vw, 7rem); text-align: center; display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 4.25rem); }
.diensten::before { margin-bottom: clamp(0rem, 2vw, 1rem); }
.dienst h2 { margin-top: .7rem; font-size: 2.1rem; }
.dienst p { margin-top: .8rem; }

/* ---------- Tekstpagina's ---------- */
.paginakop { text-align: center; padding-top: clamp(.5rem, 3vw, 2rem); }
.paginakop h1 { margin-top: 1.2rem; font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.08; }
.paginakop::after { margin-top: clamp(2.5rem, 5vw, 3.25rem); }

.tekst { margin-top: clamp(2.5rem, 5vw, 3.25rem); }
/* Korte tekst (Over): gecentreerd zoals de aanhef op Contact */
.tekst.kort { text-align: center; }
.tekst.kort p { max-width: var(--maat); margin-inline: auto; }
.tekst p + p, .tekst p + ul, .tekst ul + p { margin-top: 1rem; }
.tekst h2 { font-size: 1.85rem; font-weight: 500; margin-bottom: .6rem; }
.tekst p + h2, .tekst ul + h2 { margin-top: 2.6rem; }
.tekst h3 { font-size: 1.4rem; font-weight: 500; margin: 1.5rem 0 .4rem; }
.tekst ul { margin-left: 1.2rem; }
.tekst li + li { margin-top: .35rem; }
.tekst a:not(.knop) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--blauw) 45%, transparent); }
.tekst .klein { font-size: 1rem; color: var(--grijs); }
.tekst .klein + h2 { margin-top: 2.25rem; }

/* Dienstenpagina: elk blok een titel in het midden, tekst als in een boek */
.dienst-blok { text-align: center; }
.dienst-blok .nummer, .dienst-blok h2 { text-align: center; }
.dienst-blok h2 { margin-top: .7rem; margin-bottom: 1rem; font-size: 2.1rem; font-weight: 400; }
.dienst-blok + .dienst-blok { margin-top: clamp(3.5rem, 7vw, 5rem); }
.tekst .vervolg { text-align: center; margin-top: 2.75rem; }

/* Contact */
.contact { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.25rem); }
.contact .aanhef { max-width: var(--maat); margin-inline: auto; }
.contactblok { display: flex; flex-direction: column; align-items: center; gap: 2.25rem; margin-top: clamp(3rem, 6vw, 4rem); }
.contactblok h2 { font-size: .84rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--blauw); margin-bottom: .6rem; }
.contactblok p { font-size: 1.15rem; }

/* 404 */
.fout .knoppen { margin-top: 2.5rem; }

/* ---------- Voet: Pruisisch blauw, inhoud in dezelfde middenkolom ---------- */
/* Figuurtjes uit verkochte werken op de blauwe voet: links, rechts, of één groepje in het midden
   (het groepje heeft een stukje papier om zich heen dat naar beneden toe wegloopt, dus iets groter) */
.figuren { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; line-height: 0;
  padding-inline: var(--goot); margin-top: calc(-1 * clamp(2rem, 5vw, 4rem)); }
.figuren img { height: clamp(4rem, 9vw, 7.5rem); width: auto; }
.figuren img.rechts { margin-left: auto; }
.figuren img.midden { margin-inline: auto; height: clamp(6.5rem, 14vw, 10.5rem); }
footer { background: var(--blauw); color: var(--op-blauw); }
footer a { color: var(--op-blauw); }
footer a:hover { color: var(--op-blauw); }
.voet { max-width: calc(var(--kolom) + 2 * var(--goot)); margin-inline: auto; padding: clamp(3.25rem, 6vw, 4.5rem) var(--goot) 1.75rem; text-align: center; }
.voet .merk { font-size: 1.5rem; font-weight: 500; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; }
.voet .merk .punt { color: var(--op-blauw-zacht); }
.voetgrid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2.5rem; font-size: 1.08rem; line-height: 1.45; }
.voetgrid > div { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.voetgrid > div > * { text-wrap: balance; }
.voetgrid .label { color: var(--op-blauw-zacht); font-size: .78rem; margin-bottom: .35rem; }
.voetgrid .kvk { font-size: .98rem; color: var(--op-blauw-zacht); white-space: nowrap; }
.voetonder { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; margin-top: clamp(2.75rem, 5vw, 3.5rem); font-family: var(--sans); font-weight: 400; font-size: .82rem; letter-spacing: .04em; color: var(--op-blauw-zacht); }
.voetonder a { color: var(--op-blauw-zacht); }
.voetlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
@media (min-width: 48rem) {
  .voetgrid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* ---------- Smal scherm ---------- */
@media (max-width: 40rem) {
  body { font-size: 1.15rem; }
  header.kop { padding-top: 2rem; gap: .95rem; }
  .logo { font-size: 1.65rem; letter-spacing: .26em; padding-left: .26em; white-space: normal; line-height: 1.3; display: block; }
  .voet .merk { font-size: 1.3rem; letter-spacing: .24em; padding-left: .24em; line-height: 1.4; }
  .menu, .menu nav { gap: .2rem 1.4rem; }
  .menu nav.rechts::before { display: none; }
  .menu a { font-size: .74rem; letter-spacing: .16em; }
  .talen { margin-left: 0; }
  .talen .taal { font-size: .74rem; letter-spacing: .16em; }
  .label { font-size: .78rem; letter-spacing: .16em; }
  .intro h1.label { font-size: .78rem; letter-spacing: .16em; }
  .intro .gebieden { font-size: .78rem; letter-spacing: .14em; }
  .intro h1 { font-size: 1.95rem; }
  .intro p:not(.gebieden) { font-size: 1.25rem; }
  .dienst h2, .dienst-blok h2 { font-size: 1.8rem; }
  .knoppen { align-self: stretch; }
  .knop { flex: 1 1 100%; }
}

/* Afdrukken: alleen de inhoud, zwart op wit, met het webadres onder links naar buiten */
@media print {
  .figuren { display: none; }
  @page { margin: 2cm; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .menu, .naar-inhoud, .plaat, .knoppen, .vervolg { display: none; }
  header.kop { padding: 0 0 1cm; align-items: flex-start; }
  main { padding: 0; }
  .plaat, .intro, .diensten, .paginakop, .tekst, .contact { max-width: none; padding-inline: 0; margin-top: .6cm; text-align: left; align-items: flex-start; }
  .dienst-blok .nummer, .dienst-blok h2 { text-align: left; }
  .diensten::before, .paginakop::after { display: none; }
  h1, h2, h3, .tekst, .label, .nummer { color: #000; }
  .tekst a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  h2, h3 { break-after: avoid; }
  .dienst, .dienst-blok { break-inside: avoid; }
  footer { background: none; color: #000; margin-top: 1cm; }
  footer a, .voetgrid .label, .voetgrid .kvk, .voetonder, .voetonder a, .voet .merk .punt { color: #000; }
  .voet { padding: .5cm 0 0; text-align: left; max-width: none; }
  .voetgrid > div { align-items: flex-start; }
  .voetlinks { display: none; }
}