/* Aspirantentoernooi, SV De Wildenberg */

:root {
  --papier: #F4F5F0;
  --wit: #FFFFFF;
  --inkt: #000000;
  --tekst: #1C201C;
  --grijs: #565E55;
  --lijn: #CDD2C6;
  --rand: #7A8378;
  --groen: #24543A;
  --groen-diep: #183B28;
  --groen-licht: #E8F0EA;
  --oranje: #E2601A;        /* kleiduif */
  --knop: #C24A14;
  --knop-donker: #A23C0E;
  --rood: #C8251A;          /* foutmeldingen */
  --rood-donker: #A91F15;
  --geel: #FBE9A7;

  --kop: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue Condensed", sans-serif;
  --romp: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --breed: 1120px;
  --goot: clamp(1rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--romp);
  font-size: 1.125rem;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--kop);
  line-height: 1;
  margin: 0 0 1rem;
  color: var(--inkt);
}
h2 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 800; letter-spacing: -0.005em; }
h3 { font-size: 1.6rem; font-weight: 600; margin-top: 0.25rem; }
p { margin: 0 0 1rem; max-width: 62ch; }
a { color: var(--groen); text-underline-offset: 0.18em; }
a:hover { color: var(--groen-diep); }
strong { font-weight: 700; }
address { font-style: normal; margin-bottom: 1rem; }

:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }

.naar-inhoud {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--wit); color: var(--inkt); padding: .6rem 1rem; z-index: 10;
}
.naar-inhoud:focus { top: 1rem; }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-block;
  background: var(--knop);
  color: var(--wit);
  font-family: var(--kop);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.85rem 1.4rem 0.8rem;
  border: 0;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.knop:hover { background: var(--knop-donker); color: var(--wit); }
.knop-groot { font-size: 1.6rem; padding: 1rem 1.7rem 0.95rem; }
.knop-klein { font-size: 1.15rem; padding: 0.6rem 1rem 0.55rem; }
.knop-uit, .knop-uit:hover { background: var(--grijs); cursor: default; }
.knop-tweede {
  background: transparent; color: var(--groen);
  box-shadow: inset 0 0 0 2px var(--groen);
}
.knop-tweede:hover { background: var(--groen-licht); color: var(--groen-diep); }

/* ---------- Meldingsbalk ---------- */

.melding-voorbeeld {
  background: var(--geel);
  color: var(--inkt);
  font-size: 0.95rem;
  padding: 0.5rem var(--goot);
  text-align: center;
}

/* ---------- Kop ---------- */

