@font-face {
  font-family: "Orbit";
  src: url(../fonts/Orbit-Regular.ttf);
}

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

body {
  font-family: "Orbit", sans-serif;
}

a {
  color: red;
  text-decoration: none;
}

a:hover {
  background-color: red;
  color: white;
}

h1 {
  text-align: center;
  margin-bottom: 3rem;
}

article {
  padding: 1em;
  max-width: 750px;
  margin-inline: auto;
  text-align: justify;
  line-height: 1.6;
  margin-top: 0; /* geen extra witruimte voor de alinea's */
}
article > header h1 {
  margin-top: 250px; /* alleen de titel krijgt ruimte van boven */
}

/* img {
  max-width: 100%;
  height: auto;
  display: block;
} */

/* Layout */
main {
  display: flex;
  align-items: stretch;
}

section + section {
  margin-top: 1rem;
}

.inline-illustration {
  display: block; /* maakt centreren mogelijk */
  margin: 1.5rem auto; /* auto links + rechts = midden */
  width: 180px; /* of max-width */
  height: auto;
}

.hover-trigger {
  display: inline-block;
  cursor: pointer; /* verandert de cursor bij hover */
}

.hover-trigger {
  display: inline-block; /* nodig voor achtergrond */
  color: red; /* standaard rood */
  background-color: transparent; /* geen achtergrond standaard */
  transition: color 0.3s, background-color 0.3s; /* vloeiende overgang */
  padding: 0 0.2em; /* klein beetje ruimte voor de “flut” */
}

.hover-trigger:hover {
  color: white; /* tekst wordt wit */
  background-color: red; /* rode highlight erachter */
}

.trispastos-block {
  position: relative;
}

.image-swap {
  width: 300px; /* pas aan naar wens */
  margin: 1.5rem auto; /* centreren onder de alinea */
  text-align: center; /* extra zekerheid */
}

.swap-image {
  width: 100%;
  height: auto;
  display: block; /* standaard afbeelding zichtbaar */
}

/* verberg de andere afbeeldingen standaard */
.swap-image.second,
.swap-image.third,
.swap-image.fourth {
  display: none;
}

.hover-trigger {
  display: inline-block;
  color: red;
  background-color: transparent;
  padding: 0 0.2em;
  transition: color 0.3s, background-color 0.3s;
  cursor: pointer;
}

.hover-trigger:hover {
  color: white;
  background-color: red;
}

.trispastos-block p {
  margin-top: 2rem; /* of hoeveel ruimte je wilt */
}

p + p {
  margin-top: 1.5rem; /* extra ruimte boven de tweede alinea */
}

.hero-kraan {
  position: relative;
}

.kraan-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* volledige schermbreedte */
  height: auto;
  z-index: 0;
  pointer-events: none; /* belangrijk! */
}

.hero-kraan article {
  position: relative;
  z-index: 1; /* tekst komt erboven */
}

.section-illustration {
  width: 220px; /* grootte van de afbeelding */
  float: right; /* zet hem rechts */
  margin: 0 0 1rem 1.5rem; /* ruimte tussen tekst en beeld */
}

#types .types-columns {
  display: grid;
  grid-template-columns: 1fr 2fr; /* links breder dan rechts */
  gap: 2rem;
  align-items: start;
}

#types {
  margin-top: 4rem;
}

.types-layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* hoofdtekst + smallere kolom */
  gap: 3rem;
  align-items: start;
}

.types-side {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.85;
}

@media (max-width: 800px) {
  .types-layout {
    grid-template-columns: 1fr;
  }

  .types-side {
    border-left: none;
    padding-left: 0;
  }
}

.types-side {
  max-height: 35vh;
  overflow-y: auto;
  padding-right: 1rem;
}

.type-content {
  display: none;
}

@keyframes move-vertical {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  } /* gaat omlaag */
  100% {
    transform: translateY(0);
  } /* terug naar boven */
}

@keyframes move-horizontal {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  } /* heen en weer blijft horizontaal */
  100% {
    transform: translateX(0);
  }
}

.hero-kraan:has(.hover-vertical:hover) .kraan-blok {
  animation: move-vertical 1s infinite alternate;
}

.hero-kraan:has(.hover-horizontal:hover) .kraan-blok {
  animation: move-horizontal 1s infinite alternate;
}

.hover-vertical,
.hover-horizontal {
  color: red; /* standaard rood */
  cursor: pointer; /* geeft aan dat het klikbaar/hoverbaar is */
  transition: all 0.3s ease; /* vloeiende overgang bij hover */
}

