/* 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 rekensom. De bedragen zijn het onderwerp van deze sectie, dus ze staan
   groot en op een eigen regel, niet weggewerkt in een zin. */
.lp-som{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px}
.lp-som-deel{text-align:center}
.lp-som-deel strong{display:block;font-size:clamp(34px,5vw,58px);font-weight:800;
  letter-spacing:-.03em;line-height:1.05;color:var(--tekst);
  /* Tijdens het optellen wisselen de cijfers elke frame. Tabellencijfers en
     een vaste minimumbreedte houden de regel stil terwijl de waarde loopt. */
  font-variant-numeric:tabular-nums}
#som-bezoekers{min-width:5.4ch}
#som-uitkomst{min-width:6.4ch}
.lp-som-klaar{animation:som-tik .45s ease}
@keyframes som-tik{50%{transform:scale(1.07)}}
.lp-som-deel span{display:block;margin-top:8px;font-size:15px;color:var(--tekst-zacht)}
.lp-som-uitkomst strong{color:var(--oranje)}
.lp-som-teken{font-size:clamp(24px,3vw,34px);font-weight:700;color:var(--tekst-zacht)}
.lp-som-schaal{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:52px}
.lp-som-schaal div{border:1px solid var(--lijn);background:#fff;border-radius:16px;
  padding:22px 34px;text-align:center;min-width:210px}
.lp-som-schaal strong{display:block;font-size:16px;color:var(--tekst-zacht);font-weight:600}
.lp-som-schaal span{display:block;margin-top:8px;font-size:clamp(26px,3vw,34px);font-weight:800;
  letter-spacing:-.02em;color:var(--tekst);font-variant-numeric:tabular-nums}
.lp-noot{max-width:44em;margin:34px auto 0;text-align:center;font-size:13.5px;font-style:italic;
  color:var(--tekst-zacht)}

/* De rekenhulp onder de vaste som: eigen aantallen invullen, dezelfde
   formule. Het tarief staat er klein onder, de uitkomst is het onderwerp. */
.lp-calc-kop{margin:56px 0 22px;text-align:center;font-size:20px;font-weight:800;
  letter-spacing:-.015em;color:var(--tekst)}
.lp-calc{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--lijn);
  border-radius:18px;padding:28px}
.lp-calc-invoer{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lp-calc-uit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;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(24px,3vw,32px);font-weight:800;
  letter-spacing:-.02em;color:var(--tekst);line-height:1.1;font-variant-numeric:tabular-nums}
.lp-calc-totaal strong{color:var(--oranje)}
.lp-calc-tarief{margin:20px 0 0;text-align:center;font-size:13px;color:var(--tekst-zacht)}
@media (max-width:560px){.lp-calc-invoer,.lp-calc-uit{grid-template-columns:1fr}}

/* 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}
  .lp-som{gap:18px}
}
@media (max-width:560px){
  .lp-nav a:not(.lp-knop){display:none}
  .lp-vier{grid-template-columns:1fr}
  .lp-som{flex-direction:column;gap:14px}
  .lp-som-teken{line-height:1}
  .lp-verschuiving p{gap:10px}
}