/* Algemene styling */


body { 
	margin: 0; 
	background: #fff; 
}

#bg-blaadjes {
  position: fixed;
  inset: 0;
  z-index: 0;           /* achter de content */
  pointer-events: none; /* klikbaar blijft je content */
  overflow: hidden;
  opacity: 0.2; /* = 30% zichtbaar */
}

.site-content {
  position: relative;
  z-index: 1;           /* boven de blaadjes */
}

#bg-blaadjes img {
  position: absolute;
  opacity: .85;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

/* optioneel: subtiele beweging, uit voor reduced motion */
@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(10px) rotate(5deg); }
}
@media (prefers-reduced-motion: no-preference) {
  #bg-blaadjes img { animation: sway 4s ease-in-out infinite alternate; }
}





/* Formulier container met achtergrondafbeelding */
.form-container {
    position: relative;
    width: 90vw;  /* Schaalbare breedte */
    max-width: 600px; /* Groter op desktop */
    height: auto;
    aspect-ratio: 439 / 780; /* Houdt de juiste verhouding */
    background: url('https://22-11-2025.nl/welkom/images/achtergrond_formulier.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* ❗ Verwijdert extra ruimte bovenaan */
    padding: 0;
}

/* Positionering invulvelden */
form {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
}

/* Algemene styling invoervelden */
input, button {
    position: absolute;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    border: none;
    background: rgba(130, 184, 129, 0.8);
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
}

textarea {
    position: absolute;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    border: none;
    background: rgba(130, 184, 129, 0.8);
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
}

input::placeholder {
  color: #ffffff;
}

input, textarea::placeholder {
  color: #ffffff;
}

/* 🔹 Precieze posities van de velden */
.name {
    top: 15%; /* Aangepast zodat het exact over het lichtere vlak valt */
}

.email {
    top: 25%; /* Klein beetje naar beneden */
}

.message {
    top: 37%; /* Klein beetje aangepast voor de beste uitlijning */
    width: 60%;
    height: 25%;
    color: #ffffff;
}

.submit {
    top: 66%;
    background: #171611;
    color: white;
    cursor: pointer;
}

.submit:hover {
    background: #345228;
}

/* 📱 MEDIA QUERY voor mobiele apparaten */
@media (max-width: 200px) {
    .form-container {
        width: 95%;
        background-size: contain;
    }

    input, textarea, button {
        width: 80%;
    }
}




/* Bedankt-container */
.bedankt-container {
    position: relative;
    width: 90vw;
    max-width: 600px;
    height: auto;
    max-height: 80vh; /* Zorgt ervoor dat de afbeelding niet te groot wordt */
    aspect-ratio: 371 / 600;
    background: url('https://22-11-2025.nl/welkom/images/bedankt_st.png') no-repeat center top;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 0px;
}

/* Tekststijl */
.bedankt-tekst {
    position: absolute;
    top: 40%;
    width: 60%;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: white;
    /* background: rgba(0, 0, 0, 0.6); */
    padding: 10px;
    border-radius: 10px;
    font-family: 'Dancing Script', cursive; /* ✍ Handgeschreven lettertype */
    color: #345228;
}

/* Start-container */
.start-container {
    position: relative;
    width: 90vw;
    max-width: 600px;
    height: auto;
    max-height: 80vh; /* Zorgt ervoor dat de afbeelding niet te groot wordt */
    aspect-ratio: 371 / 600;
    background: url('https://22-11-2025.nl/nieuw/welkom/images/achtergrond_start.png') no-repeat center top;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 0px;
}

/* Tekststijl */
.start-tekst {
    position: absolute;
    top: 0%;
    width: 75%;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: white;
    /* background: rgba(0, 0, 0, 0.6); */
    padding: 0px;
    border-radius: 10px;
    font-family: 'Dancing Script', cursive; /* ✍ Handgeschreven lettertype */
    color: #345228;
    margin: 0px;
}



/* unvisited link */
a:link {
  color: #8c62ec;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #8c62ec;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #8c62ec;
  text-decoration: none;
}

/* selected link */
a:active {
  color: #8c62ec;
  text-decoration: none;
}

.paarse-tekst {
  color: #8c62ec; /* kies jouw paars */
  font-weight: bold; /* optioneel */
}

h5, h6 {
    margin-bottom: .5rem;
    font-family: 'Dancing Script', cursive; /* ✍ Handgeschreven lettertype */
    font-size: 18px;
    font-weight: bold;
    color: inherit;
    color: #345228;
}

@media(max-width:650px) {
    h5, h6 {
         margin-top: 55vh;
    }
}

@media(max-width:525px) {
    h5, h6 {
         margin-top: 65vh;
    }
}

@media(max-width:375px) {
    h5, h6 {
         margin-top: 80vh;
    }
}

#feestcountdown {
  display: block;        /* eigen regel */
  position: static !important;  /* geen absolute/fixed uit .leading of elders */
  top: auto; right: auto; bottom: auto; left: auto;
  float: none !important;
  clear: both;           /* altijd onder evt. floats uit de <p> */
  margin-top: .6rem;     /* klein beetje ruimte */
  order: initial;        /* negeer flex-order als dat elders gezet is */
  align-self: auto;      /* geen afwijkende uitlijning in flex */
  grid-column: auto;     /* geen grid-forcering */
  transform: none;       /* geen verschuivingen */
}

.start-tekst .begin-afbeelding {
  display: block;          /* zodat 'ie op z’n eigen regel komt */
  max-width: 100%;         /* laat hem nooit breder worden dan z’n container */
  height: auto;            /* behoudt verhoudingen */
  margin: 0 auto 1rem;     /* centreert horizontaal + ruimte eronder */
}