.kop { background: var(--groen); color: var(--wit); }
.kop-binnen {
  max-width: var(--breed); margin: 0 auto; padding: 1rem var(--goot);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.merk { color: var(--wit); text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.merk:hover { color: var(--wit); }
.merk-naam { font-family: var(--kop); font-weight: 800; font-size: 1.5rem; }
.merk-club { font-size: 0.9rem; opacity: 0.85; }
.menu { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.menu a:not(.knop) { color: var(--wit); text-decoration: none; font-weight: 700; }
.menu a:not(.knop):hover { text-decoration: underline; }
.kop :focus-visible, .held :focus-visible, .slot :focus-visible { outline-color: var(--wit); }

@media (max-width: 640px) {
  .menu a:not(.knop) { display: none; }
  .kop-binnen { flex-wrap: nowrap; }
  .merk-naam { font-size: 1.25rem; }
  .merk-club { font-size: 0.85rem; }
}

/* ---------- Held ---------- */

.held { background: var(--groen); color: var(--wit); overflow: hidden; }
.held-binnen {
  max-width: var(--breed); margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--goot) clamp(5rem, 9vw, 7.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 clamp(1.5rem, 5vw, 4rem); align-items: center;
}
.held-titel {
  color: var(--wit);
  font-size: clamp(3.4rem, 9.5vw, 7.75rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
  hyphens: manual;
  grid-column: 1 / -1;
}
.held-jaar { color: transparent; -webkit-text-stroke: 2px var(--wit); }
.held-intro { font-size: 1.25rem; max-width: 40ch; margin-bottom: 2rem; }
.held-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.link-licht { color: var(--wit); font-weight: 700; }
.link-licht:hover { color: var(--wit); text-decoration-thickness: 2px; }
.held-kaart { justify-self: end; width: 100%; max-width: 600px; }

@media (max-width: 820px) {
  .held-binnen { grid-template-columns: 1fr; }
  .held-kaart { justify-self: stretch; max-width: 100%; margin: 2rem 0 0; }
}

/* ---------- Scorekaart (illustratie) ---------- */

.scorekaart-svg {
  display: block; width: 100%; height: auto;
  transform: rotate(-3deg);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.35));
}
.sk-papier { fill: var(--wit); }
.sk-titel { font-family: var(--kop); font-weight: 800; font-size: 34px; fill: var(--inkt); }
.sk-sub { font-family: var(--romp); font-size: 19px; fill: var(--grijs); text-anchor: end; }
.sk-lijn { stroke: var(--lijn); stroke-width: 1; }
.sk-lijn-dik { stroke: var(--inkt); stroke-width: 2; }
.sk-ronde {
  font-family: var(--kop); font-weight: 800; font-size: 22px; fill: var(--groen);
  dominant-baseline: central;
}
.sk-vak { fill: none; stroke: var(--lijn); stroke-width: 1; }
.sk-raak { stroke: var(--oranje); stroke-width: 3; stroke-linecap: round; fill: none; }
.sk-mis { fill: none; stroke: var(--grijs); stroke-width: 2; }
.sk-som {
  font-family: var(--kop); font-weight: 800; font-size: 24px; fill: var(--inkt);
  text-anchor: end; dominant-baseline: central; font-variant-numeric: tabular-nums;
}
.sk-totaal-label { font-family: var(--romp); font-weight: 700; font-size: 21px; fill: var(--inkt); }
.sk-totaal { font-family: var(--kop); font-weight: 800; font-size: 40px; fill: var(--oranje); text-anchor: end; }

/* De kaart vult zich één keer bij het laden */
.sk-raak, .sk-mis, .sk-som, .sk-totaal {
  opacity: 0;
  animation: invullen 90ms ease-out forwards;
  animation-delay: calc(var(--i) * 16ms + 500ms);
}
@keyframes invullen { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sk-raak, .sk-mis, .sk-som, .sk-totaal { animation: none; opacity: 1; }
}

/* ---------- Kerngegevens ---------- */

.kerngegevens { max-width: var(--breed); margin: -3.25rem auto 0; padding: 0 var(--goot); position: relative; }
.kerngegevens-rij {
  margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--wit);
  border: 2px solid var(--inkt);
  border-radius: 6px;
}
.vak { padding: 1.1rem 1.25rem 1.2rem; border-left: 1px solid var(--inkt); }
.vak:first-child { border-left: 0; }
.vak dt { font-size: 0.95rem; font-weight: 700; color: var(--groen); margin-bottom: 0.35rem; }
.vak dd { margin: 0; font-family: var(--kop); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--inkt); }
.vak dd small { display: block; font-family: var(--romp); font-weight: 400; font-size: 0.95rem; line-height: 1.35; color: var(--grijs); margin-top: 0.35rem; }

@media (max-width: 820px) {
  .kerngegevens-rij { grid-template-columns: 1fr 1fr; }
  .vak:nth-child(3) { border-left: 0; }
  .vak:nth-child(n+3) { border-top: 1px solid var(--inkt); }
}
@media (max-width: 420px) {
  .kerngegevens-rij { grid-template-columns: 1fr; }
  .vak { border-left: 0; }
  .vak + .vak { border-top: 1px solid var(--inkt); }
}

/* ---------- Blokken ---------- */

