/* Inhoudspagina's (teksten/maak_inhoud.py) in de stijl van de homepage.
   Volgorde in de head: fonts.css, stijl.css, traject.css, v5.css, inhoud.css.
   v5.css zet kop, balk, knoppen, pakketten, FAQ, slot en colofon gelijk met de homepage;
   dit bestand doet de blokken die alleen op de inhoudspagina's bestaan. */

/* ---------- paginakop: tekst links, foto rechts tot de rand ---------- */
.paginakop { background: var(--papier); padding: 0; border-bottom: 1px solid var(--lijn); }
.paginakop-binnen { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0; align-items: stretch; min-height: min(70svh, 640px); }
.paginakop-tekst { padding: clamp(40px, 5vw, 80px) clamp(32px, 4vw, 72px) clamp(48px, 5vw, 80px) var(--rand); align-self: center; }
.paginakop .kruimel { margin: 0 0 28px; font-size: .9375rem; }
.paginakop h1 { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.6rem); margin: 0 0 28px; }
.paginakop-tekst p { font-size: 1.3125rem; color: var(--zacht); max-width: 34em; }
.held-foto, .held-render { position: relative; justify-self: stretch; max-width: none; width: auto; padding: 0; background: var(--vlak, #efe5d4); transform: none; box-shadow: none; overflow: hidden; }
.held-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held-render { background: var(--wijn); }
.held-zegel { display: flex; align-items: center; justify-content: center; background: var(--wijn); }
.held-zegel img { width: min(260px, 55%); height: auto; }

/* ---------- banden ---------- */
.ib { padding: clamp(72px, 9vw, 128px) var(--rand); }
.ib-binnen { max-width: none; }
.ib h2 { margin: 0 0 28px; }
.ib-kop h2 { max-width: 18em; margin-bottom: clamp(32px, 4vw, 56px); }
.ib-faq .ib-binnen, .ib-tabel .ib-binnen, .ib-lijst .ib-binnen, .ib-vragen .ib-binnen, .ib-tekst .ib-binnen, .ib-formulier .ib-binnen {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px);
}
.ib-tekst .ib-rechts p { font-size: 1.1875rem; color: var(--zacht); }
.ib-rechts strong { color: var(--inkt); }

/* stappen: groot getal in roze, rechte kaarten */
.ib-stappen .stappen-lijst { gap: clamp(20px, 2.5vw, 32px); counter-reset: stap; }
.ib-stappen .stappen-lijst li { background: var(--blad); border: 1px solid var(--lijn); box-shadow: none; padding: 28px 28px 30px; }
.ib-stappen .stappen-lijst li::before {
  content: counter(stap); counter-increment: none; display: block; width: auto; height: auto; margin: 0 0 14px; border: 0; border-radius: 0;
  font-family: var(--display); font-size: 4rem; line-height: .8; font-weight: 500; color: var(--roos); font-variant-numeric: lining-nums; background: none;
}
.ib-stappen .stappen-lijst h3 { font-weight: 500; font-size: 1.75rem; line-height: 1.1; }
.ib-stappen .stappen-lijst p { color: var(--zacht); }

/* lijsten: dunne lijnen in plaats van kaartjes */
.ib-lijst ul { gap: 0 40px; }
.ib-lijst li { background: none; box-shadow: none; padding: 16px 0 16px 34px; border-top: 1px solid var(--lijn); }
.ib-lijst li::before { left: 0; top: 1.4em; }

/* tabellen */
.ib-tabel table { border-top: 4px double var(--goud); }

/* pakketten van de homepage: de oude tabelranden weg */
.pakketten { border: 0; max-width: none; }
.ib-pakketten .ib-binnen { max-width: none; }
.prijs-extra { max-width: none; margin-top: 24px; }

/* uitvoering van het boek, zoals "48 bladzijden" op de homepage */
.gemaakt { max-width: none; margin: clamp(40px, 5vw, 64px) 0 0; }
.gemaakt h3 { font-family: var(--display); font-weight: 500; font-size: 2rem; margin-bottom: 18px; }
.gemaakt dl { border-top: 4px double var(--goud); }
.gemaakt dt { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; margin-bottom: 8px; letter-spacing: 0; text-transform: none; color: var(--inkt); font-weight: 500; }
.gemaakt dd { color: var(--zacht); font-size: 1.0625rem; }

/* contactformulier */
.ib-formulier .contactformulier { background: var(--blad); border: 1px solid var(--lijn); box-shadow: none; }

/* bijgewerkt-regel onderaan */
.pagina > .bijgewerkt { max-width: none; padding: 16px var(--rand); }

@media (max-width: 900px) {
  .paginakop-binnen { grid-template-columns: 1fr; min-height: 0; }
  .paginakop-tekst { padding: 40px var(--rand); }
  .held-foto, .held-render { aspect-ratio: 4 / 3; }
  .held-zegel { aspect-ratio: 16 / 9; }
  .ib-faq .ib-binnen, .ib-tabel .ib-binnen, .ib-lijst .ib-binnen, .ib-vragen .ib-binnen, .ib-tekst .ib-binnen, .ib-formulier .ib-binnen { grid-template-columns: 1fr; }
}

/* juridische pagina's (teksten/maak_paginas.py): leesbare kolom met marge */
.traject.tekstpagina { max-width: 780px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) 24px clamp(64px, 8vw, 112px); }
.tekstpagina h2 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); }

/* stijl.css geeft kop en colofon een max-width; v5.css zet de marge al via --rand. Samen werd de kop te smal
   op brede schermen (menu-items over meerdere regels). Daarom hier de max-width eraf. */
.kop-binnen, .colofon-binnen, .colofon-voet { max-width: none; margin-left: 0; margin-right: 0; }
.menu-groot a { white-space: nowrap; }