.hover-vertical:hover,
.hover-horizontal:hover {
  color: white; /* tekst wordt wit bij hover */
  background-color: red; /* rode highlight */
}

/* Flex container voor tekstblok + GIF */
/* Flex container voor tekstblok + GIF */
.etymology-flex {
  display: flex;
  position: relative; /* referentie voor absolute positionering GIF */
  max-width: 750px; /* breedte van tekstkolom */
  margin: 0 auto; /* centreren */
  gap: 2rem; /* optionele ruimte tussen tekst en GIF */
}

/* Tekstblok */
.etymology-text {
  width: 100%;
  position: relative; /* referentie voor absolute GIF */
}

/* Inline-afbeelding in de tekst */
.inline-img {
  display: block;
  width: 800px; /* grootte inline-afbeelding */
  margin-top: 4rem;
  margin-bottom: 0;
  height: auto;
}

/* GIF rechts naast tekstkolom */
.side-img {
  position: absolute; /* los van de tekstflow */
  top: 10.5rem; /* pas aan zodat hij naast inline-afbeelding staat */
  left: 100%; /* start direct rechts van de tekstkolom */
  margin-left: 5rem; /* afstand van tekstblok */
  width: 250px; /* zelfde grootte als inline-afbeelding */
  height: auto;
}

.full-left {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;

  text-align: left;
  padding-left: 3rem;
  padding-bottom: 0.5rem;

  margin-bottom: 1rem;
}

.full-left::after {
  content: "";
  position: absolute;
  left: 3rem; /* start gelijk met titeltekst */
  right: 3rem; /* loopt door tot rechter schermrand */
  bottom: 0;

  height: 1px;
  background-color: rgba(255, 0, 0, 0.6);
}

.hero-image {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background-image: url("media/GroteKraan werf.png");
  background-size: cover; /* vult scherm, geen vervorming */
  background-position: center bottom; /* focus onderkant */
  background-repeat: no-repeat;
  transform: translateY(70vh);

  z-index: 0;
}

/* Zorg dat de sectie een referentiepunt heeft */
#efficiency-increase-of-cranes {
  position: relative; /* dit wordt referentie voor de absolute afbeelding */
}

/* De afbeelding los van de flow */
#efficiency-increase-of-cranes .efficiency-img {
  position: absolute; /* los van de tekst en rest van de pagina */
  top: 6.5rem; /* hoogte vanaf de bovenkant van de sectie */
  right: -150px; /* verschuif helemaal rechts van de tekst/sectie */
  width: 180px; /* gewenste breedte */
  height: auto;
  z-index: 10;
}

.two-columns {
  column-count: 2; /* aantal kolommen */
  column-gap: 2rem; /* ruimte tussen kolommen */
  padding: 0;
}

.two-columns li {
  margin-bottom: 0.5rem; /* ruimte tussen items */
}

.underlined-title {
  text-decoration: underline; /* onderlijnen van de tekst */
  margin-bottom: 0em; /* ruimte tussen titel en lijst */
}

#mechanical-principles {
  position: relative; /* referentiepunt voor absolute afbeelding */
}

.mechanical-img {
  position: absolute; /* los van tekst en rest van de pagina */
  top: 0rem; /* hoogte vanaf de bovenkant van de sectie */
  right: -375px; /* afstand vanaf de rechterkant van de sectie */
  width: 500px; /* gewenste breedte */
  height: auto; /* verhoudingen behouden */
  z-index: 0; /* achter de tekst zetten */
  pointer-events: none; /* voorkomt dat de afbeelding iets kan blokkeren */
}

.mechanical-img.second {
  position: absolute;
  right: -375px;
  width: 500px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

#ancient-near-east {
  position: relative;
}

/* positie */
#ancient-near-east .side-image {
  position: absolute;
  top: -0.8rem;
  right: -370px;
  width: 350px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* standaard */
#ancient-near-east .gif {
  opacity: 0;
}

/* DE TRIGGER */
#ancient-near-east:has(.hover-trigger:hover) .gif {
  opacity: 1;
}

#ancient-near-east:has(.hover-trigger:hover) .still {
  opacity: 0;
}

.history-block {
  position: relative;
}

