/* sponsorinkomsten.css - alleen voor /sponsorinkomsten/.
 *
 * Deze landingspagina staat los van de website. Ze leent de lettertypes en de
 * kleurvariabelen uit style.css, maar krijgt hier haar eigen ritme: meer
 * witruimte, grotere koppen en minder tekst per scherm dan de rest van de site.
 * Alles staat onder .lp, zodat geen enkele regel hiervan de gewone pagina's
 * kan raken.
 */

.lp{background:#fff}
.lp main{display:block}
.lp .lp-sectie{max-width:1120px;margin:0 auto;padding:96px 28px}
.lp .lp-sectie-vlak{max-width:none;background:var(--vlak,#faf7f5)}
.lp .lp-sectie-vlak>*{max-width:1120px;margin-left:auto;margin-right:auto}
.lp .lp-breed{max-width:1120px;margin:0 auto;padding:0 28px}

/* Header: logo links, drie items rechts. Meer hoort er niet te staan. */
.lp-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--lijn)}
.lp-balk{max-width:1120px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.lp-logo img{display:block;height:32px;width:auto}
.lp-nav{display:flex;align-items:center;gap:26px}
/* De knop in de navigatie moet hier buiten blijven: .lp-nav a is specifieker
   dan .lp-knop, dus zonder deze uitzondering kreeg de oranje knop de donkere
   navigatiekleur en haalde de tekst maar 3,39:1. */
.lp-nav a:not(.lp-knop){text-decoration:none;color:var(--tekst);font-weight:600;font-size:15px}
.lp-nav a:not(.lp-knop):hover{color:var(--oranje)}

.lp-knop{display:inline-block;background:var(--oranje);color:#fff;text-decoration:none;
  font-weight:700;border-radius:999px;padding:15px 28px;font-size:16px;border:0;cursor:pointer;
  transition:background .16s,transform .16s}
.lp-knop:hover{background:var(--oranje-donker);transform:translateY(-1px);color:#fff}
.lp-knop-klein{padding:10px 20px;font-size:14.5px}
.lp-knop-groot{padding:18px 34px;font-size:17px}
.lp-tekstknop{align-self:center;color:var(--tekst-zacht);text-decoration:none;font-weight:600;
  font-size:15px;border-bottom:1px solid var(--lijn);padding-bottom:2px}
.lp-tekstknop:hover{color:var(--tekst);border-color:var(--tekst-zacht)}
.lp-tekstknop-licht{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.3)}
.lp-tekstknop-licht:hover{color:#fff;border-color:#fff}
.lp-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:34px}

/* Hero: tekst links, beeld rechts. Op mobiel komt de tekst eerst, zodat de
   belofte en de knop in het eerste scherm staan. */
.lp-hero{max-width:1240px;margin:0 auto;padding:80px 28px 72px;display:grid;
  grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lp-hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.03em;margin:0}
.lp-lead{margin:24px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--tekst-zacht);
  max-width:30em}
.lp-hero-beeld img{width:100%;height:auto;border-radius:20px;display:block;
  /* De herofoto is een panorama van 2,4 op 1. Onbewerkt zou hij naast de kop
     als dunne strook staan. De uitsnede houdt de telefoon met de campagne en
     de bezoeker in beeld; links valt de bar buiten kader. */
  aspect-ratio:4/3;object-fit:cover;object-position:62% center}

.lp-bovenregel{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--oranje)}
.lp h2{font-size:clamp(28px,3.4vw,42px);line-height:1.14;letter-spacing:-.025em;margin:0 0 22px}
.lp-kop-midden{text-align:center;margin-bottom:44px}
.lp-midden-tekst{max-width:44em;margin:0 auto 44px;text-align:center;font-size:18px;
  line-height:1.6;color:var(--tekst-zacht)}
.lp p{font-size:17px;line-height:1.65;color:var(--tekst-zacht)}

.lp-tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lp-figuur{margin:0}
.lp-figuur img{width:100%;height:auto;border-radius:20px;display:block}

.lp-drie{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.lp-kaart{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:32px 28px}
.lp-kaart-label{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--oranje)}
.lp-kaart-claim{margin:0 0 12px;font-size:20px;font-weight:800;letter-spacing:-.015em;
  line-height:1.3;color:var(--tekst)}
.lp-kaart-tekst{margin:0;font-size:15.5px}

/* De rekenhulp. Drie invoervelden, twee tussenuitkomsten en een totaal, met
   daaronder de formule voluit. De bedragen zijn het onderwerp van deze sectie,
   dus die staan groot en op een eigen regel. */
