/* =========================
   RESET / BASIS
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: rgb(20, 5, 66);
  font-family: "Space Grotesk", system-ui, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

/* =========================
   HEADER (STARTAFBEELDING)
========================= */
.header-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  left: 10% !important;
}

/* =========================
   CONTENT / TEKSTKADER
========================= */
.page {
  max-width: 65ch;
  margin: 0 auto;
  padding: 2rem;
}

h1,
h2,
h3 {
  line-height: 1.2;
}

p {
  margin: 0 0 1rem 0;
}

/* =========================
   2-KOLOM BLOKKEN
   (tekst + afbeelding)
========================= */
.background-layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1rem 0;
}

/* Tekst en beeld nemen elk exact de helft */
.background-text {
  flex: 0 0 50%;
  min-width: 0; /* voorkomt rare overflow bij lange woorden */
}

.background-img {
  flex: 0 0 50%;
  max-width: 50%;
  height: auto;
  display: block;
  border-radius: 6px;
  object-fit: contain; /* veiliger voor scheurtje/illustraties */
}

/* variant: verticaal centreren */
.center-vertical {
  align-items: center;
}

/* =========================
   RESPONSIVE: mobiel onder elkaar
========================= */
@media (max-width: 800px) {
  .background-layout {
    flex-direction: column;
  }

  .background-text {
    flex: 0 0 100%;
  }

  .background-img {
    flex: 0 0 100%;
    /*max-width: 100%;*/
  }
}

/* =========================
   FULLWIDTH AFBEELDING BINNEN PAGE
   (specimen potten)
========================= */
.fullwidth-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 3rem 0;
}

.fullwidth-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* =========================
   FULL BLEED HERO (scan / eten)
========================= */
.fullwidth-hero {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 3rem;
  margin-bottom: 3rem;
  top: 10vmin;
}

.fullwidth-hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.background-layout.right-img {
  flex-direction: row;
}

/* Alleen het BOBOB-blok: afbeelding iets */
.background-layout.right-img .ruzie-afbeelding {
  margin-top: -2rem;
  width: 50%;
}
.pagina-afbeeldingen {
  width: 40%;
}

/* scheurreeee afbeelding
.third-img {
  margin-top: -6rem;
}





/* =========================
   ACHTERGROND NA STARTAFBEELDING
   (Optie B: niet herhalen, volledig zichtbaar)
========================= */
/*.content {*/
/*  background-image: url("../media/AChtttttt.png");*/
/*  background-repeat: no-repeat;*/
/*  background-size: contain;*/
/*  background-position: center -200px;*/
/*  min-width: 100%;*/

/*  background-color: #ffffff; !* vult lege zones netjes op *!*/
/*}*/

/*.intro-paragraph {*/
/*  extraregelafstand: 0;*/
/*  line-height: 1.7; !* regelafstand IN de alinea *!*/
/*  margin-bottom: 400px; !* grote ruimte NA de alinea *!*/
.background-img {
  min-width: 100%;
  display: flex;
}

.pages {
  position: relative !important;
  width: 220vmin !important;
  aspect-ratio: 2065 / 13819 !important;
  min-height: 100vmin !important;
  margin: 2rem auto !important;
  padding: 0 !important;

  background: none !important;
  overflow: visible !important;

  margin-top: 1vmin !important;
  left: -5% !important;
}
.pages::before {
  content: "";
  position: absolute;

  top: 1vmin;
  left: 50%;
  transform: translateX(-50%);

  width: 225vmin;
  min-height: 900vmin !important;
  aspect-ratio: 2065 / 13819;

  background-image: url("media/ACHTER\ DE\ GROND.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;

  z-index: 0;
  pointer-events: none;
}

/* alle bladen */
.pages .p1,
.pages .p2,
.pages .p3,
.pages .p4,
.pages .p5,
.pages .p6,
.pages .p7,
.pages .p8,
.pages .p9,
.pages .p10,
.pages .p11 {
  position: absolute !important;
  z-index: 2 !important;
  padding: 0.8vmin !important;
  margin: 0 !important;
  font-size: 2vmin !important;
  line-height: 1.25 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.pages .p1 {
  top: 10vmin !important; /* 58 + 40 */
  left: 32% !important;
  width: 39% !important;
  height: 95vmin !important;
  transform: rotate(0deg);
}

.pages .p2 {
  top: 80vmin !important; /* 161 + 40 */
  left: 32% !important;
  width: 39% !important;
  height: 110vmin !important;
  transform: rotate(-0deg);
}

.pages .p3 {
  top: 165vmin !important;
  left: 32% !important;
  width: 39% !important;
  height: 110vmin !important;
  transform: rotate(0deg);
}

.pages .p4 {
  top: 245vmin !important;
  left: 32% !important;
  width: 40% !important;
  height: 60vmin !important;
  transform: rotate(0deg);
}

.pages .p5 {
  top: 435vmin !important;
  left: 32% !important;
  width: 40% !important;
  height: 98vmin !important;
  transform: rotate(0deg);
}

.pages .p6 {
  top: 508vmin !important;
  left: 32% !important;
  width: 40% !important;
  height: 100vmin !important;
  transform: rotate(0deg);
}

.pages .p7 {
  top: 560vmin !important;
  left: 32% !important;
  width: 40% !important;
  height: 84vmin !important;
  transform: rotate(0deg);
}

.pages .p8 {
  top: 610vmin !important;
  left: 32% !important;
  width: 40% !important;
  height: 130vmin !important;
  transform: rotate(0deg);
  font-size: 2vmin !important;
}

.pages .p9 {
  top: 727vmin !important;
  left: 32% !important;
  width: 40% !important;
  height: 130vmin !important;
  transform: rotate(0deg);
}

.pages .p10 {
  top: 769vmin !important;
  left: 32% !important;
  width: 40% !important;
  height: 140vmi;
}