/* Duidelijke terugknop boven de inhoud van subpagina's (terugknop-build.py, gedrag terugknop.js). */
/* Same left edge as the logo in the page header (5vw). */
.hd-back-bar { padding: 18px 5vw 0; }
.hd-back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 20px 8px 8px;
  border-radius: 999px; background: #203e32; color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  line-height: 1.2; text-decoration: none; box-shadow: 0 6px 16px #1027191f; transition: background .15s ease;
}
.hd-back-arrow {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #ffffff26; font-size: 17px; line-height: 1; transition: transform .15s ease;
}
.hd-back:hover, .hd-back:focus-visible { background: #2f5847; color: #fff; }
.hd-back:hover .hd-back-arrow { transform: translateX(-3px); }
.hd-back:focus-visible { outline: 3px solid #d8b56d; outline-offset: 3px; }
@media (max-width: 600px) { .hd-back-bar { padding: 14px 6vw 0; } }
@media (prefers-reduced-motion: reduce) { .hd-back, .hd-back-arrow { transition: none; } }
@media print { .hd-back-bar { display: none; } }