.treadwheel.side-image {
  position: absolute;
  top: -3rem; /* nu t.o.v. h3 Middle Ages */
  right: -340px;
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.treadwheel.gif {
  opacity: 0;
}

/* hover */
.history-block:has(.treadwheel-trigger:hover) .treadwheel.gif {
  opacity: 1;
}

.history-block:has(.treadwheel-trigger:hover) .treadwheel.still {
  opacity: 0;
}

.flywheel.side-image {
  position: absolute;
  top: 9rem; /* 🔽 lager dan treadwheel */
  right: -355px;
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.flywheel.gif {
  opacity: 0;
}

.history-block:has(.flywheel-trigger:hover) .flywheel.gif {
  opacity: 1;
}

.history-block:has(.flywheel-trigger:hover) .flywheel.still {
  opacity: 0;
}

/* windlass */
.windlass.side-image {
  position: absolute;
  top: 24rem; /* ⬇️ onder flywheel */
  right: -350px;
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* waterwheel */
.waterwheel.side-image {
  position: absolute;
  top: 38rem; /* ⬇️ onder windlass */
  right: -350px;
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.windlass.gif,
.waterwheel.gif {
  opacity: 0;
}
/* windlass */
.history-block:has(.windlass-trigger:hover) .windlass.gif {
  opacity: 1;
}

.history-block:has(.windlass-trigger:hover) .windlass.still {
  opacity: 0;
}

/* waterwheel */
.history-block:has(.waterwheel-trigger:hover) .waterwheel.gif {
  opacity: 1;
}

.history-block:has(.waterwheel-trigger:hover) .waterwheel.still {
  opacity: 0;
}

.history-block.ancient-greece {
  position: relative;
}

.side-image.ancient-greece-stone {
  position: absolute;
  top: 20rem;
  right: -280px;
  width: 160px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Maak de sectie een referentiepunt voor absolute positioning */
.history-block.industrial-revolution {
  position: relative;
}

/* Positioneer de side-image naast de sectie */
.side-image.hydraulic {
  position: absolute;
  top: 21rem; /* vanaf de bovenkant van de sectie */
  right: -355px; /* naast de tekstkolom */
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Standaard: gif uit, still zichtbaar */
.side-image.hydraulic.gif {
  opacity: 0;
}

/* Hover op het woord 'hydraulic crane' */
.history-block:has(.hydraulic-trigger:hover) .hydraulic.gif {
  opacity: 1;
}

.history-block:has(.hydraulic-trigger:hover) .hydraulic.still {
  opacity: 0;
}

/* Sectie als referentiepunt */
.history-block.industrial-revolution {
  position: relative;
}

/* Positioneer de side-image naast de tekst */
.side-image.hydraulic-crane {
  position: absolute;
  top: 9rem; /* pas aan voor verticale uitlijning */
  right: -270px; /* naast de tekstkolom */
  width: 190px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Standaard: gif uit, still zichtbaar */
.side-image.hydraulic-crane.gif {
  opacity: 0;
}

/* Hover op het woord 'hydraulic crane' */
.history-block:has(.hydraulic-crane-trigger:hover) .hydraulic-crane.gif {
  opacity: 1;
}

.history-block:has(.hydraulic-crane-trigger:hover) .hydraulic-crane.still {
  opacity: 0;
}

/* sectie als referentiepunt */
.history-block.early-modern-age {
  position: relative;
}

/* side-image naast de sectie */
.side-image.drum {
  position: absolute;
  top: 3.5rem; /* pas aan om uit te lijnen met de alinea */
  right: -350px; /* naast de tekstkolom */
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* standaard: gif uit, still zichtbaar */
.side-image.drum.gif {
  opacity: 0;
}

/* Hover op het woord 'trommel' */
.history-block:has(.drum-trigger:hover) .drum.gif {
  opacity: 1;
}

.history-block:has(.drum-trigger:hover) .drum.still {
  opacity: 0;
}

/* sectie als referentiepunt */
.structure-block {
  position: relative;
}

/* side-image naast de tekst */
.side-image.shaft {
  position: absolute;
  top: 15rem; /* afstellen zoals bij drum */
  right: -350px; /* zelfde offset-logica */
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* standaard: gif uit, still zichtbaar */
.side-image.shaft.gif {
  opacity: 0;
}

/* Hover op "central shaft" */
.structure-block:has(.shaft-trigger:hover) .shaft.gif {
  opacity: 1;
}

.structure-block:has(.shaft-trigger:hover) .shaft.still {
  opacity: 0;
}

#roman-empire {
  position: relative; /* referentie voor absolute images */
}

/* side-images / swap-images */
.image-swap {
  position: absolute; /* los van tekstflow */
  top: 14.5rem; /* pas aan zodat het uitlijnt met eerste paragraaf */
  right: -330px; /* naast de sectie */
  width: 250px; /* breedte van alle afbeeldingen */
  display: flex;
  flex-direction: column; /* optioneel: stapel de afbeeldingen */
  gap: 1rem; /* ruimte tussen de verschillende images */
}

/* hover logica blijft zoals voorheen */
.swap-image.second,
.swap-image.third,
.swap-image.fourth {
  display: none;
}

#trispastos-word:hover ~ .image-swap .second {
  display: block;
}

#pentaspastos-word:hover ~ .image-swap .third {
  display: block;
}

#polyspastos-word:hover ~ .image-swap .fourth {
  display: block;
}

#trispastos-word:hover ~ .image-swap .first,
#pentaspastos-word:hover ~ .image-swap .first,
#polyspastos-word:hover ~ .image-swap .first {
  display: none;
}

.has-side-images {
  position: relative;
}

/* algemene side image */
.side-image {
  position: absolute;
  top: 56.5rem; /* hoogte t.o.v. sectietitel */
  width: 450px;
  pointer-events: none; /* verstoort geen tekstselectie */
}

/* LINKS */
.side-image.left {
  left: -317px; /* duwt hem buiten de tekstkolom */
}

/* RECHTS (voor je bestaande images) */
.side-image.right {
  right: -320px;
}

/* sectie is het anker */
#stability {
  position: relative;
}

/* stack container */
.side-image-stack {
  position: absolute;
  top: 89.5rem;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  pointer-events: none;
}

/* links */
.side-image-stack.left {
  left: -295px;
}

/* afbeeldingen zelf */
.side-image-stack img {
  width: 450px;
  height: auto;
}

.hero-kraan {
  position: relative;
}

/* bestaande kraan images */
.kraan-bg {
  position: absolute;
  left: 0;
  width: 100vw;
  pointer-events: none;
}

/* DE NIEUWE STACK */
.kraan-stack {
  position: absolute;
  top: 0.2rem; /* ⬅️ START ONDER DE EERSTE KRAAN */
  left: 0;

  display: flex;
  flex-direction: column;
  align-items: center; /* of left/right als je wil */
}

.kraan-stack img {
  width: 100vw;
  height: auto;
  display: block;
}

/* 1. Zorg dat de pagina zelf geen extra ruimte creëert */
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* voorkomt horizontaal scrollen */
}

/* 2. Afbeelding onderaan artikel */
.fullscreen-img {
  display: block; /* voorkomt inline whitespace */
  max-width: 100%; /* past in de container/article */
  width: 100%; /* vult container horizontaal */
  height: auto; /* behoudt verhouding */
  margin: -22vh 0 0 0; /* 5% van de viewport hoogte omhoog */

  box-sizing: border-box; /* voorkomt extra breedte door padding/borders */
}

/* sectie als referentiepunt */
.similar-machines-block {
  position: relative;
}

/* side-image links naast de tekst */
.side-image.similar-left {
  position: absolute;
  top: 16rem; /* verticaal uitlijnen */
  left: -80px; /* buiten de tekstkolom, links */
  width: 170px;
  pointer-events: none;
  transform: scaleX(-1);
}

#similar-machines .underlined-title {
  text-align: center;
}

#similar-machines > div {
  display: flex;
  justify-content: center;
}