.lp-calc{margin:0 auto;background:#fff;border:1px solid var(--lijn);
  border-radius:18px;padding:28px}
/* Even zwaar als de regel .lp .lp-sectie-vlak>* bovenin, en later in het
   bestand, dus deze wint. Zonder dit wordt de kaart 1120 breed en staat het
   totaal verloren in een veld wit. */
.lp .lp-sectie-vlak>.lp-calc{max-width:760px}
.lp-calc-invoer{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.lp-calc-uit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;text-align:center}
.lp-calc-uit span{display:block;font-size:13.5px;color:var(--tekst-zacht)}
.lp-calc-uit strong{display:block;margin-top:5px;font-size:clamp(22px,3vw,30px);font-weight:800;
  letter-spacing:-.02em;color:var(--tekst);line-height:1.1;font-variant-numeric:tabular-nums}

/* Het totaal krijgt een eigen vlak. Twee tussenuitkomsten en een eindbedrag
   in dezelfde rij lezen als drie gelijkwaardige getallen, en dat is het niet. */
.lp-calc-eind{margin-top:26px;padding-top:24px;border-top:1px solid var(--lijn);text-align:center}
.lp-calc-eind span{display:block;font-size:14px;font-weight:600;color:var(--tekst-zacht)}
.lp-calc-eind strong{display:block;margin-top:6px;font-size:clamp(38px,6vw,60px);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;color:var(--oranje);font-variant-numeric:tabular-nums}
.lp-calc-formule{margin:12px 0 0;font-size:13px;color:var(--tekst-zacht);
  font-variant-numeric:tabular-nums;text-wrap:balance}
.lp-som-klaar{animation:som-tik .45s ease}
@keyframes som-tik{50%{transform:scale(1.05)}}

/* Het vaste tarief onder de kaart, en daaronder de nuancering. */
.lp-som-label{margin:20px 0 0;text-align:center;font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tekst-zacht)}
.lp-noot{max-width:44em;margin:22px auto 0;text-align:center;font-size:13.5px;font-style:italic;
  color:var(--tekst-zacht)}

/* De schuif voor het bereikpercentage. Het getal staat ernaast en niet in de
   duim, want tijdens het slepen ligt er een vinger op de duim. */
/* 56 pixels hoog, precies zoveel als een invoerveld ernaast, zodat de drie
   bedieningen op dezelfde lijn staan en niet een van de drie omhoog zakt. */
.lp-schuif{display:flex;align-items:center;gap:14px;min-height:56px}
.lp-schuif input[type=range]{flex:1;min-width:0;height:26px;margin:0;padding:0;
  background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.lp-schuif input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:var(--lijn)}
.lp-schuif input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--lijn)}
.lp-schuif input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--oranje);
  border:3px solid #fff;box-shadow:0 1px 5px rgba(28,28,28,.3)}
.lp-schuif input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--oranje);border:3px solid #fff;box-shadow:0 1px 5px rgba(28,28,28,.3)}
.lp-schuif input[type=range]:focus-visible{outline:2px solid var(--oranje);outline-offset:4px}
.lp-schuif output{min-width:3.6ch;font-size:16px;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums}

/* Plus en min naast het aantal berichten. 44 bij 44 zodat een duim ze raakt. */
.lp-teller{display:flex;align-items:center;gap:8px}
.lp-teller input{flex:1;min-width:0;text-align:center}
.lp-teller-knop{flex-shrink:0;width:44px;height:44px;font:inherit;font-size:22px;line-height:1;
  border:1px solid var(--lijn);border-radius:12px;background:#fff;color:var(--tekst);
  cursor:pointer;transition:border-color .15s,background .15s}
.lp-teller-knop:hover{border-color:var(--oranje);background:var(--oranje-licht)}
.lp-teller-knop:focus-visible{outline:2px solid var(--oranje);outline-offset:1px}

/* Twee kolommen zodra drie te smal worden, en een kolom op een telefoon.
   De schuif en de teller vullen dan de hele breedte, wat ze juist prettiger
   bedienbaar maakt. */
