/* Kids Day, het aanmeldformulier.
   Laadt bovenop css/kidsday.css en gebruikt dezelfde variabelen, hetzelfde
   lettertype en dezelfde koppen. Hier staat alleen wat de landingspagina niet
   heeft: velden, labels, vinkjes en de meldingen. */

.form-hoofd{padding:clamp(72px,10vh,116px) 0 clamp(20px,3vh,32px)}
.form-hoofd .kicker{color:var(--rood-licht);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700;margin-bottom:12px}
.form-hoofd h1{font-size:clamp(30px,4.4vw,52px);letter-spacing:-.022em}
.form-hoofd .intro{margin-top:14px;max-width:62ch;color:var(--zacht)}
.form-hoofd .terug{display:inline-block;margin-top:20px;font-size:14px;color:var(--stil);text-decoration:none;border-bottom:1px solid var(--lijn);padding-bottom:2px}
.form-hoofd .terug:hover{color:var(--wit)}

.form-schil{padding-bottom:clamp(56px,9vh,104px)}
.form-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:900px){.form-raster{grid-template-columns:1fr}}

/* De kaart naast het formulier: wat, waar, wanneer en de stand van de plekken */
.form-kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--rond);padding:24px;position:sticky;top:80px}
@media (max-width:900px){.form-kaart{position:static}}
.form-kaart h2{font-size:20px;margin-bottom:14px}
.form-kaart dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.5px}
.form-kaart dt{color:var(--stil)}
.form-kaart dd{margin:0;color:var(--wit)}
.form-kaart .plekken{margin-top:18px;padding-top:16px;border-top:1px solid var(--lijn);font-size:14.5px;color:var(--zacht)}
.form-kaart .plekken b{color:var(--wit)}

/* Velden */
.veldgroep{border:0;padding:0;margin:0 0 30px}
.veldgroep legend{padding:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--rood-licht);margin-bottom:14px}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.velden{grid-template-columns:1fr}}
.veld{display:flex;flex-direction:column;gap:6px}
.veld.breed{grid-column:1 / -1}
.veld label{font-size:14px;color:var(--zacht)}
.veld .noot{font-size:13px;color:var(--stil)}
.veld input,.veld select,.veld textarea{
  font:inherit;font-size:16px;color:var(--wit);background:var(--vlak);
  border:1px solid var(--lijn);border-radius:var(--rond);padding:11px 13px;width:100%}
.veld textarea{min-height:110px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--rood-licht);outline-offset:1px;border-color:transparent}
.veld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--stil) 50%),linear-gradient(135deg,var(--stil) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}

/* De honeypot. Weg voor mensen, aanwezig voor bots. */
.webstek{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Vinkjes */
.vinkjes{display:grid;gap:14px}
.vink{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;font-size:14.5px;color:var(--zacht)}
.vink input{margin:3px 0 0;width:17px;height:17px;accent-color:var(--rood)}
.vink a{color:var(--wit)}

/* Het persvinkje hangt onder het beeldvinkje. De inspringing en de streep
   maken die afhankelijkheid zichtbaar zonder er een zin voor nodig te hebben. */
.vink-genest{display:grid;gap:9px;margin:14px 0 0 28px;padding-left:14px;border-left:2px solid var(--lijn)}
.vink-genest .noot{margin:0;font-size:13px;color:var(--stil);line-height:1.5}

/* Verzenden */
.form-slot{margin-top:26px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.form-slot .knop{font:inherit;font-weight:700;font-size:15px;letter-spacing:.02em;
  background:var(--rood);color:#fff;border:0;border-radius:var(--rond);padding:14px 26px;cursor:pointer}
.form-slot .knop:hover{background:var(--rood-licht)}
.form-slot .knop[disabled]{opacity:.55;cursor:default}
.form-slot .fijn{font-size:13px;color:var(--stil);max-width:60ch}

.melding{border-radius:var(--rond);padding:13px 16px;font-size:14.5px;border:1px solid var(--lijn-rood);background:rgba(158,64,56,.14);color:var(--wit)}
.melding.goed{border-color:var(--lijn);background:var(--vlak);color:var(--zacht)}

/* Zolang de verkoop dichtstaat: een bord boven het formulier. */
.gesloten{margin:0 0 28px;border:1px solid var(--lijn-rood);background:rgba(158,64,56,.12);
  border-radius:var(--rond);padding:16px 18px;font-size:14.5px;color:var(--wit)}
.gesloten b{display:block;margin-bottom:4px}