#similar-machines .two-columns {
  width: fit-content;
}

#mechanics-and-operation {
  position: relative;
}

.side-image.vertical-lift {
  position: absolute;
  top: 11rem; /* pas dit aan tot hij naast de juiste alinea staat */
  right: -350px; /* buiten de tekstkolom, rechts */
  width: 300px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.side-image.vertical-lift.gif {
  opacity: 0;
}

#mechanics-and-operation:has(.vertical-lift-trigger:hover) .vertical-lift.gif {
  opacity: 1;
}

#mechanics-and-operation:has(.vertical-lift-trigger:hover)
  .vertical-lift.still {
  opacity: 0;
}

/* sectie als referentiepunt */
#ancient-greece {
  position: relative;
}

/* positionering afbeelding */
.side-image.ancient-greece-stone {
  position: absolute;
  top: 20rem; /* pas aan indien nodig */
  right: -280px;
  width: 160px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* standaard: gif UIT */
.side-image.ancient-greece-stone.gif {
  opacity: 0;
}

/* hover trigger */
#ancient-greece:has(.ancient-greece-trigger:hover) .ancient-greece-stone.gif {
  opacity: 1;
}

#ancient-greece:has(.ancient-greece-trigger:hover) .ancient-greece-stone.still {
  opacity: 0;
}

