/* Voorpagina met codeveld — poort van Voorpagina.dc.html naar statische CSS. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@400;500;600;700&display=swap');

body.af-vp-body { margin: 0; background: #14150F; }
.af-vp, .af-vp * { box-sizing: border-box; }

.af-vp {
  font-family: Montserrat, sans-serif;
  min-height: 100vh;
  background: #14150F;
  color: #F1EEE3;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 40px 24px;
}

.af-vp a { color: #C7A96B; text-decoration: none; }
.af-vp a:hover { color: #E0C68F; }
.af-vp input, .af-vp button { font-family: inherit; }
.af-vp input::placeholder { color: #A3A492; letter-spacing: 0.32em; }
.af-vp input:focus { outline: none; }

@keyframes af-vp-fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes af-vp-shakeA { 0%,100% { transform: none; } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

.af-vp-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: af-vp-fadeUp 0.7s ease both;
}

.af-vp-icoon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 18px;
}

.af-vp-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #C7A96B;
}

.af-vp-titel {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.05;
  margin: 22px 0 0;
  max-width: 14ch;
  text-wrap: balance;
}

.af-vp-lead {
  font-size: 15px;
  line-height: 1.8;
  color: #A3A492;
  margin: 20px 0 0;
  max-width: 44ch;
  text-wrap: pretty;
}

.af-vp-form {
  margin-top: 46px;
  width: 100%;
  max-width: 420px;
}
.af-vp-form.af-vp-schud { animation: af-vp-shakeA 0.4s ease 1; }

.af-vp-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #45463A;
  color: #F1EEE3;
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  padding: 10px 0 16px;
}
.af-vp-input:focus { border-bottom-color: #C7A96B; }

.af-vp-knop {
  margin-top: 26px;
  width: 100%;
  background: #C7A96B;
  color: #14150F;
  border: 0;
  padding: 19px 30px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.af-vp-knop:hover { background: #E0C68F; }
.af-vp-knop:disabled { opacity: 0.6; cursor: default; }

.af-vp-melding { min-height: 26px; margin-top: 18px; }
.af-vp-fout, .af-vp-gelukt { font-size: 13px; line-height: 1.6; letter-spacing: 0.03em; }
.af-vp-fout { color: #D98A72; }
.af-vp-gelukt { color: #C7A96B; }

.af-vp-help {
  font-size: 13px;
  line-height: 1.8;
  color: #A3A492;
  margin: 26px 0 0;
  max-width: 40ch;
}

.af-vp-footer { text-align: center; padding-top: 40px; }
.af-vp-lijn { width: 40px; height: 1px; background: #45463A; margin: 0 auto 18px; }
.af-vp-footertekst {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8B8C7A;
}