:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 280px;
  margin: 0;
}

body {
  min-height: 100vh;
  color: #000;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.reconstructie-melding {
  padding: 12px 16px;
  color: #fff;
  background: #1f2937;
  text-align: center;
  font: bold 14px/1.35 Arial, Helvetica, sans-serif;
}

.reconstructie-melding p {
  margin: 0;
}

.reconstructie-melding a {
  color: #fff;
}

.tekening-canvas {
  position: relative;
  width: 650px;
  height: var(--canvas-height);
  margin: 0;
  --canvas-height: 999px;
  --bijschrift-top: 11px;
  --bijschrift-left: 9px;
  --bijschrift-width: 509px;
  --afbeelding-top: 44px;
  --afbeelding-left: 0;
  --afbeelding-height: 866px;
}

.bijschrift {
  position: absolute;
  z-index: 1;
  top: var(--bijschrift-top);
  left: var(--bijschrift-left);
  width: var(--bijschrift-width);
  margin: 0;
  color: #f03;
  font: bold 13px/16px Arial, Helvetica, sans-serif;
}

.grote-tekening {
  position: absolute;
  z-index: 0;
  top: var(--afbeelding-top);
  left: var(--afbeelding-left);
  display: block;
  width: 630px;
  line-height: 0;
}

.grote-tekening img {
  display: block;
  width: 630px;
  height: var(--afbeelding-height);
  border: 0;
}

.tek-homeknop {
  position: absolute;
  z-index: 2;
  top: var(--home-top, 951px);
  left: var(--home-left, 10px);
  display: block;
  line-height: 0;
}

.tek-homeknop img {
  display: block;
  border: 0;
}

.bijschrift-zwart {
  color: #000;
  font-weight: 400;
}

.tek2-canvas {
  --canvas-height: 560px;
  --home-top: 507px;
  --home-left: 4px;
  --bijschrift-top: 7px;
  --bijschrift-left: 3px;
  --bijschrift-width: 344px;
  --afbeelding-top: 30px;
  --afbeelding-height: 457px;
}

.tek3-canvas {
  --canvas-height: 975px;
  --home-top: 918px;
  --home-left: 24px;
  --bijschrift-top: 7px;
  --bijschrift-left: 61px;
  --bijschrift-width: 344px;
  --afbeelding-top: 29px;
  --afbeelding-left: 20px;
  --afbeelding-height: 866px;
}

.tek4-canvas {
  --canvas-height: 983px;
  --home-top: 923px;
  --home-left: 17px;
  --bijschrift-top: 7px;
  --bijschrift-left: 3px;
  --bijschrift-width: 344px;
  --afbeelding-top: 33px;
  --afbeelding-height: 866px;
}

.tek5-canvas {
  --canvas-height: 956px;
  --home-top: 899px;
  --home-left: 15px;
  --bijschrift-top: 13px;
  --bijschrift-left: 12px;
  --bijschrift-width: 532px;
  --afbeelding-top: 39px;
  --afbeelding-left: 3px;
  --afbeelding-height: 836px;
}

.tek6-canvas {
  --canvas-height: 559px;
  --home-top: 501px;
  --home-left: 6px;
  --bijschrift-top: 10px;
  --bijschrift-left: 7px;
  --bijschrift-width: 344px;
  --afbeelding-top: 51px;
  --afbeelding-height: 425px;
}

.tek7-canvas {
  --canvas-height: 550px;
  --home-top: 501px;
  --home-left: 7px;
  --bijschrift-top: 10px;
  --bijschrift-left: 3px;
  --bijschrift-width: 616px;
  --afbeelding-top: 39px;
  --afbeelding-height: 451px;
}

.grote-tekening:focus-visible,
.tek-homeknop:focus-visible,
.reconstructie-melding a:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

@media (max-width: 650px) {
  .tekening-canvas {
    width: 100%;
    height: auto;
  }

  .bijschrift,
  .grote-tekening,
  .tek-homeknop {
    position: static;
  }

  .bijschrift {
    width: auto;
    margin: 10px 8px 7px;
  }

  .grote-tekening,
  .grote-tekening img {
    width: 100%;
    height: auto;
  }

  .tek-homeknop {
    display: inline-block;
    margin: 12px 0 0 8px;
  }
}