.dotted-red {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.credits,
.credits-note {
  text-align: center;
}

/* Grid voor de twee hoofdkolommen */
.types-columns {
  display: grid;
  grid-template-columns: 1fr 2fr; /* linker kolom smaller, rechter kolom breder */
  gap: 2rem;
  align-items: start;
}

/* Rechter kolom: content boven, afbeelding onder */
.types-right-column {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* ruimte tussen content en afbeelding */
}

/* Afbeelding altijd passend en responsive */
.types-image-container img {
  width: 100%;
  max-width: 400px; /* pas aan naar wens */
  height: auto;
  display: block;
  margin-top: 1rem;
}

.types-right-column {
  position: relative; /* nodig voor absolute afbeelding binnen */
}

.types-content {
  max-height: 300px; /* gewenste hoogte */
  overflow-y: auto; /* scrollen als content te groot is */
  padding-right: 1rem;
}

.types-image-container {
  position: absolute; /* altijd onder de content */
  top: 300px; /* exact onder max-height van content */
  left: 0;
  width: 100%; /* past zich aan kolombreedte aan */
}

.types-image-container img {
  max-width: 500px;
  height: auto;
  display: block;
  margin-top: 1rem;
  margin-left: -12px;
}

/* Bovenste content kolom */
.types-content {
  max-height: 300px; /* pas aan naar wens */
  overflow-y: auto; /* scroll verschijnt alleen als nodig */
  padding-right: 1rem; /* ruimte voor scrollbar, voorkomt dat tekst eronder zit */
  /* geen border, geen achtergrondkleur */
}

/* Afbeelding onder de content */
.types-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.type-content {
  display: none; /* verberg ALLE type-content standaard */
}

@media (max-width: 800px) {
  /* Alleen de grote kraan zichtbaar */
  .kraan-bg {
    position: relative; /* in flow */
    width: 100%;
    height: auto;
    display: block;
    top: 0;
  }

  /* Verberg ALLE andere kraan/stack afbeeldingen */
  .kraan-stack,
  .kraan-blok,
  .mechanical-img {
    display: none !important;
  }

  /* Artikel bovenop de kraan plaatsen */
  article {
    position: relative;
    z-index: 10; /* tekst boven de kraan */
    margin-top: -40vh; /* schuif omhoog over lege ruimte onder kraan */
    padding: 1rem;
    max-width: 100%;
  }

  article > header h1 {
    margin-top: 1rem;
    text-align: center;
  }

  /* Body geen horizontale scroll */
  html,
  body {
    overflow-x: hidden;
  }

  /* Bouwwerf-finaal gif onderaan artikel verkleinen */
  .fullscreen-img {
    width: 100%; /* kleiner dan schermbreedte */
    max-width: 600px; /* limiet voor mobiel */
    height: auto;
    display: block;
    margin: 2rem auto 0 auto; /* gecentreerd onder artikel */
  }
}

@media (max-width: 800px) {
  /* Flex container stapelen en centreren */
  .etymology-flex {
    flex-direction: column; /* tekst boven GIF */
    align-items: center; /* horizontaal centreren */
    gap: 1rem;
  }

  /* Bird image onder de tekst */
  .etymology-img {
    position: static !important; /* in flow, niet meer absoluut */
    width: 70%; /* past mooi op mobiel */
    max-width: 200px; /* limiet */
    margin: 1rem auto 2rem auto; /* centreren onder tekst */
    height: auto;
  }

  /* inline GIF in de tekst ook centeren */
  .etymology-text .inline-img {
    display: block;
    width: 80%;
    max-width: 300px;
    margin: 1rem auto 2rem auto;
  }
}

@media (max-width: 800px) {
  /* Side images centreren onder de tekst */
  #history .side-image {
    position: static !important; /* geen absolute positioning */
    display: block;
    width: 70%; /* standaard grootte voor mobiel */
    max-width: 300px;
    margin: 1rem auto;
    height: auto;
  }

  /* Ancient Greece steenblok iets kleiner */
  #history .ancient-greece-stone {
    width: 50%; /* kleiner dan de andere afbeeldingen */
    max-width: 205px; /* limiet */
  }

  /* GIFs altijd zichtbaar */
  #history .side-image.gif {
    opacity: 1 !important;
  }

  /* Stilstaande afbeeldingen verbergen */
  #history .side-image.still {
    display: none !important;
  }

  /* Secties stapelen */
  #history section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}