.blok { padding: clamp(3.5rem, 8vw, 5.5rem) 0; }
.blok-wit { background: var(--wit); }
.blok-binnen { max-width: var(--breed); margin: 0 auto; padding: 0 var(--goot); }
.blok-binnen.smal { max-width: 800px; }
.twee-kolommen { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
@media (max-width: 820px) { .twee-kolommen { grid-template-columns: 1fr; } }
.onder-kop { color: var(--grijs); margin-top: -0.5rem; }
.klein { font-size: 0.95rem; color: var(--grijs); margin-top: 0.75rem; }

.prijzen { border-left: 4px solid var(--groen); padding: 0.25rem 0 0.25rem 1.5rem; }

/* Programma */
.tijdlijn { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.tijdlijn li {
  display: grid; grid-template-columns: 5.25rem 1fr; gap: 1rem;
  padding: 0.85rem 0; border-top: 1px solid var(--lijn);
}
.tijdlijn li:last-child { border-bottom: 1px solid var(--lijn); }
.tijd {
  font-family: var(--kop); font-weight: 800; font-size: 1.6rem; line-height: 1.1;
  color: var(--groen); font-variant-numeric: tabular-nums;
}
.wat { font-weight: 700; padding-top: 0.15rem; }
.wat small { display: block; font-weight: 400; font-size: 1rem; color: var(--grijs); margin-top: 0.15rem; }

/* Inbegrepen */
.inbegrepen { border-left: 4px solid var(--oranje); padding: 0.25rem 0 0.25rem 1.5rem; }
.inbegrepen-rij { display: flex; gap: 2.5rem; margin: 1rem 0 1.25rem; }
.inbegrepen-rij p { margin: 0; font-weight: 700; }
.inbegrepen-rij strong {
  display: block; font-family: var(--kop); font-weight: 800; font-size: 4rem; line-height: 0.9;
  color: var(--inkt); font-variant-numeric: tabular-nums;
}

/* Tabellen (beheer) */
.tabel-houder { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.tabel th, .tabel td { text-align: left; padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel thead th { font-size: 0.95rem; color: var(--grijs); font-weight: 700; border-bottom: 2px solid var(--inkt); }
.tabel tbody th { font-weight: 700; }

/* Vragen */
.vragen { border-top: 1px solid var(--lijn); margin-top: 1.5rem; }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; font-weight: 700;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: "+"; font-family: var(--kop); font-weight: 800; font-size: 1.75rem; line-height: 0.8;
  color: var(--groen); flex: none;
}
.vragen details[open] summary::after { content: "−"; }
.vragen details p { padding-bottom: 1.1rem; margin: 0; }
.vraag-contact { margin-top: 1.5rem; }

/* Slot */
.slot { background: var(--groen-diep); color: var(--wit); }
.slot-binnen { max-width: var(--breed); margin: 0 auto; padding: clamp(3rem, 7vw, 4.5rem) var(--goot); }
.slot h2 { color: var(--wit); }
.slot p { font-size: 1.2rem; margin-bottom: 1.75rem; }

/* Voet */
.voet { border-top: 1px solid var(--lijn); font-size: 1rem; }
.voet-binnen {
  max-width: var(--breed); margin: 0 auto; padding: 2.5rem var(--goot) 3rem;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 1.5rem 3rem;
}
.voet p { margin: 0 0 0.25rem; }
.voet-naam { font-family: var(--kop); font-weight: 800; font-size: 1.35rem; }
@media (max-width: 720px) { .voet-binnen { grid-template-columns: 1fr; } }

/* ---------- Gewone pagina's (inschrijven, bedankt, privacy) ---------- */

.pagina-kop { background: var(--groen); color: var(--wit); }
.pagina-kop .blok-binnen { padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
.pagina-kop h1 { color: var(--wit); font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 800; margin: 0; }
.pagina-kop p { margin: 0.75rem 0 0; font-size: 1.2rem; }

.inhoud-tekst h2 { font-size: 2rem; margin-top: 2.5rem; }
.inhoud-tekst ul { padding-left: 1.25rem; max-width: 62ch; }
.inhoud-tekst li { margin-bottom: 0.4rem; }

/* ---------- Formulier ---------- */

.formulier-raster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .formulier-raster { grid-template-columns: 1fr; } .zo-werkt-het { order: -1; } }

fieldset { border: 0; padding: 0; margin: 0 0 2.75rem; min-width: 0; }
legend {
  font-family: var(--kop); font-weight: 800; font-size: 2rem; line-height: 1;
  color: var(--inkt); margin-bottom: 1.25rem; padding: 0;
}
.veld { margin-bottom: 1.35rem; }
.veld label, .veld .label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.optioneel { font-weight: 400; color: var(--grijs); }
.hulp { display: block; font-size: 0.95rem; color: var(--grijs); margin-top: 0.35rem; }
.rij-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 560px) { .rij-2 { grid-template-columns: 1fr; } }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--tekst);
  background: var(--wit);
  border: 2px solid var(--rand);
  border-radius: 4px;
  padding: 0.65rem 0.8rem;
  min-height: 3rem;
}
textarea { min-height: 6rem; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--groen); outline: 3px solid var(--groen-licht); outline-offset: 0; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--groen); outline-offset: 1px; }

