/* Stamwandeling: mobiel eerst. Zand #F6EEDF, zeeblauw #10324A, accent #C2410C. */
.wl { --wl-zand: #F6EEDF; --wl-zee: #10324A; --wl-accent: #C2410C;
  background: var(--wl-zand); color: var(--wl-zee); padding: 1.2rem 1rem 3rem; }
.wl-smal { max-width: 34rem; margin: 0 auto; }
.wl h1, .wl h2 { font-family: var(--font-display); line-height: 1.1; color: var(--wl-zee); }
.wl h1 { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: .6rem; }
.wl h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.wl-kaart { background: #fff; border-radius: 14px; padding: 1.1rem 1.2rem; margin: 1rem 0;
  box-shadow: 0 2px 0 rgba(16, 50, 74, .12); }
.wl-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  min-width: 44px; padding: .6rem 1.2rem; border: 0; border-radius: 999px; background: var(--wl-accent);
  color: #fff; font: 700 1rem var(--font-tekst); text-decoration: none; cursor: pointer; }
.wl-knop.stil { background: var(--wl-zee); }
.wl-knop.breed { width: 100%; }
.wl-mono { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .02em; }
.wl-concept { display: inline-block; font-family: var(--font-mono); font-size: .75rem; background: #fde68a;
  color: #713f12; padding: .1rem .5rem; border-radius: 4px; }
.wl-stops { list-style: none; counter-reset: stop; padding: 0; }
.wl-stops li { display: flex; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed #e2d6bd; }
.wl-nr { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 .95rem var(--font-mono); background: #fff; border: 2px solid var(--wl-zee); }
.wl-nr.klaar { background: var(--wl-zee); color: #fff; }
.wl-nr.volgende { background: var(--wl-accent); border-color: var(--wl-accent); color: #fff; }
.wl input[type="text"], .wl select, .wl input[type="file"] { width: 100%; min-height: 44px; padding: .5rem .7rem;
  border: 2px solid #d9c9a6; border-radius: 10px; font: 1rem var(--font-tekst); background: #fff; color: var(--wl-zee); }
.wl fieldset { border: 0; margin: 0 0 1rem; }
.wl legend { font-weight: 700; margin-bottom: .4rem; }
.wl-optie { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .2rem .6rem;
  border: 2px solid #eadfc8; border-radius: 10px; margin-bottom: .4rem; }
.wl-optie input { width: 1.2rem; height: 1.2rem; }
.wl-volgorde { display: grid; grid-template-columns: 2rem 1fr; gap: .4rem; align-items: center; }
#wl-map { height: 58vh; min-height: 320px; border-radius: 14px; margin: .8rem 0; z-index: 0; }
.wl-marker { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 14px var(--font-mono); background: #fff; color: #10324A; border: 2px solid #10324A; }
.wl-marker.klaar { background: #10324A; color: #fff; }
.wl-marker.volgende { background: #C2410C; border-color: #C2410C; color: #fff; }
.wl-ik { width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .35); }
.wl-voortgang { font: 700 1rem var(--font-mono); }
.wl-polaroid { background: #fff; padding: .8rem .8rem 2.6rem; transform: rotate(-2deg); position: relative;
  box-shadow: 0 6px 18px rgba(16, 50, 74, .18); margin: 1.2rem auto; max-width: 22rem; }
.wl-polaroid img { width: 100%; display: block; }
.wl-stempel { position: absolute; right: .8rem; bottom: .6rem; transform: rotate(-6deg); font: 700 .9rem var(--font-mono);
  color: var(--wl-accent); border: 2px solid var(--wl-accent); padding: .1rem .5rem; border-radius: 4px; }
.wl-selfies { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.wl-selfies img { width: 100%; border-radius: 8px; display: block; }
.wl-goed { color: #166534; font-weight: 700; }
.wl-fout { color: #991b1b; font-weight: 700; }
.wl-praat { display: inline-block; font-family: var(--font-mono); font-size: .75rem; background: #dbeafe;
  color: #1e3a8a; padding: .1rem .5rem; border-radius: 4px; vertical-align: middle; }
.wl-juist { font-weight: 700; }
.wl-teamantw { list-style: none; padding: 0; margin: .3rem 0 .8rem; }
.wl-teamantw li { padding: .3rem 0; border-bottom: 1px dashed #e2d6bd; }

/* /wandeling/show: live Stamquiz, mobiel eerst, groeit mee op een groot scherm */
.wl textarea { width: 100%; padding: .5rem .7rem; border: 2px solid #d9c9a6; border-radius: 10px;
  font: 1rem var(--font-tekst); color: var(--wl-zee); margin: .4rem 0 .6rem; }
.wl-show { max-width: 72rem; margin: 0 auto; min-height: 70vh; }
.wl-stap { background: #fff; border-radius: 14px; padding: clamp(1rem, 3vw, 2.5rem); font-size: clamp(1rem, 2.2vw, 1.7rem); }
.wl .wl-stap h1 { font-size: clamp(1.7rem, 5.5vw, 4rem); }
.wl .wl-stap h2 { font-size: clamp(1.1rem, 2.6vw, 2rem); margin-top: 1rem; }
.wl-stap-kop { font: 700 clamp(.9rem, 2vw, 1.4rem) var(--font-mono); display: flex; gap: .6rem; align-items: center; }
.wl-stap-welkom { text-align: center; }
.wl-groot { font-size: clamp(1.1rem, 2.8vw, 2rem); }
.wl-qr svg { width: min(80vw, 60vh); height: auto; display: block; margin: 1rem auto 0; }
.wl-qr p { font-size: clamp(1.1rem, 3vw, 2.4rem); font-weight: 700; text-align: center; word-break: break-all; }
.wl-qr-klein svg { width: min(60vw, 14rem); }
.wl-qr-klein p { font-size: 1rem; }
.wl-opties { padding-left: 1.2rem; }
.wl-opties li { padding: .25rem 0; }
.wl-onthul { font-size: clamp(1.3rem, 3.5vw, 2.6rem); background: #fef3c7; border-radius: 10px; padding: .6rem 1rem; }
.wl-stap .wl-selfies { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.wl-stap figure { margin: 0; }
.wl-stap figcaption { font-size: .9em; text-align: center; }
.wl-bladeren { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.wl-bladeren form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; flex: 1 1 14rem; }
.wl-bladeren select { flex: 1 1 10rem; }
.wl-standen { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.wl-knop[disabled] { opacity: .4; cursor: default; }
.wl-voorbeeld { font-size: .8rem; border: 2px dashed #d9c9a6; border-radius: 14px; }
.wl-score { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
.wl-score td, .wl-score th { padding: .5rem; border-bottom: 1px solid #e2d6bd; text-align: left; }

/* /wandeling/kaartjes: A6 printen */
.wl-kaartjes { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.wl-a6 { width: 105mm; height: 148mm; background: #fff; color: #10324A; border: 1px dashed #999;
  padding: 8mm; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3mm; }
.wl-a6 .wl-nr { width: 14mm; height: 14mm; font-size: 7mm; flex: none; }
.wl-a6 h2 { font-size: 7mm; margin: 0; }
.wl-a6 svg { width: 70mm; height: 70mm; }
.wl-a6 p { font-size: 3.6mm; line-height: 1.35; }
@media print {
  @page { size: A6; margin: 0; }
  .topbalk, .einde, .strandrand, .skiplink, .wl-geenprint { display: none !important; }
  .wl { padding: 0; background: #fff; }
  .wl-kaartjes { display: block; }
  .wl-a6 { border: 0; page-break-after: always; break-after: page; }
}