@media (max-width: 800px) {
  /* Roman Empire: image-swap mobiel onder de tekst */
  #roman-empire .image-swap {
    position: static !important; /* in flow, onder de tekst */
    display: flex;
    flex-direction: column;
    align-items: center; /* centreren */
    gap: 1rem;
    width: 70%;
    max-width: 300px;
    margin: 1rem auto;
  }

  /* Eerste afbeelding standaard zichtbaar */
  #roman-empire .swap-image.first {
    display: block !important;
    width: 100%;
    height: auto;
  }

  /* De rest standaard verbergen */
  #roman-empire .swap-image.second,
  #roman-empire .swap-image.third,
  #roman-empire .swap-image.fourth {
    display: none !important;
    width: 100%;
    height: auto;
  }

  /* Hover / tap triggers op mobiel blijven werken */
  #trispastos-word:hover ~ .image-swap .second,
  #pentaspastos-word:hover ~ .image-swap .third,
  #polyspastos-word:hover ~ .image-swap .fourth {
    display: block !important;
  }

  #trispastos-word:hover ~ .image-swap .first,
  #pentaspastos-word:hover ~ .image-swap .first,
  #polyspastos-word:hover ~ .image-swap .first {
    display: none !important;
  }
  /* hover op desktop */
  #trispastos-word:hover ~ .image-swap .second,
  #pentaspastos-word:hover ~ .image-swap .third,
  #polyspastos-word:hover ~ .image-swap .fourth {
    display: block !important;
  }

  #trispastos-word:hover ~ .image-swap .first,
  #pentaspastos-word:hover ~ .image-swap .first,
  #polyspastos-word:hover ~ .image-swap .first {
    display: none !important;
  }

  /* active op mobiel */
  #trispastos-word:active ~ .image-swap .second,
  #pentaspastos-word:active ~ .image-swap .third,
  #polyspastos-word:active ~ .image-swap .fourth {
    display: block !important;
  }

  #trispastos-word:active ~ .image-swap .first,
  #pentaspastos-word:active ~ .image-swap .first,
  #polyspastos-word:active ~ .image-swap .first {
    display: none !important;
  }
}

/* Alleen voor mobiel: stapel GIFs onder de tekst */
@media (max-width: 800px) {
  /* Efficiency sectie */
  #efficiency-increase-of-cranes {
    position: relative; /* blijft referentiepunt */
  }

  #efficiency-increase-of-cranes .efficiency-img {
    position: static !important; /* verwijder absolute positioning */
    width: 70%;
    max-width: 250px;
    display: block;
    margin: 1rem auto; /* midden */
  }

  /* Similar Machines sectie */
  #similar-machines .side-image.similar-left {
    position: static !important;
    width: 70%;
    max-width: 250px;
    display: block;
    margin: 1rem auto;
    transform: none; /* verwijder flip */
  }

  /* Flex containers voor mooie stapeling */
  .efficiency-flex,
  .similar-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }
}

/* (dit wegdoen als ik wil dat steen toch pas beweegt als ik erover hover) */
#ancient-greece .ancient-greece-stone.still {
  display: none;
}

#ancient-greece .ancient-greece-stone.gif {
  opacity: 1;
}

#ancient-greece .ancient-greece-stone {
  transition: none;
}

/* Enkel mobiel: credits op nieuwe lijn */
@media (max-width: 600px) {
  .credits-break {
    display: block;
    margin-top: 0.25rem; /* optioneel, voor ademruimte */
  }
}

body {
  background-color: #fbf9f0; /* licht vergeeld papier als fallback */
  background-image: url("media/paper-texture.jpg"); /* jouw textuur */
  background-repeat: repeat; /* herhaal de textuur zodat hij overal verschijnt */
  background-size: auto; /* behoudt originele textuur grootte */
  background-attachment: fixed; /* blijft op zijn plek als je scrollt */
  background-position: top left; /* begin linksboven */
  color: #333; /* leesbare tekstkleur */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("media/paper-texture.jpg");
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.01; /* verlaagt intensiteit van de textuur */
  z-index: -1;
  pointer-events: none;
}

/* Voor schermen breder dan 1500px */
@media (min-width: 1500px) {
  .kraan-stack {
    max-height: 697vh; /* of exact de hoogte waarop de bodem stopt op jouw scherm */
    overflow: hidden; /* alles wat voorbij max-height komt, verdwijnt */
  }
}