/* Warmtebeelddetectie.nl – klassieke opmaak (zoals de oude frameset uit 2006), technisch vernieuwd */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #cccccc; font: 12px/21px Verdana, Arial, Helvetica, sans-serif; color: #000; }
img { border: 0; max-width: 100%; height: auto; }
a, a:link, a:visited { color: #427cae; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #d47700; outline-offset: 2px; }

.pagina { width: 780px; margin: 48px auto; background: #eaeaea; }

/* Kop: kop.jpg met de witte snelkoppelingen rechtsboven */
.kop { position: relative; height: 128px; background: #eaeaea; }
.kop img { display: block; }
.koplinks { position: absolute; top: 2px; right: 14px; color: #fff; font-size: 11px; }
.koplinks a, .koplinks a:link, .koplinks a:visited { color: #fff; font-size: 11px; }

/* Midden: menu (160) + fotokolom (185) + inhoud */
.midden { display: grid; grid-template-columns: 160px 185px 1fr; align-items: stretch; }

.menu { background: #ced8e2; }
.menu-blok { height: 50px; background: #427cae; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { border-bottom: 1px solid #fff; }
.menu li.menu-leeg { height: 22px; }
a.navigation, a.navigation:link, a.navigation:visited { display: block; padding: 3px 12px 3px 10px; font-size: 10px; line-height: 15px; font-weight: bold; color: #666; text-decoration: none; }
a.navigation:hover { background: #eceff1; color: #666; text-decoration: none; }
a.navigation.actief { background: #427cae; color: #fff; }

/* Fotokolom: de zes foto's uit de oude Flash, nu als CSS-overvloeier */
.dia { position: relative; background: #eaeaea; min-height: 480px; overflow: hidden; }
.dia img { position: absolute; top: 0; left: 0; width: 185px; height: 480px; object-fit: cover; opacity: 0; animation: dia 36s infinite; }
.dia img:nth-child(1) { animation-delay: 0s; }
.dia img:nth-child(2) { animation-delay: 6s; }
.dia img:nth-child(3) { animation-delay: 12s; }
.dia img:nth-child(4) { animation-delay: 18s; }
.dia img:nth-child(5) { animation-delay: 24s; }
.dia img:nth-child(6) { animation-delay: 30s; }
@keyframes dia { 0% { opacity: 0; } 3% { opacity: 1; } 17% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dia img { animation: none; } .dia img:first-child { opacity: 1; } }

/* Inhoud */
.inhoud { background: #edeef2; min-width: 0; }
.titelbalk { height: 50px; background: #427cae; color: #6698c6; font-size: 18px; text-align: right; padding: 16px 14px 0; }
.tekst { padding: 14px; }
.tekst p { margin: 0 0 1em; }
.tekst ul { margin: 0 0 1em; padding-left: 20px; }
h1 { font-size: 18px; color: #d47700; font-weight: normal; }

.foto { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: start; margin: 0 0 14px; }
.foto p { margin: 0; }
.tekst button[data-lightbox] { padding: 0; border: 0; background: none; cursor: zoom-in; }
.illustratie { text-align: center; }
.duo { display: flex; gap: 10px; flex-wrap: wrap; }
.route { display: flex; flex-direction: column; gap: 8px; }

table.refs { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
table.refs th, table.refs td { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid #ced8e2; }
table.refs th { color: #427cae; }
table.gegevens td { padding: 0 12px 0 0; }

/* Formulier in de stijl van toen */
.formulier table { width: 100%; }
.formulier td { padding: 2px 4px 2px 0; vertical-align: top; }
.formulier td:first-child { width: 120px; }
.formulier input, .formulier textarea { width: 100%; font: 12px Verdana, Arial, sans-serif; padding: 3px; border: 1px solid #7f9db9; background: #fff; }
.formulier button { font: 12px Verdana, Arial, sans-serif; padding: 3px 14px; cursor: pointer; }
.formulier .hint { font-size: 11px; color: #666; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.melding { padding: 6px 8px; margin-bottom: 8px; border: 1px solid; }
.melding-ok { background: #e6f2e6; border-color: #7fb37f; color: #1f5a1f; }
.melding-fout { background: #fbe9e7; border-color: #d99a92; color: #8a2a22; }

/* Voet */
.voet { height: 21px; background: #666; color: #eaeaea; font-size: 11px; line-height: 21px; padding-left: 4px; }

/* Lightbox (vervangt de oude pop-upvensters) */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; color: #fff; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox img { max-height: 84vh; width: auto; margin: 0 auto; display: block; background: #fff; }
.lightbox p { text-align: center; margin: 10px 0 0; }
.lightbox-close { position: fixed; top: 12px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; font-size: 26px; cursor: pointer; }

/* Smalle schermen: kolommen onder elkaar, fotokolom weg */
@media (max-width: 800px) {
  .pagina { width: auto; margin: 0; }
  .kop { height: auto; }
  .koplinks { position: static; background: #666; padding: 4px 8px; text-align: right; }
  .midden { grid-template-columns: 1fr; }
  .dia, .menu-blok, .menu li.menu-leeg { display: none; }
  .menu ul { display: flex; flex-wrap: wrap; }
  .menu li { border-right: 1px solid #fff; }
  a.navigation, a.navigation:link, a.navigation:visited { padding: 8px 10px; font-size: 11px; }
  .foto { grid-template-columns: 1fr; }
}