/* opbouw.css — secties, kolommen en blokken (opbouw.php) + de bewerkknoppen (opbouw.js).
   Kleuren komen uit de site: --papier, --inkt, --grijs, --lijn, --accent (schil.css / site.php). */
:root { --ob-breed: 64rem; --ob-diep: color-mix(in srgb, var(--inkt) 7%, var(--papier)); }

/* Secties lopen over de volle breedte (de kleur), de inhoud blijft op leesbreedte */
.ob-pagina { margin: -1.5rem 0 -4rem; }
body:has(.ob-pagina) { overflow-x: hidden; }
.ob-sectie { position: relative; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 3rem 1rem; }
.ob-sectie.ruimte-krap { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.ob-sectie.ruimte-ruim { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.ob-sectie::after { content: ""; display: block; clear: both; }
.ob-sectie.stijl-diep   { background: var(--ob-diep); }
.ob-sectie.stijl-donker { background: var(--inkt); color: var(--papier); }
.ob-sectie.stijl-donker a { color: color-mix(in srgb, var(--accent) 60%, var(--papier)); }
.ob-sectie.stijl-donker .grijs, .ob-sectie.stijl-donker small, .ob-sectie.stijl-donker figure.plaat, .ob-sectie.stijl-donker .ob-nr { color: color-mix(in srgb, var(--papier) 65%, transparent); }
.ob-sectie.stijl-donker hr { border-color: color-mix(in srgb, var(--papier) 25%, transparent); }
.ob-sectie.stijl-accent { background: var(--accent); color: var(--papier); }
.ob-sectie.stijl-accent a, .ob-sectie.stijl-accent .grijs, .ob-sectie.stijl-accent .ob-nr { color: color-mix(in srgb, var(--papier) 85%, transparent); }
.ob-sectie.stijl-beeld { background: var(--inkt) var(--ob-beeld) center / cover no-repeat; color: #fff; }
.ob-sectie.stijl-beeld::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6)); }
.ob-sectie.stijl-beeld > .ob-kolommen { position: relative; }
.ob-sectie.stijl-beeld a { color: #fff; }

/* hero: hoog, tekst onderin, beeld erachter */
.ob-sectie.ob-hero { min-height: 70vh; display: flex; align-items: flex-end; background: var(--inkt) var(--ob-beeld) center / cover no-repeat; color: #fff; }
.ob-sectie.ob-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.65) 100%); }
.ob-sectie.ob-hero > .ob-kolommen { position: relative; width: 100%; }
.ob-sectie.ob-hero h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); margin: 0 0 .2em; }
.ob-sectie.ob-hero .label { color: color-mix(in srgb, var(--accent) 50%, #fff); }
.ob-sectie.ob-hero a { color: #fff; }

/* kolommen */
.ob-kolommen { max-width: var(--breedte); margin: 0 auto; display: grid; gap: 2rem 3rem; align-items: start; }
.ind-2 .ob-kolommen, .ind-3 .ob-kolommen, .ind-1-2 .ob-kolommen, .ind-2-1 .ob-kolommen { max-width: var(--ob-breed); }
.ind-2 .ob-kolommen   { grid-template-columns: 1fr 1fr; }
.ind-3 .ob-kolommen   { grid-template-columns: 1fr 1fr 1fr; }
.ind-1-2 .ob-kolommen { grid-template-columns: 1fr 2fr; }
.ind-2-1 .ob-kolommen { grid-template-columns: 2fr 1fr; }
.ob-kolom { min-width: 0; }
.ob-kolom::after { content: ""; display: block; clear: both; }
.ob-kolom.uitlijn-midden { text-align: center; }
.ob-kolom.uitlijn-midden figure.plaat { float: none; margin-left: auto; margin-right: auto; }
.ob-kolom.maat-klein { font-size: .9em; }
.ob-kolom.maat-groot { font-size: 1.15em; }
.ob-kolom > .ob-blok:first-child h1, .ob-kolom > .ob-blok:first-child h2, .ob-kolom > .ob-blok:first-child h3 { margin-top: 0; }
@media (max-width: 760px) {
  .ind-2 .ob-kolommen, .ind-3 .ob-kolommen, .ind-1-2 .ob-kolommen, .ind-2-1 .ob-kolommen { grid-template-columns: 1fr; }
  .ob-sectie { padding-top: 2rem; padding-bottom: 2rem; }
  .ob-sectie.ob-hero { min-height: 60vh; }
}

/* blokken */
.ob-blok { position: relative; }
.ob-blok h2 { margin-top: 1.6em; }
.ob-blok p.label { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .8em; }
.ob-blok p.lead { font-size: 1.25em; line-height: 1.4; }
.ob-blok blockquote { margin: 1.5em 0; padding: 0; font-size: 1.5em; line-height: 1.25; font-style: italic; }
.ob-blok blockquote em { color: var(--accent); font-style: normal; }
.ob-ruimte-krap { height: 1rem; } .ob-ruimte-normaal { height: 2.5rem; } .ob-ruimte-ruim { height: 5rem; }
.ob-knopje { display: inline-block; padding: .55em 1.2em; border: 1px solid currentColor; border-radius: 999px; font-size: .9em; text-decoration: none; margin: .3em 0 1em; background: var(--inkt); color: var(--papier) !important; border-color: var(--inkt); }
.ob-knopje.licht { background: transparent; color: inherit !important; border-color: currentColor; }
.stijl-donker .ob-knopje, .stijl-beeld .ob-knopje, .ob-hero .ob-knopje, .stijl-accent .ob-knopje { background: var(--papier); color: var(--inkt) !important; border-color: var(--papier); }
.ob-knopje:hover { text-decoration: none; opacity: .85; }
.ob-beeld { margin: .3em 0 1em; }
.ob-beeld img { width: 100%; height: auto; display: block; }
.ob-beeld a { display: block; }
.ob-beeld figcaption { font-size: .82rem; color: var(--grijs); margin-top: .4em; }
figure.plaat.rij { width: calc(var(--plaat) * .6); }
.ob-lijst .ob-rij { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 .6rem; padding: .9em 0; border-top: 1px solid var(--lijn); }
.ob-lijst .ob-rij:last-child { border-bottom: 1px solid var(--lijn); }
.ob-nr { color: var(--accent); font-size: .72rem; font-weight: 700; padding-top: .35em; font-variant-numeric: tabular-nums; }
.ob-rij-in strong { display: block; font-weight: 500; font-size: 1.05em; margin-bottom: .15em; }
.ob-rij-in p { margin: 0; color: var(--grijs); font-size: .92em; }
.stijl-donker .ob-rij-in p, .stijl-accent .ob-rij-in p { color: inherit; opacity: .8; }
.ob-rij-in::after { content: ""; display: block; clear: both; }
.ob-kaartjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); margin: 1em 0; }
.ob-kaartjes .ob-rij { background: var(--papier); padding: 1.1em 1em 1.3em; min-height: 9rem; }
.stijl-donker .ob-kaartjes .ob-rij { background: var(--inkt); }
.stijl-diep .ob-kaartjes .ob-rij { background: var(--ob-diep); }
.stijl-donker .ob-kaartjes, .stijl-donker .ob-lijst .ob-rij { border-color: color-mix(in srgb, var(--papier) 25%, transparent); background: color-mix(in srgb, var(--papier) 25%, transparent); }
.ob-kaartjes .ob-rij-in strong { font-size: 1.1em; margin: .3em 0 .4em; }
.ob-kaartjes figure.plaat.rij { float: none; width: 100%; margin: 0 0 .6em; }
.ob-feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.2em 1.5em; margin: 1.5em 0 1em; padding-top: 1.2em; border-top: 1px solid var(--lijn); }
.ob-feit strong { display: block; font-weight: 400; font-size: 1.15em; }
.ob-feit span { font-size: .82em; color: var(--grijs); }
.stijl-donker .ob-feit span { color: inherit; opacity: .7; }
.ob-pillen { display: flex; flex-wrap: wrap; gap: .5em; margin: .5em 0 1em; }
.ob-pillen span { padding: .35em .8em; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 999px; font-size: .74rem; font-weight: 600; }
ul.ob-links { list-style: none; padding: 0; margin: 1em 0; }
ul.ob-links li { padding: .55em 0; border-top: 1px solid var(--lijn); font-size: .95em; }
ul.ob-links li:last-child { border-bottom: 1px solid var(--lijn); }
.ob-leeg { display: inline-block; padding: .4em .8em; border: 1px dashed var(--grijs); color: var(--grijs); font-size: .8rem; border-radius: .3em; }
body:not(.bewerkt) .ob-blok.leeg { display: none; }
@media (max-width: 640px) { .ob-feiten { grid-template-columns: 1fr; } }