@media (max-width:820px){.lp-calc-invoer{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lp-calc-invoer,.lp-calc-uit{grid-template-columns:1fr}
  .lp-calc{padding:22px 18px}}
/* Zolang de velden naast elkaar staan is er ruimte voor twee regels label
   gereserveerd. "Welk deel ontvangt het bericht?" past niet op een regel, en
   zonder deze ruimte zakt de schuif een halve regel onder de twee velden
   ernaast. Onder de 560 staan de velden onder elkaar en zou het alleen maar
   een gat boven elke bediening opleveren. */
@media (min-width:561px){.lp-calc-invoer .lp-veld label{min-height:3.2em}}

/* Beeldband: een panoramafoto tussen twee secties, minder verticale ruimte
   dan een gewone sectie zodat hij als adempauze leest en niet als hoofdstuk. */
.lp-sectie-band{padding-top:0;max-width:1240px}
.lp-sectie-band figcaption{margin-top:14px;text-align:center;font-size:14.5px;
  color:var(--tekst-zacht)}

.lp-verschuiving{display:grid;gap:18px;max-width:760px;margin:0 auto}
.lp-verschuiving p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:16px;font-size:clamp(22px,2.8vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--tekst)}
.lp-verschuiving em{font-style:normal;font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tekst-zacht)}
.lp-naar{color:var(--oranje)}

.lp-vier{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.lp-tegel{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:28px 24px}
.lp-tegel-kop{margin:0 0 10px;font-size:19px;font-weight:800;letter-spacing:-.015em;color:var(--tekst)}
.lp-tegel-claim{margin:0 0 8px;font-size:15.5px;font-weight:700;color:var(--tekst);line-height:1.45}
.lp-tegel-tekst{margin:0;font-size:15px}
.lp-slotzin{margin-top:44px;margin-bottom:0;font-weight:600;color:var(--tekst)}
.lp-woorden-midden{justify-content:center}

.lp-drie-woorden{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.lp-drie-woorden span{border:1px solid var(--lijn);border-radius:999px;padding:11px 20px;
  font-size:15px;font-weight:700;color:var(--tekst)}

/* Slot op volle breedte met donkere achtergrond. De primaire knop moet hier
   duidelijk dominant zijn over de tekstlink ernaast. */
.lp-slot{background:#1a120d;color:#fff;padding:104px 0}
.lp-slot h2{color:#fff;max-width:16em}
.lp-slot p{color:rgba(255,255,255,.74);max-width:40em;font-size:18px}

.lp-form{max-width:560px;margin:0 auto;display:grid;gap:20px}
.lp-veld{display:grid;gap:8px}
.lp-veld label{font-size:14.5px;font-weight:700;color:var(--tekst)}
.lp-optioneel{font-weight:500;color:var(--tekst-zacht)}
.lp-veld input{font:inherit;font-size:16px;padding:14px 16px;border:1px solid var(--lijn);
  border-radius:12px;background:#fff;color:var(--tekst)}
.lp-veld input:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:transparent}
.lp-form button{justify-self:start;margin-top:6px}
.lp-form-melding{margin:0;min-height:1.4em;font-size:15px;font-weight:600}
.lp-form-melding.fout{color:#b3261e}
.lp-form-melding.goed{color:#136c34}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lp-footer{background:#1a120d;color:rgba(255,255,255,.68);padding:34px 0}
.lp-footer .lp-breed{display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  justify-content:space-between;font-size:14px}
.lp-footer nav{display:flex;flex-wrap:wrap;gap:22px}
.lp-footer a{color:rgba(255,255,255,.72);text-decoration:none}
.lp-footer a:hover{color:#fff}
.lp-footer img{display:block;height:26px;width:auto}

@media (max-width:900px){
  .lp .lp-sectie{padding:64px 22px}
  .lp-hero{grid-template-columns:1fr;gap:36px;padding:44px 22px 56px}
  .lp-tweeluik{grid-template-columns:1fr;gap:34px}
  /* Beeld altijd onder de tekst, ook waar het in de bron eerst staat. */
  .lp-tweeluik .lp-figuur{order:2}
  .lp-drie{grid-template-columns:1fr;gap:20px}
  .lp-vier{grid-template-columns:1fr 1fr;gap:18px}
  .lp-slot{padding:72px 0}
}
@media (max-width:560px){
  .lp-nav a:not(.lp-knop){display:none}
  .lp-vier{grid-template-columns:1fr}
  .lp-verschuiving p{gap:10px}
}

/* Twee productschermen naast elkaar onder "Waarom sponsors hiervoor willen
   betalen". Op een telefoon onder elkaar, want twee telefoonschermen naast
   elkaar op 375px zijn allebei onleesbaar. */
.lp-schermen{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:860px;
  margin:56px auto 0;align-items:start}
.lp-schermen figure{margin:0;text-align:center}
.lp-schermen img{width:100%;height:auto;border-radius:18px;border:1px solid var(--lijn);
  box-shadow:0 18px 40px rgba(28,28,28,.10)}
.lp-schermen figcaption{margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--tekst-zacht)}
@media (max-width:640px){.lp-schermen{grid-template-columns:1fr;gap:38px;max-width:420px}}