/* === Drukversie — opmaakproef van een zelf samengestelde uitgave === */
/* De maten staan in millimeters, want dat is wat een drukker leest. De
   paginabladen op het scherm zijn even groot als op papier; wat u ziet is wat
   er uit de printer komt. De variabelen hieronder worden door js/drukversie.js
   gezet aan de hand van het paneel. */

.dv-body {
    margin: 0;
    background: #e9e5dd;
    font-family: var(--font-body);
    color: #222;
    --dv-breedte: 148mm;
    --dv-hoogte: 210mm;
    --dv-marge-boven: 16mm;
    --dv-marge-onder: 16mm;
    --dv-marge-binnen: 16mm;
    --dv-marge-buiten: 16mm;
    --dv-notitie-zij: 0mm;
    --dv-lijnafstand: 5mm;
    --dv-notitie-onder: 0mm;
    --dv-kolommen: 2;
    --dv-kolomkier: 6mm;
    --dv-letter: 'EB Garamond', Georgia, serif;
    --dv-grootte: 9.5pt;
    --dv-interlinie: 1.3;
    --dv-accent: #142e42;
    /* Hoogte van de bovenbalk van de site; onder 768px is hij lager. */
    --dv-balk: 72px;
}
@media (max-width: 768px) { .dv-body { --dv-balk: 56px; } }

/* De bovenbalk van de site staat boven het geheel; het paneel plakt eronder
   in plaats van tegen de bovenkant van het venster. */
.dv-layout { display: flex; align-items: flex-start; min-height: calc(100vh - var(--dv-balk)); }