/* ── bewerkstand (opbouw.js) ─────────────────────────────────────────── */
body.bewerkt .ob-sectie { outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -1px; }
body.bewerkt .ob-kolom { outline: 1px dotted color-mix(in srgb, var(--grijs) 45%, transparent); outline-offset: 4px; min-height: 3rem; }
body.bewerkt .ob-blok { outline: 1px dotted transparent; }
body.bewerkt .ob-blok:hover { outline-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ob-balk { display: none; position: absolute; z-index: 20; gap: 3px; align-items: center; flex-wrap: wrap;
  background: #1d1c1a; color: #fbfaf7; border-radius: .5rem; padding: .3rem .4rem; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .04em; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
body.bewerkt .ob-balk { display: flex; }
.ob-balk button, .ob-balk label { font: inherit; color: inherit; background: rgba(255,255,255,.1); border: 0; border-radius: .3rem; padding: .35rem .5rem; cursor: pointer; }
.ob-balk button:hover { background: rgba(255,255,255,.22); }
.ob-balk .sep { width: 1px; height: 1.2rem; background: rgba(255,255,255,.2); margin: 0 .2rem; }
.ob-balk .stil { opacity: .55; padding: 0 .3rem; text-transform: uppercase; font-size: 10px; }
.ob-balk-sectie { top: .4rem; right: .5rem; }
.ob-balk-kolom { position: static; display: none; margin: 0 0 .6rem; width: max-content; max-width: 100%; }
body.bewerkt .ob-balk-kolom { display: flex; }
.ob-balk-blok { top: -.9rem; right: 0; padding: .2rem .3rem; opacity: 0; transition: opacity .15s; }
body.bewerkt .ob-blok:hover > .ob-balk-blok, body.bewerkt .ob-blok:focus-within > .ob-balk-blok { opacity: 1; }
.ob-balk-blok button { padding: .25rem .4rem; }
.ob-tussen { display: none; position: relative; height: 0; }
body.bewerkt .ob-tussen { display: block; }
.ob-tussen button { position: absolute; left: 50%; top: -.9rem; transform: translateX(-50%); z-index: 15; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--papier); color: var(--accent); cursor: pointer; opacity: .55; }
.ob-tussen button:hover { opacity: 1; }
/* menu's (indeling, stijl, bloktype, beeldkiezer) */
.ob-menu { position: fixed; z-index: 90; background: #1d1c1a; color: #ece6da; border-radius: .7rem; padding: .6rem; box-shadow: 0 16px 48px rgba(0,0,0,.45); font: 13px/1.4 system-ui, sans-serif; max-width: min(92vw, 30rem); }
.ob-menu h5 { margin: .2rem .3rem .5rem; font: 700 10px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #cdb46b; }
.ob-menu .rij { display: flex; flex-wrap: wrap; gap: .35rem; }
.ob-menu button { font: inherit; color: inherit; background: rgba(255,255,255,.08); border: 1px solid transparent; border-radius: .4rem; padding: .4rem .6rem; cursor: pointer; display: flex; align-items: center; gap: .4rem; }
.ob-menu button:hover { background: rgba(255,255,255,.18); }
.ob-menu button.actief { border-color: #cdb46b; }
.ob-menu svg { width: 42px; height: 26px; display: block; }
.ob-menu svg rect { fill: rgba(255,255,255,.55); }
.ob-menu svg rect.donker { fill: rgba(255,255,255,.18); }
.ob-menu .kleurstaal { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }
.ob-menu input[type=text], .ob-menu input[type=url] { font: inherit; background: #2b2825; color: #ece6da; border: 1px solid rgba(255,255,255,.2); border-radius: .4rem; padding: .35rem .5rem; width: 100%; }
.ob-menu .onder { display: flex; gap: .4rem; margin-top: .6rem; align-items: center; }
.ob-menu .onder .bp-klaar { background: #ece6da; color: #1d1c1a; }
.ob-menu .raster { display: flex; flex-wrap: wrap; gap: 5px; max-height: 40vh; overflow: auto; padding: .2rem 0; }
.ob-menu .raster button { padding: 0; width: 48px; height: 36px; border-radius: 4px; overflow: hidden; background: #2b2825; box-sizing: content-box; }
.ob-menu .raster img { width: 48px; height: 36px; object-fit: cover; display: block; }
.ob-menu label.upload { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; background: rgba(255,255,255,.08); border-radius: .4rem; padding: .4rem .6rem; }
.ob-menu label.upload input { display: none; }
.ob-menu .naam { color: #a39b8e; font-size: 11px; margin-top: .3rem; min-height: 1.2em; }
.ob-sluier { position: fixed; inset: 0; z-index: 85; }
.ob-melding { position: fixed; left: 50%; bottom: 4.2rem; transform: translateX(-50%); z-index: 95; background: #1d1c1a; color: #ece6da; padding: .5rem 1rem; border-radius: 999px; font: 13px system-ui, sans-serif; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ob-melding.zichtbaar { opacity: 1; }
.ob-melding.fout { background: #8a2d2d; color: #fff; }

/* genummerde koppen (01, 02 …) doorlopend over de hele pagina */
.ob-pagina { counter-reset: kop; }
.ob-kop.genummerd h2::before { counter-increment: kop; content: counter(kop, decimal-leading-zero); color: var(--grijs); margin-right: .5em; font-variant-numeric: tabular-nums; font-weight: 300; }

/* beeldkiezer: midden in beeld, images/ als kleine thumbnails met naam */
.ob-menu.ob-kiezer { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(94vw, 42rem); max-width: none; max-height: 88vh; overflow: auto; }
.ob-menu .raster.duimen { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; padding: .2rem 0 .4rem; }
.ob-menu .raster.duimen button.duim { width: auto; height: auto; padding: 3px; flex-direction: column; align-items: stretch; gap: 3px; background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: 5px; }
.ob-menu .raster.duimen button.duim img { width: 100%; height: 62px; object-fit: cover; border-radius: 3px; background: #2b2825; }
.ob-menu .raster.duimen button.duim span { font-size: 10px; line-height: 1.2; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.ob-menu .raster.duimen button.duim.actief { border-color: #cdb46b; background: rgba(205,180,107,.18); }
.ob-menu .raster.duimen button.duim:hover { border-color: rgba(205,180,107,.5); }

/* bewerkstand: een plaat ligt boven de tekst die ernaast doorloopt, zodat je hem kunt aanwijzen en aanklikken */
body.bewerkt figure.ob-plaat, body.bewerkt figure.ob-beeld { z-index: 6; }
body.bewerkt figure.ob-plaat img, body.bewerkt figure.ob-beeld img { cursor: pointer; }
body.bewerkt figure.ob-plaat:hover img, body.bewerkt figure.ob-beeld:hover img { outline: 2px solid #cdb46b; outline-offset: 2px; }
body.bewerkt figure.ob-plaat > a, body.bewerkt figure.ob-beeld > a { position: relative; display: block; }
body.bewerkt figure.ob-plaat > a::after, body.bewerkt figure.ob-beeld > a::after { content: "🖼 wisselen"; position: absolute; left: 4px; bottom: 4px; font: 600 10px/1 system-ui, sans-serif; background: rgba(29,28,26,.85); color: #ece6da; padding: 3px 5px; border-radius: 3px; opacity: 0; transition: opacity .15s; pointer-events: none; }
body.bewerkt figure.ob-plaat:hover > a::after, body.bewerkt figure.ob-beeld:hover > a::after { opacity: 1; }
.ob-menu label.upload, .ob-menu .onder button { font: 13px/1.4 system-ui, sans-serif; }

/* ── aanvullingen 30 sept 2026: kaartjes op accent, zin met link, periodes, aanmelding, rij-extra's ── */
.stijl-accent .ob-kaartjes { background: color-mix(in srgb, var(--papier) 30%, transparent); border-color: color-mix(in srgb, var(--papier) 30%, transparent); }
.stijl-accent .ob-kaartjes .ob-rij { background: var(--accent); }
.ob-boven { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .5em; }
.stijl-donker .ob-boven, .stijl-accent .ob-boven { color: color-mix(in srgb, var(--papier) 75%, transparent); }
a.ob-rij-link { color: inherit; } a.ob-rij-link strong { color: var(--accent); }
.ob-zin p a { text-decoration: underline; text-underline-offset: .15em; }
.ob-periodes { list-style: none; padding: 0; margin: .4em 0 1em; }
.ob-periodes li { padding: .55em 0; border-bottom: 1px solid var(--lijn); }
.ob-prijs { font-size: 1.6em; margin: .4em 0 .2em; }
.ob-aanmelding { margin: 1.5em 0; }
.ob-aanmelding h3 { margin: 0 0 .3em; }
.ob-velden { display: grid; grid-template-columns: 1fr 1fr; gap: .8em 1em; margin: 1em 0; }
.ob-velden label { display: flex; flex-direction: column; gap: .3em; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
.ob-velden label.breed { grid-column: 1 / -1; }
.ob-velden input, .ob-velden textarea { font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--inkt); background: var(--papier); border: 1px solid var(--lijn); border-radius: 6px; padding: .6em .7em; }
.ob-aanmelding .ob-aanmelding-stand { min-height: 1.2em; font-size: .9em; }
.ob-aanmelding .ob-aanmelding-stand.fout { color: #a3372a; } .ob-aanmelding .ob-aanmelding-stand.ok { color: var(--accent); }
.ob-aanmelding.verzonden .ob-velden, .ob-aanmelding.verzonden button[type=submit] { opacity: .45; pointer-events: none; }
@media (max-width: 640px) { .ob-velden { grid-template-columns: 1fr; } }

/* accent met een eigen, lichte kleur: donkere letters */
.ob-sectie.stijl-accent.ob-licht { color: var(--inkt); }
.ob-sectie.stijl-accent.ob-licht a, .ob-sectie.stijl-accent.ob-licht .grijs, .ob-sectie.stijl-accent.ob-licht .ob-nr, .ob-sectie.stijl-accent.ob-licht .ob-boven { color: color-mix(in srgb, var(--inkt) 80%, transparent); }
.ob-sectie.stijl-accent.ob-licht .ob-knopje { background: var(--inkt); color: var(--papier) !important; border-color: var(--inkt); }
.ob-sectie.stijl-accent.ob-licht .ob-kaartjes { background: color-mix(in srgb, var(--inkt) 20%, transparent); border-color: color-mix(in srgb, var(--inkt) 20%, transparent); }
/* kleurkeuze in het paneel */
.ob-kleuren { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 4px; margin: .2rem 0 .5rem; }
.ob-kleuren button { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.ob-kleuren .kleurstaal, .ob-eigen-kleur .kleurstaal { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); flex: none; }
.ob-eigen-kleur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ob-eigen-kleur input[type=color] { width: 2.2rem; height: 1.6rem; padding: 0; border: 1px solid rgba(255,255,255,.4); background: none; cursor: pointer; }
.ob-eigen-kleur > span { font: 12px/1.2 system-ui, sans-serif; opacity: .75; }

/* ── geen overlap (8 okt 2026) ─────────────────────────────────────────
   1. de pagina trekt wat erna komt niet meer onder de laatste sectie
      (zo lag bv. "← alle tentoonstellingen" onder de laatste sectie);
   2. een plaat blijft binnen zijn eigen kolom en sectie; de runaround
      naast tekst, lijsten en koppen blijft zoals hij is. */
.ob-pagina { margin-bottom: 0; }
.ob-kolom { display: flow-root; }