.veld-fout input, .veld-fout textarea { border-color: var(--rood); }
.foutmelding { display: block; color: var(--rood-donker); font-weight: 700; font-size: 0.95rem; margin-top: 0.35rem; }
.fouten {
  border: 2px solid var(--rood); background: #FBEDEC; border-radius: 6px;
  padding: 1rem 1.25rem; margin-bottom: 2rem;
}
.fouten h2 { font-size: 1.6rem; color: var(--rood-donker); margin-bottom: 0.5rem; }
.fouten ul { margin: 0; padding-left: 1.25rem; }

.vinkje { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; margin-bottom: 1rem; cursor: pointer; }
.veld .vinkje { display: grid; font-weight: 400; }
.vinkje input { margin: 0.2rem 0 0; width: 1.25rem; height: 1.25rem; accent-color: var(--groen); }


.afrekenen {
  background: var(--wit); border: 2px solid var(--inkt); border-radius: 6px;
  padding: 1.25rem 1.25rem 1.5rem;
}
.afrekenen-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; }
.afrekenen-bedrag { font-family: var(--kop); font-weight: 800; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.afrekenen-regel small { display: block; color: var(--grijs); font-size: 0.95rem; }
.afrekenen .knop { width: 100%; text-align: center; }
.afrekenen .hulp { margin-top: 0.75rem; }
.honing { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.zo-werkt-het { border-left: 4px solid var(--groen); padding-left: 1.5rem; }
.zo-werkt-het h2 { font-size: 2rem; }
.plekken-teller { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.plekken-teller strong { font-family: var(--kop); font-weight: 800; font-size: 1.6rem; color: var(--groen); }
.zo-werkt-het ol { list-style: none; padding: 0; margin: 0; counter-reset: stap; }
.zo-werkt-het li { counter-increment: stap; display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; margin-bottom: 1rem; }
.zo-werkt-het li::before {
  content: counter(stap); font-family: var(--kop); font-weight: 800; font-size: 1.6rem; line-height: 1.05; color: var(--groen);
}

/* ---------- Statuspagina ---------- */

.status { max-width: 720px; }
.status-kop { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.status-kop svg { width: 72px; height: 72px; flex: none; }
.status-kop h2 { margin: 0; }
.gegevens {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px;
  padding: 1.25rem; margin: 1.5rem 0 2rem;
}
.gegevens dt { color: var(--grijs); }
.gegevens dd { margin: 0; font-weight: 700; }
@media (max-width: 520px) { .gegevens { grid-template-columns: 1fr; } .gegevens dd { margin-bottom: 0.5rem; } }
.knoppen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- Demo-betaalpagina ---------- */

.demo-kassa {
  max-width: 480px; background: var(--wit); border: 2px dashed var(--rand); border-radius: 8px; padding: 1.5rem;
}
.demo-kassa .knoppen { margin-top: 1.5rem; }
.demo-kassa form { display: inline; }

/* ---------- Beheer ---------- */

.beheer .blok { padding-top: 2rem; }
.beheer-balk { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.tellers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.teller { background: var(--wit); border: 1px solid var(--lijn); border-radius: 6px; padding: 1rem; }
.teller span { display: block; color: var(--grijs); font-size: 0.95rem; }
.teller strong { font-family: var(--kop); font-weight: 800; font-size: 2.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filters a { padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--rand); text-decoration: none; color: var(--tekst); font-size: 0.95rem; }
.filters a.actief { background: var(--groen); border-color: var(--groen); color: var(--wit); }
.beheer-tabel { font-size: 0.95rem; background: var(--wit); }
.beheer-tabel th, .beheer-tabel td { padding: 0.6rem 0.6rem; }
.beheer-tabel td small, .beheer-tabel th small { display: block; color: var(--grijs); font-weight: 400; font-size: 0.9rem; }
.label { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.label-betaald { background: #DCEFE2; color: #17462B; }
.label-open { background: var(--geel); color: #5A4300; }
.label-mislukt, .label-geannuleerd, .label-verlopen { background: #EDEEEA; color: #4A5049; }
.mini-knop { font: inherit; font-size: 0.85rem; padding: 0.25rem 0.55rem; border-radius: 4px; border: 1px solid var(--rand); background: var(--wit); cursor: pointer; margin-top: 0.35rem; }
.mini-knop:hover { border-color: var(--groen); color: var(--groen); }
.inloggen { max-width: 380px; }
.melding-ok { background: #DCEFE2; border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem; }