/* SchoolMaster 25 jaar.
   Palet rechtstreeks uit De Fietsenstalling, editie 9.1, januari 2010 (InDesign-PDF,
   dus de kleuren zijn exact en niet door cameralicht verschoven). Het huis is een
   helder cyaanblauw dat overal in verloop staat, van #00a2e4 tot #00568f, met geel
   als accent, wit papier en inkt #231f20. Afgeronde hoeken zijn huisstijl.
   De lichte uiteinden van elk verloop zijn begrensd door de contrastvloer:
   wit blijft boven 4,5:1, het gele jaartal boven 3:1. */

:root {
  --blauw-licht: #00a2e4;
  --blauw-helder: #0090d2;
  --blauw: #0078c0;
  --blauw-diep: #0062a8;
  --blauw-nacht: #00568f;
  --bleek: #e8f5fd;
  --bleek-diep: #d2ebfa;

  --geel: #fcc00c;
  --geel-licht: #ffd24a;
  --oranje: #f69c54;
  /* Rood en bordeaux staan wel in het huis, maar in de nieuwsbrief zijn het
     kleine markeringen: een paginanummer, een pijltje. Ze dragen daar geen
     voetbalk of een hele reeks labels. Hier dus ook niet. */
  --signaal: #ea3c1e;
  --bordeaux: #96003c;

  --inkt: #231f20;
  --inkt-zacht: #5a6a74;
  --papier: #ffffff;

  --sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --breedte: 50rem;
  --regel: 8px;
  --rond: 9px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

body {
  margin: 0; font-family: var(--sans);
  font-size: 1.0625rem; line-height: 1.62;
  color: var(--inkt); background: var(--papier);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blauw-diep); }

.wrap { max-width: var(--breedte); margin: 0 auto; padding: 0 1.5rem; }