/* --- het paneel --- */
.dv-paneel {
    flex: 0 0 320px;
    position: sticky;
    top: var(--dv-balk);
    max-height: calc(100vh - var(--dv-balk));
    overflow-y: auto;
    background: #fffdf9;
    border-right: 1px solid #d8d2c4;
    padding: 22px 20px 40px;
    box-sizing: border-box;
}
.dv-paneel h1 {
    font-family: var(--font-cursive, 'EB Garamond', serif);
    font-size: 30px; font-weight: 400; color: var(--navy, #142e42); margin: 0 0 6px;
}
.dv-uitleg { font-size: 13px; line-height: 1.55; color: #555; margin: 0 0 20px; }
.dv-groep { border-top: 1px solid #eae4d6; padding-top: 14px; margin-bottom: 16px; }
.dv-groep h2 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--gold, #cba449); margin: 0 0 10px; font-weight: 600;
}
.dv-groep-uitleg { font-size: 12px; color: #777; margin: -4px 0 10px; line-height: 1.45; }
.dv-veld {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 9px; font-size: 13px; color: #333;
}
.dv-veld > span { flex: 1 1 auto; }
.dv-veld select, .dv-veld input[type="range"] { flex: 0 0 auto; max-width: 62%; }
.dv-veld select {
    font: inherit; padding: 4px 7px; border: 1px solid #d6d2c8;
    border-radius: 5px; background: #fff; color: #222;
}
.dv-veld output { color: #777; font-variant-numeric: tabular-nums; }
/* Afmeting en lijntjes hebben alleen zin als er notitieruimte is. */
.dv-alleen-notities, .dv-alleen-eigenmaat { display: none; }
.dv-body[data-formaat="eigen"] .dv-alleen-eigenmaat { display: flex; }
.dv-veld input[type="number"] {
    font: inherit; width: 5.5em; padding: 4px 7px; border: 1px solid #d6d2c8;
    border-radius: 5px; background: #fff; color: #222;
}
.dv-body:not([data-notities="geen"]) .dv-alleen-notities { display: flex; }

.dv-boeken { margin-top: 6px; font-size: 13px; }
.dv-boeken summary { cursor: pointer; color: var(--navy, #142e42); }
.dv-telling { color: #999; }
.dv-boekenlijst { max-height: 260px; overflow-y: auto; margin-top: 8px; padding-right: 4px; }
.dv-boekenlijst h3 {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
    color: #999; margin: 12px 0 4px; font-weight: 600;
}
.dv-boekenlijst h3:first-child { margin-top: 0; }
.dv-boekenlijst label {
    display: flex; align-items: center; gap: 7px; padding: 2px 0;
    font-size: 12.5px; color: #333; cursor: pointer;
}

.dv-acties { border-top: 1px solid #eae4d6; padding-top: 14px; }
.dv-knop {
    font: inherit; font-size: 13px; padding: 8px 15px; border-radius: 6px;
    border: 1px solid #d6d2c8; background: #f2ede3; color: #333; cursor: pointer;
}
.dv-knop:hover { background: #e7e0d2; }
.dv-knop-hoofd { background: var(--navy, #142e42); border-color: var(--navy, #142e42); color: #fff; }
.dv-knop-hoofd:hover { background: var(--gold, #cba449); border-color: var(--gold, #cba449); color: var(--navy, #142e42); }
.dv-knop[disabled] { opacity: .55; cursor: progress; }
.dv-status { font-size: 12px; color: #666; margin: 10px 0 0; min-height: 1.2em; line-height: 1.45; }

/* --- de vellen --- */
.dv-vel { flex: 1 1 auto; padding: 26px 20px 60px; display: flex; flex-direction: column; align-items: center; }
.dv-leeg { color: #7a7365; font-size: 14px; margin-top: 60px; }
.dv-verder { text-align: center; margin: 26px 0 0; }
.dv-verder p { font-size: 13px; color: #666; margin: 0 0 10px; }

.dv-pagina {
    width: var(--dv-breedte);
    height: var(--dv-hoogte);
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.16);
    margin: 0 auto 18px;
    padding: var(--dv-marge-boven)
             calc(var(--dv-marge-buiten) + var(--dv-notitie-zij))
             calc(var(--dv-marge-onder) + var(--dv-notitie-onder))
             var(--dv-marge-binnen);
    position: relative;
    overflow: hidden;
    font-family: var(--dv-letter);
    font-size: var(--dv-grootte);
    line-height: var(--dv-interlinie);
    color: #1a1a1a;
}
/* Rechterpagina's spiegelen: de binnenmarge zit aan de rug. */
.dv-pagina.dv-links {
    padding-left: calc(var(--dv-marge-buiten) + var(--dv-notitie-zij));
    padding-right: var(--dv-marge-binnen);
}

.dv-inhoud { column-count: var(--dv-kolommen); column-gap: var(--dv-kolomkier); height: 100%; }
.dv-pagina[data-kolommen="1"] .dv-inhoud { column-count: 1; }

/* De notitieruimte: een strook naast of onder de tekst, met optionele
   lijntjes. Hij ligt in de ruimte die het tekstblok hierboven al heeft
   afgestaan, zodat er nooit tekst onder komt te liggen. */
.dv-body:not([data-notities="geen"]) .dv-pagina:not(.dv-voorwerk)::after {
    content: '';
    position: absolute;
    pointer-events: none;
}
.dv-body[data-notities="zij"] .dv-pagina:not(.dv-voorwerk)::after {
    top: var(--dv-marge-boven);
    bottom: var(--dv-marge-onder);
    right: var(--dv-marge-buiten);
    width: calc(var(--dv-notitie-zij) - 4mm);
}
.dv-body[data-notities="zij"] .dv-pagina.dv-links:not(.dv-voorwerk)::after {
    right: auto; left: var(--dv-marge-buiten);
}
.dv-body[data-notities="onder"] .dv-pagina:not(.dv-voorwerk)::after {
    left: var(--dv-marge-binnen);
    right: var(--dv-marge-buiten);
    bottom: var(--dv-marge-onder);
    height: calc(var(--dv-notitie-onder) - 4mm);
    border-top: 0.2mm solid #e4dfd2;
}
.dv-body[data-notities="onder"] .dv-pagina.dv-links:not(.dv-voorwerk)::after {
    left: var(--dv-marge-buiten); right: var(--dv-marge-binnen);
}
.dv-body:not([data-notities="geen"])[data-lijntjes="aan"] .dv-pagina:not(.dv-voorwerk)::after {
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(var(--dv-lijnafstand) - 0.2mm),
        #d9d3c6 calc(var(--dv-lijnafstand) - 0.2mm),
        #d9d3c6 var(--dv-lijnafstand));
}

/* --- kopregel en paginanummer --- */
.dv-kop, .dv-voet {
    position: absolute; left: var(--dv-marge-binnen);
    right: calc(var(--dv-marge-buiten) + var(--dv-notitie-zij));
    font-size: 7.5pt; color: #8a8375; letter-spacing: 0.04em;
    display: flex; justify-content: space-between;
}
.dv-kop { top: calc(var(--dv-marge-boven) - 6mm); border-bottom: 0.2mm solid #e4dfd2; padding-bottom: 1.5mm; }
.dv-voet { bottom: calc(var(--dv-marge-onder) - 5.5mm); justify-content: center; }
.dv-pagina.dv-links .dv-kop, .dv-pagina.dv-links .dv-voet {
    left: calc(var(--dv-marge-buiten) + var(--dv-notitie-zij));
    right: var(--dv-marge-binnen);
}
.dv-body[data-kopregel="uit"] .dv-kop, .dv-body[data-kopregel="uit"] .dv-voet { display: none; }

/* --- de tekst zelf --- */
.dv-boektitel {
    column-span: all;
    font-family: var(--font-cursive, 'EB Garamond', serif);
    font-size: 2.1em; font-weight: 400; text-align: center;
    color: var(--dv-accent); margin: 0 0 0.6em; letter-spacing: 0.02em;
}
.dv-hoofdstuk {
    font-size: 1.25em; font-weight: 600; color: var(--dv-accent);
    margin: 0.9em 0 0.35em; break-after: avoid;
}
.dv-hoofdstuk:first-child { margin-top: 0; }
.dv-inleiding {
    font-size: 0.86em; font-style: italic; color: #5b544a;
    margin: 0 0 0.6em; line-height: 1.4; break-after: avoid;
}
/* Elk vers is een eigen element; de opmaak bepaalt of ze doorlopen of onder
   elkaar staan. Doorlopend is inline, zodat een blad op versgrens kan breken. */
.dv-inhoud { text-align: justify; hyphens: auto; }
.dv-body[data-versregels="uit"] .dv-vers { display: inline; }
.dv-body[data-versregels="aan"] .dv-vers {
    display: block; margin-bottom: 0.12em; text-indent: 0; text-align: left;
}
.dv-versnr {
    font-size: 0.72em; font-weight: 600; color: var(--gold, #a08432);
    vertical-align: super; line-height: 0; margin-right: 0.15em;
}
.dv-body[data-versnummers="uit"] .dv-versnr { display: none; }
.dv-noten {
    column-span: all;
    border-top: 0.2mm solid #ddd7c8;
    margin-top: 1.2em; padding-top: 0.5em;
    font-size: 0.72em; line-height: 1.35; color: #55504a;
}
.dv-noot { margin: 0 0 0.25em; }
.dv-noot b { color: var(--gold, #a08432); font-weight: 600; }
.dv-sierletter {
    float: left; font-family: var(--font-serif, 'EB Garamond', Georgia, serif);
    font-size: 2.7em; line-height: 0.78; padding: 0.06em 0.1em 0 0; color: var(--dv-accent);
}
.dv-body[data-sierletter="uit"] .dv-sierletter { float: none; font-size: inherit; line-height: inherit; padding: 0; color: inherit; }

/* lettertypekeuze */
.dv-body[data-letter="garamond"] { --dv-letter: 'EB Garamond', Georgia, serif; }
.dv-body[data-letter="georgia"]  { --dv-letter: Georgia, 'Times New Roman', serif; }
.dv-body[data-letter="fira"]     { --dv-letter: 'Fira Sans', 'Segoe UI', sans-serif; }
.dv-body[data-letter="lexend"]   { --dv-letter: 'Lexend', 'Segoe UI', sans-serif; }


/* --- tussenkopjes --- */
.dv-tussenkop {
    font-size: 0.92em; font-weight: 600; font-style: italic;
    color: #4a4438; break-after: avoid;
    /* een hele witregel erboven, zodat het kopje losstaat van het vorige blok */
    margin: calc(var(--dv-interlinie) * 1em) 0 0.3em;
}
.dv-body[data-versregels="uit"] .dv-tussenkop { display: block; }

/* --- voorwerk: titelblad, voorwoord, inhoudsopgave --- */
/* Het voorwerk telt niet mee in de bladnummering van de tekst; het krijgt
   Romeinse cijfers. Zou het meetellen, dan zou de inhoudsopgave zichzelf
   verschuiven zodra hij een blad langer werd. */
.dv-voorwerk { --dv-notitie-zij: 0mm; --dv-notitie-onder: 0mm; }
.dv-voorwerk .dv-inhoud { column-count: 1; }
.dv-pagina.dv-io-breed[data-kolommen] .dv-inhoud { column-count: 2; }
.dv-voorwerk .dv-kop { display: none; }
.dv-cover .dv-voet { display: none; }
.dv-cover-blok {
    height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
}
/* De naam beslaat op het ontwerp ruim zestig procent van de bladbreedte; de
   corpsgrootte komt uit pasTitelAan() en staat in --dv-titelmaat. Alles
   eronder houdt zijn verhouding tot die maat. */
.dv-cover-naam { width: 80%; color: var(--dv-accent); --dv-titelmaat: 2.5em; }
.dv-cover-blok h1 {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: var(--dv-titelmaat);
    font-weight: 400; color: inherit;
    text-transform: uppercase; letter-spacing: 0.02em;
    line-height: 1.0; margin: 0.16em 0;
    /* Een woord dat niet past mag niet uit het blok steken; pasTitelAan meet
       daarop en schaalt terug. */
    white-space: normal; overflow-wrap: normal;
}
.dv-cover-onder {
    font-size: calc(var(--dv-titelmaat) * 0.27); color: inherit; margin: 0.5em 0 0;
    text-transform: uppercase; letter-spacing: 0.16em;
    /* De spatiering zet ook achter de laatste letter een gat; die haalt het
       woord uit het midden. Een halve spatie terug herstelt dat. */
    text-indent: 0.16em; line-height: 1.2;
}
.dv-cover-slot {
    font-size: calc(var(--dv-titelmaat) * 0.155); color: inherit; opacity: 0.85;
    margin: 1.1em 0 0; font-style: italic; letter-spacing: 0.02em; line-height: 1.3;
}
/* Dunne regel met een ruitje in het midden, tussen naam en aanduiding. */
.dv-cover-regel {
    display: block; height: calc(var(--dv-titelmaat) * 0.34); position: relative;
}
/* De lichtwaas die de letters over een schilderij draagt komt uit text-shadow;
   een lijn heeft daar niets aan; zonder dit verdwijnt de streep in een donker
   stuk schilderij. */
.dv-cover-beeld .dv-cover-regel {
    filter: drop-shadow(0 0 0.7mm rgba(255, 252, 244, 0.95))
            drop-shadow(0 0 1.8mm rgba(255, 252, 244, 0.7));
}
.dv-cover-beeld[data-omslag="06-sober-nachtblauw"] .dv-cover-regel { filter: none; }
.dv-cover-regel::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 50%;
    border-top: 0.22mm solid currentColor; opacity: 0.55;
}
.dv-cover-regel::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 1.1mm; height: 1.1mm; margin: -0.55mm 0 0 -0.55mm;
    background: currentColor; transform: rotate(45deg);
}
.dv-cover-voet {
    position: absolute; bottom: var(--dv-marge-onder); left: 0; right: 0;
    font-size: 0.7em; color: #9a9284; letter-spacing: 0.22em; text-indent: 0.22em;
    text-transform: uppercase; margin: 0; text-align: center;
}
.dv-voorwerk-kop {
    font-family: var(--font-cursive, 'EB Garamond', serif);
    font-size: 1.9em; font-weight: 400; color: var(--dv-accent);
    margin: 0 0 0.8em; text-align: center;
}
.dv-voorwoord-alinea { margin: 0 0 0.7em; text-align: justify; hyphens: auto; }
/* De teksten over de kracht van Gods Woord: ingesprongen, cursief, met de
   vindplaats eronder rechts. */
.dv-woordkracht-groep { margin-top: 1.2em; }
.dv-woordkracht {
    margin: 0.9em 0 0; padding: 0 6% 0 6%;
    font-style: italic; color: #4a4438; text-align: justify; hyphens: auto;
}
.dv-woordkracht cite {
    display: block; margin-top: 0.25em; text-align: right;
    font-style: normal; font-size: 0.86em; letter-spacing: 0.06em;
    color: var(--dv-accent);
}
.dv-io-regel {
    display: flex; align-items: baseline; gap: 0.3em; margin: 0 0 0.28em;
    break-inside: avoid;
}
.dv-io-punten {
    flex: 1 1 auto; border-bottom: 0.15mm dotted #bdb6a6; transform: translateY(-0.22em);
}
.dv-io-nr { font-variant-numeric: tabular-nums; color: #5b544a; }
/* Bij veel boeken twee kolommen; de kop loopt daar overheen. */
.dv-io-breed .dv-inhoud { column-count: 2; column-gap: 7mm; }
.dv-io-breed .dv-voorwerk-kop { column-span: all; }

/* meerregelige velden in het paneel */
.dv-veld-blok { display: block; }
.dv-veld-blok > span { display: block; margin-bottom: 4px; }
.dv-veld-blok input[type="text"], .dv-veld-blok textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
    border: 1px solid #d6d2c8; border-radius: 5px; padding: 6px 8px;
    background: #fff; color: #222; max-width: none;
}
.dv-veld-blok textarea { resize: vertical; line-height: 1.45; }
.dv-alleen-cover, .dv-alleen-voorwoord { display: none; }
.dv-body[data-cover="aan"] .dv-alleen-cover { display: block; }
.dv-body[data-voorwoord="aan"] .dv-alleen-voorwoord { display: block; }



/* Het omslagontwerp staat als beeld achter het titelblad; de titel zelf blijft
   echte letters, zodat de drukker hem als vector kan overnemen. */
.dv-cover-beeld { background-size: cover; background-position: center; }
.dv-cover-beeld .dv-cover-blok { justify-content: flex-start; padding-top: 6%; }
/* Op het ontwerp staat de naam recht op het schilderij, niet in een kader. Wat
   hem daar draagt is een zachte lichtwaas rondom, zo breed dat de lucht erachter
   iets terugwijkt en zo licht dat je hem niet als rand ziet. */
.dv-cover-beeld .dv-cover-naam {
    color: #16233f;
    text-shadow:
        0 0 0.9mm rgba(255, 252, 244, 0.95),
        0 0 2.2mm rgba(255, 252, 244, 0.8),
        0 0 5mm rgba(255, 252, 244, 0.55);
}
.dv-cover-beeld .dv-cover-voet { color: rgba(252, 249, 241, 0.72); }

/* Het nachtblauwe linnen is al sober; daar hoort goud op donker, zonder veld,
   en hoger dan de gouden takjes die in het ontwerp zelf staan. */
.dv-cover-beeld[data-omslag="06-sober-nachtblauw"] .dv-cover-blok { padding-top: 15%; }
.dv-cover-beeld[data-omslag="06-sober-nachtblauw"] .dv-cover-naam {
    color: #d6b478; text-shadow: none;
}
.dv-cover-beeld[data-omslag="06-sober-nachtblauw"] .dv-cover-voet { color: #7e8ba3; }

/* --- de plaat bij een hoofdstuk --- */
/* Zij vult de onderste helft van het blad; het tekstblok krijgt daarom de
   bovenste helft, zodat de opmaak er vanzelf omheen loopt. */
/* Op een blad met een plaat staat geen notitieruimte: de plaat is er al, en
   twee dingen die om de onderste helft vragen passen niet naast elkaar. */
.dv-pagina.dv-met-plaat { --dv-notitie-zij: 0mm; --dv-notitie-onder: 0mm; }
.dv-pagina.dv-met-plaat::after { display: none; }
.dv-pagina.dv-met-plaat .dv-inhoud { height: 48%; }
/* De plaat loopt breder dan het tekstblok, tot vlak bij de snijrand. */
.dv-plaat {
    position: absolute; margin: 0;
    left: 4mm;
    right: 4mm;
    bottom: calc(var(--dv-marge-onder) + var(--dv-notitie-onder));
    /* De bovenkant wordt uit dezelfde bladspiegel gerekend als het tekstblok
       hierboven, anders schuiven de twee over elkaar heen zodra er ook
       notitieruimte onderaan staat: percentages van een absoluut geplaatst
       element gaan over het hele blad, die van .dv-inhoud over de bladspiegel. */
    top: calc(var(--dv-marge-boven) + 2mm +
        (100% - var(--dv-marge-boven) - var(--dv-marge-onder) - var(--dv-notitie-onder)) * 0.5);
    display: flex; align-items: flex-end; justify-content: center;
}
.dv-plaat img { max-width: 100%; max-height: 100%; object-fit: contain; }

.dv-knop-bezig { background: #8d3b2f; border-color: #8d3b2f; color: #fff; }

/* --- afdrukken --- */
@media print { #topnav { display: none !important; } }

@media print {
    .dv-paneel, .dv-verder, .dv-leeg { display: none !important; }
    .dv-body { background: #fff; }
    .dv-layout { display: block; }
    .dv-vel { padding: 0; display: block; }
    .dv-pagina {
        box-shadow: none;
        margin: 0;
        break-after: page;
        page-break-after: always;
    }
    .dv-pagina:last-child { break-after: auto; page-break-after: auto; }
}

@media (max-width: 900px) {
    .dv-layout { display: block; }
    .dv-paneel { position: static; flex: none; width: auto; max-height: none; border-right: 0; border-bottom: 1px solid #d8d2c4; }
    .dv-vel { padding: 18px 8px 40px; }
    .dv-pagina { transform-origin: top center; }
}