/* Elke sectie bezit zijn kleur van rand tot rand, met een verloop. */
.veld { padding: 3rem 0; }
.veld--blauw { background: linear-gradient(152deg, var(--blauw) 0%, var(--blauw-diep) 100%); color: #fff; }
.veld--diep  { background: linear-gradient(152deg, var(--blauw-diep) 0%, var(--blauw-nacht) 100%); color: #fff; }
.veld--wit   { background: linear-gradient(170deg, #ffffff 0%, var(--bleek) 100%); color: var(--inkt); }
.veld--geel  { background: linear-gradient(145deg, var(--geel-licht) 0%, var(--geel) 100%); color: var(--inkt); }

.regel { height: var(--regel); background: linear-gradient(90deg, var(--geel-licht) 0%, var(--geel) 100%); }
.regel--rood  { background: linear-gradient(90deg, var(--blauw-licht) 0%, var(--blauw) 100%); }
.regel--blauw { background: linear-gradient(90deg, var(--blauw-licht) 0%, var(--blauw) 100%); }

/* ---------- Kop ---------- */
.kop {
  background: linear-gradient(104deg, var(--blauw-diep) 0%, var(--blauw) 60%, var(--blauw-helder) 100%);
  color: #fff; padding: 1.15rem 0;
}
.kop .wrap { display: flex; align-items: center; gap: 0.9rem; }
.kop img { width: clamp(78px, 20vw, 120px); height: auto; flex: none; }
.merk {
  margin: 0; font-size: clamp(1.25rem, 5.4vw, 2.05rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance;
}
.merk-reunie { color: var(--geel-licht); }
.payoff { font-size: 0.8125rem; font-weight: 500; color: var(--geel-licht); margin-top: 0.2rem; }

/* ---------- Eerste beeld ---------- */
.hero {
  background: linear-gradient(148deg, var(--blauw) 0%, var(--blauw-diep) 48%, var(--blauw-nacht) 100%);
  color: #fff; padding: 3rem 0 3.25rem;
}
.jaartal {
  font-size: clamp(1.95rem, 8.4vw, 3.5rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.08; display: block; white-space: nowrap;
}
.jaartal--nu { color: var(--geel-licht); }

.hero h1 {
  text-wrap: balance;
  font-size: clamp(1.5rem, 6vw, 2.3rem); font-weight: 800; line-height: 1.15;
  letter-spacing: -0.03em; margin: 1.9rem 0 0.55rem; max-width: 24ch;
}
.hero .onderkop {
  font-size: clamp(1.05rem, 4.2vw, 1.25rem); font-weight: 500; line-height: 1.4;
  color: rgba(255,255,255,0.94); margin: 1.9rem 0 1.1rem; max-width: 30ch;
}
.hero .plaats { margin: 0 0 2rem; font-weight: 500; color: rgba(255,255,255,0.9); max-width: 34ch; }

.knop {
  display: inline-block; color: var(--inkt);
  background: linear-gradient(180deg, var(--geel-licht) 0%, var(--geel) 55%, #e8ab00 100%);
  font-family: inherit; font-size: 1.125rem; font-weight: 800;
  letter-spacing: -0.005em; text-decoration: none;
  padding: 1.05rem 2.4rem; border: none; border-radius: var(--rond); cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 40, 72, 0.3), 0 9px 22px rgba(0, 40, 72, 0.22);
  transition: filter 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.knop:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0,40,72,0.32), 0 13px 28px rgba(0,40,72,0.24); }
.knop:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,40,72,0.3), 0 4px 10px rgba(0,40,72,0.2); }
.knop:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

/* ---------- Tekst ---------- */
h2 { font-size: clamp(1.6rem, 5.5vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 1.25rem; }
.veld--wit h2 { color: var(--blauw-diep); }
p { margin: 0 0 1.15rem; max-width: 62ch; }
.leid { font-size: 1.2rem; line-height: 1.5; font-weight: 500; color: var(--blauw-diep); }

/* Het getal als veld. */
.cijfer {
  background: linear-gradient(145deg, var(--geel-licht) 0%, var(--geel) 55%, #f0ae00 100%);
  color: var(--inkt); padding: 2.5rem 0; margin: 2.5rem 0; border-radius: var(--rond);
}
.cijfer .groot { font-size: clamp(3.5rem, 18vw, 7rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.85; display: block; }
.cijfer .bij { font-size: 1.15rem; font-weight: 700; margin-top: 0.75rem; max-width: 30ch; }

.voorwie { border-top: var(--regel) solid var(--geel); padding-top: 1.35rem; margin-top: 2.25rem; }
.voorwie b { color: var(--blauw-diep); }

/* ---------- Beeld ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem 1.25rem; margin-top: 2rem; }
figure { margin: 0; }
figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 22%;
  border-radius: 6px; box-shadow: 0 2px 5px rgba(0,40,72,0.18), 0 10px 26px rgba(0,40,72,0.14);
}
figcaption { font-size: 0.9375rem; font-weight: 600; padding-top: 0.65rem; color: var(--inkt-zacht); }
.veld--blauw figcaption, .veld--diep figcaption { color: rgba(255,255,255,0.82); }

/* ---------- Formulier ---------- */
.veld--formulier { background: linear-gradient(170deg, var(--bleek) 0%, var(--bleek-diep) 100%); }
.veld--formulier h2 { color: var(--blauw-diep); }
form { margin-top: 1.75rem; max-width: 34rem; }
label { display: block; font-weight: 700; font-size: 0.9375rem; margin: 1.35rem 0 0.4rem; }
.hint { display: block; font-weight: 500; color: var(--inkt-zacht); font-size: 0.9375rem; }
input[type=text], input[type=email], textarea {
  width: 100%; font-family: inherit; font-size: 1.0625rem; color: var(--inkt);
  padding: 0.8rem 0.9rem; background: #fff;
  border: 2px solid var(--blauw-licht); border-radius: 6px;
}
input:focus, textarea:focus { outline: 4px solid var(--geel); outline-offset: -2px; border-color: var(--blauw); }
textarea { min-height: 6.5rem; resize: vertical; }
fieldset { border: none; margin: 1.35rem 0 0; padding: 0; }
legend { font-weight: 700; font-size: 0.9375rem; padding: 0; margin-bottom: 0.4rem; }
.keuze {
  display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer;
  background: #fff; border: 2px solid var(--blauw-licht); border-radius: 6px;
  padding: 0.8rem 0.9rem; margin-bottom: 0.5rem; font-weight: 500; font-size: 1.0625rem;
}
.keuze:has(input:checked) {
  background: linear-gradient(150deg, var(--blauw) 0%, var(--blauw-diep) 100%);
  color: #fff; border-color: var(--blauw-diep);
}
.keuze input { margin: 0.3rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--blauw); flex: 0 0 auto; }
.honeypot { position: absolute; left: -9999px; }
.privacy { font-size: 0.9375rem; color: var(--inkt-zacht); margin: 1.4rem 0 1.6rem; }

/* ---------- Doorsturen ---------- */
.kit { background: linear-gradient(152deg, var(--blauw-diep) 0%, var(--blauw-nacht) 55%, #00456f 100%); color: #fff; }
.kit h2 { color: #fff; }
.kit p { color: rgba(255,255,255,0.9); }
.kit a { color: var(--geel-licht); }
.kaart { margin-top: 1.5rem; }
.kaart h3 { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--geel-licht); margin: 0 0 0.6rem; }
.tekst {
  background: linear-gradient(150deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--rond);
  color: #fff; padding: 1.1rem 1.25rem; margin: 0 0 0.85rem; max-width: none;
  white-space: pre-wrap; font-size: 1rem; line-height: 1.55;
}
.acties { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mini {
  font-family: inherit; font-size: 0.9375rem; font-weight: 800; cursor: pointer;
  padding: 0.65rem 1.25rem; border: none; border-radius: 6px;
  text-decoration: none; display: inline-block;
  background: linear-gradient(180deg, var(--geel-licht) 0%, var(--geel) 55%, #e8ab00 100%);
  color: var(--inkt);
  box-shadow: 0 1px 3px rgba(0,40,72,0.3), 0 6px 14px rgba(0,40,72,0.2);
}
.mini:hover { filter: brightness(1.07); }
.mini.klaar { background: linear-gradient(180deg, var(--blauw-licht) 0%, var(--blauw) 100%); color: #fff; }
.kit a.mini { color: var(--inkt); }
.kit a.mini.klaar { color: #fff; }

/* ---------- Praktisch ---------- */
.praktisch dl { margin: 1.75rem 0 0; }
.praktisch dt { font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blauw-diep); margin-top: 1.2rem; }
.praktisch dd { margin: 0.2rem 0 0; font-weight: 500; }
.onder { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.75rem; border-top: var(--regel) solid var(--geel); padding-top: 1.75rem; }
.onder img { width: 84px; height: 84px; object-fit: cover; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,40,72,0.2); }
.onder .naam { display: block; font-weight: 800; font-size: 1.1rem; }
.onder .rol { display: block; color: var(--inkt-zacht); font-size: 0.9375rem; font-weight: 500; }
.onder .groet { font-weight: 700; margin: 0 0 0.3rem; color: var(--blauw-diep); }

/* ---------- Uitzicht ---------- */
/* Volle band boven de footer: hetzelfde verloop als de footer, dus foto en
   footer sluiten als een blok af. Geen radius of schaduw, anders dan de
   fotootjes in .grid, want dit is een veld en geen kaartje.
   De foto houdt zijn eigen verhouding, zodat de toren, de bomen en de boten
   in beeld blijven. Voorbij 64rem groeit hij niet verder mee: op een breed
   scherm werd hij anders een uitvergrote strook lucht. */
.uitzicht { margin: 0 auto; max-width: 64rem; }
.uitzicht img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1800 / 1241; object-fit: cover; object-position: center 8%;
}
.uitzicht figcaption {
  background: linear-gradient(120deg, var(--blauw-diep) 0%, #004a7a 100%);
  color: rgba(255,255,255,0.9); font-size: 0.9375rem; font-weight: 600;
  padding: 0.95rem 0 0.2rem;
}

footer {
  background: linear-gradient(120deg, var(--blauw-diep) 0%, #004a7a 100%);
  color: #fff; padding: 1.5rem 0; font-weight: 700; font-size: 0.9375rem;
}

@media (max-width: 30rem) {
  .onder { gap: 1rem; }
  .onder img { width: 68px; height: 68px; }
}