/* ==========================================================================
   Enter the Paddock · landingspagina
   van Mossel × Alpine — Alpine Store Amsterdam

   De maten komen uit het ontwerp, opgemeten als percentage van de paginabreedte
   en hier vastgelegd in vw met een boven- en ondergrens. Zo houdt de pagina op
   elke schermbreedte dezelfde verhoudingen als de PDF.

     contentkolom  56,5%
     ENTER         18,5%      showcar hero      19,0%
     THE PADDOCK   17,0%      showcar programma 14,4%
     tijdlijnregel 22,8%      koppen ("U bent uitgenodigd") 35,6%
     gradiëntbaan  21,7% dik, onder 44 graden

   Voor de header, de uitnodiging en het programma zijn losse uitsneden
   aangeleverd; die gaan voor op de paginabrede PDF waar ze afwijken.

   Let op: de beeldbestanden van de auto's hebben 10 tot 15% transparante rand.
   De maten hieronder slaan op de ZICHTBARE auto, niet op het beeldvak — anders
   staat elke auto ruim een tiende te klein.
   ========================================================================== */

/* --- Huisletter ---------------------------------------------------------- */
@font-face{font-family:'Alpine Proto Type';src:url('../fonts/alpine-proto-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Alpine Proto Type';src:url('../fonts/alpine-proto-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Alpine Proto Type';src:url('../fonts/alpine-proto-700-italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

/* --- Tokens -------------------------------------------------------------- */
:root{
  --nacht:#050e2b;
  --nacht-diep:#03081c;
  --blauw-kaart:#0a142f;

  --alpine-blauw:#0000ff;
  --alpine-blauw-licht:#2a4dff;
  --alpine-blauw-donker:#0000cc;
  --roze:#e9a3be;

  --wit-80:#ffffffcc;
  --wit-70:#ffffffb3;
  --wit-55:#ffffff8c;
  --wit-40:#ffffff66;
  --wit-14:#ffffff24;
  --wit-08:#ffffff14;
  --wit-05:#ffffff0d;

  /* 56,5% van de paginabreedte in het ontwerp */
  --kolom:815px;
  --rand:24px;
  /* de werkelijke kolombreedte; de zwevende auto's rekenen hierin, zodat ze
     ook op brede schermen tegen de kaart aan blijven staan */
  --kb:min(var(--kolom), calc(100vw - 2 * var(--rand)));

  --soepel:cubic-bezier(.22,.61,.36,1);
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  font-family:'Alpine Proto Type',Arial,Helvetica,sans-serif;
  font-weight:300;
  color:#fff;
  background:var(--nacht);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body.intro-actief{overflow:hidden}

img,svg,video{max-width:100%;display:block}
[hidden]{display:none !important}
.lockup__vm{aspect-ratio:187.5/28.3}
.lockup__alpine{aspect-ratio:535.38/48.63}

:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* --- Logolockup ---------------------------------------------------------- */
.lockup{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,24px)}
.lockup__vm{height:clamp(19px,2.3vw,26px);width:auto}
.lockup__alpine{height:clamp(11px,1.35vw,15px);width:auto}
.lockup__streep{width:1px;height:22px;background:var(--wit-40)}

/* ==========================================================================
   1 · Envelop
   ========================================================================== */
.intro{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:var(--rand);
  background:
    radial-gradient(120% 90% at 50% 8%, #16306e 0%, #0a1a46 42%, var(--nacht) 78%),
    var(--nacht);
  transition:opacity .8s var(--soepel), transform .8s var(--soepel), visibility .8s;
}
.intro__licht{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:
    linear-gradient(112deg, transparent 44%, #4d7bd633 50%, transparent 57%),
    linear-gradient(112deg, transparent 62%, #2f56ad26 67%, transparent 73%);
}
/* Het logo maakt plaats zodra de brief omhoog komt; anders schuift de witte
   kaart eroverheen. Dat gebeurt op elke schermmaat, want de tussenruimte
   rekent in schermhoogte en de brief in schermbreedte. */
.lockup--intro{transition:opacity .4s ease, transform .5s var(--soepel)}
.intro.is-open .lockup--intro{opacity:0;transform:translateY(-10px)}

.intro__inhoud{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(38px,7vh,72px);
  width:100%;max-width:760px;
}

.envelop{
  position:relative;
  width:min(80vw,480px);
  aspect-ratio:1.5/1;
  perspective:1600px;
  cursor:pointer;
}

/* --- de envelop zelf ----------------------------------------------------- */
.envelop__achter{
  position:absolute;inset:0;z-index:1;
  border-radius:4px;
  background:linear-gradient(158deg,#1c2b5a 0%,#111d42 46%,#0a1330 100%);
  box-shadow:0 34px 74px #00000085, inset 0 1px 0 #ffffff1f;
}

/* Voorkant: de twee zijflappen, met de onderflap eroverheen. De lichte lijn
   op de vouwranden komt van een drop-shadow, die het clip-pad wél volgt. */
.envelop__voor{
  position:absolute;inset:0;z-index:3;
  clip-path:polygon(0 0, 50% 47%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(to bottom right,#18265350 0 50%,#0000 50%),
    linear-gradient(to bottom left, #121e4750 0 50%,#0000 50%),
    linear-gradient(176deg,#152147,#0b1534);
  filter:drop-shadow(0 -1px 0 #ffffff1a);
}
.envelop__voor::after{
  content:"";position:absolute;inset:0;
  clip-path:polygon(0 100%, 50% 43%, 100% 100%);
  background:linear-gradient(0deg,#16244f,#101c42);
  filter:drop-shadow(0 -1px 0 #ffffff24);
}

/* Bovenklep, dicht een driehoek naar beneden. Scharniert aan de bovenrand. */
.envelop__klep{
  position:absolute;top:0;left:0;right:0;height:47%;z-index:4;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(166deg,#22326a,#131f48 70%,#0e1839);
  transform-origin:top center;
  transform-style:preserve-3d;
  /* z-index springt halverwege: daarna staat de klep achter de brief, zoals
     bij een echte envelop die je openslaat */
  transition:transform .85s var(--soepel), z-index 0s linear .42s;
  filter:drop-shadow(0 2px 3px #00000059);
}

/* --- de brief ------------------------------------------------------------ */
.envelop__brief{
  position:absolute;z-index:2;
  left:4.5%;right:4.5%;top:40%;bottom:4%;
  border-radius:2px;
  background:
    linear-gradient(168deg,#ffffff 0%,#f4f6fa 52%,#e7ebf4 100%);
  box-shadow:0 12px 26px #00000066, inset 0 0 0 1px #ffffff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5% 9%;
  font-size:calc(clamp(7px,1.65vw,11px) + 3px);
  transition:transform 1s var(--soepel) .3s;
}
/* het merkteken is wit in het bestand; als masker kan het elke kleur krijgen */
.envelop__merk{
  width:3.6em;aspect-ratio:408.24/205.4;
  background:var(--alpine-blauw);
  -webkit-mask:url('../img/alpine-arrow.svg') center/contain no-repeat;
  mask:url('../img/alpine-arrow.svg') center/contain no-repeat;
}
.envelop__kop{
  margin-top:.9em;
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:1.75em;line-height:1.05;letter-spacing:.01em;
  color:#0b1533;text-align:center;
}
.envelop__streep{
  width:38%;height:.28em;margin:.9em 0 .8em;
  background:linear-gradient(90deg,var(--alpine-blauw),#9d7fc0 60%,var(--roze));
}
.envelop__regel{
  font-weight:300;font-size:.95em;letter-spacing:.14em;text-transform:uppercase;
  color:#55618a;text-align:center;
}
/* een paar vage regels, zodat het als een geschreven brief leest */
.envelop__tekstlijnen{
  width:66%;height:1.6em;margin-top:.9em;
  background:repeating-linear-gradient(180deg,#0b153314 0 1px,#0000 1px 0.8em);
}

/* --- zegel --------------------------------------------------------------- */
.zegel{
  position:absolute;top:47%;left:50%;z-index:5;
  width:clamp(58px,13%,84px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,var(--alpine-blauw-licht),var(--alpine-blauw) 52%,var(--alpine-blauw-donker));
  box-shadow:0 0 0 5px #0000ff26, 0 8px 22px #00000073;
  cursor:pointer;
  transition:transform .45s var(--soepel), opacity .4s ease;
}
.zegel img{width:50%;height:auto}
.zegel__ring{position:absolute;inset:-5px;border-radius:50%;border:1px solid #ffffff4d}
.zegel:hover{transform:translate(-50%,-50%) scale(1.07)}

/* --- openen -------------------------------------------------------------- */
.intro.is-open .zegel{transform:translate(-50%,-50%) scale(.35);opacity:0;pointer-events:none}
.intro.is-open .envelop__klep{transform:rotateX(-168deg);z-index:0}
.intro.is-open .envelop__brief{transform:translateY(-96%)}
.intro.is-open .intro__hint{opacity:0}
.intro.is-weg{opacity:0;transform:scale(1.12);visibility:hidden;pointer-events:none}

.intro__hint{
  font-weight:700;text-transform:uppercase;
  font-size:calc(clamp(11px,1.2vw,13px) + 3px);letter-spacing:.16em;
  color:var(--wit-80);text-align:center;
  transition:opacity .4s ease;
}

/* ==========================================================================
   2 · Landingspagina
   ========================================================================== */
.pagina{position:relative;opacity:0;transition:opacity .9s var(--soepel)}
.pagina.is-zichtbaar{opacity:1}

.achtergrond{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.achtergrond__gloed{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 55% at 50% -6%, #17337a 0%, #0a1a46 45%, var(--nacht) 80%),
    linear-gradient(180deg,var(--nacht) 0%,var(--nacht-diep) 100%);
}
.achtergrond__streek{position:absolute;inset:0}
.achtergrond__streek--1{background:linear-gradient(112deg,transparent 40%,#4d7bd62b 47%,transparent 55%)}
.achtergrond__streek--2{background:linear-gradient(112deg,transparent 66%,#2f56ad1f 72%,transparent 79%)}

/* logo begint op 4,4% van de breedte, als in het ontwerp */
.titel{
  font-weight:700;font-style:italic;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.04;
}
.titel--groot{font-size:calc(clamp(33px,4.68vw,68px) + 3px)}

/* logo begint op 4,4% van de breedte, als in het ontwerp */
.kop-balk{padding:clamp(24px,4.4vw,63px) var(--rand) 0}

/* --- Hero ---------------------------------------------------------------- */
/* De hero is een video die het beeldmerk in beweging toont. Geen padding en
   geen vaste hoogte: het beeld loopt van rand tot rand en houdt zijn eigen
   verhouding, zodat er niets wordt afgesneden. */
.hero{position:relative;margin-bottom:10%;overflow-x:clip;padding:0}
/* De video heeft een alfakanaal: de blauwe achtergrond is eruit gesleuteld,
   zodat de achtergrond van de pagina zelf doorloopt. Daarom hier géén eigen
   achtergrondkleur; die zou de doorzichtigheid juist weer dichtzetten. */
.hero__video{
  display:block;width:75%;margin:0 auto;height:auto;
  background:transparent;
}

/* --- Scroltip onder in de kop -------------------------------------------
   Dezelfde schuine blokjes als onder "ENTER" in het beeldmerk: skewX(-14deg),
   in de lichte huisblauw. Ze lichten na elkaar op, wat de blik naar beneden
   trekt zonder dat er een vreemd element bij komt. */
.scrolltip{
  position:absolute;left:50%;bottom:clamp(10px,2.6vw,40px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(8px,.9vw,13px);
  text-decoration:none;color:var(--wit-55);
  transition:color .3s ease;
}
.scrolltip:hover,.scrolltip:focus-visible{color:#fff}
.scrolltip__tekst{
  font-weight:700;text-transform:uppercase;
  font-size:calc(clamp(9px,.76vw,11px) + 3px);
  letter-spacing:.28em;
  /* de spatiëring staat ook achter de laatste letter; die inspringing haalt
     het woord weer op het midden */
  text-indent:.28em;
}
.scrolltip__strepen{display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.3vw,5px)}
.scrolltip__strepen i{
  width:clamp(16px,1.5vw,22px);height:clamp(3px,.28vw,4px);
  background:var(--alpine-blauw-licht);
  transform:skewX(-14deg);
  opacity:.28;
  animation:scrolltipZak 1.7s var(--soepel) infinite;
}
.scrolltip__strepen i:nth-child(2){animation-delay:.17s}
.scrolltip__strepen i:nth-child(3){animation-delay:.34s}
@keyframes scrolltipZak{0%,58%,100%{opacity:.28}28%{opacity:1}}

/* Wel voor voorleessoftware, niet in beeld. */
.alleen-voorlezer{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* De regels hieronder horen bij de tekstversie van de hero (titel + showcar).
   Die staat nu niet in de HTML; ze blijven staan zodat terugzetten één
   wijziging in index.html is. */
.hero__binnen{
  position:relative;
  display:flex;justify-content:center;align-items:flex-start;
  transform:translateX(.6vw);   /* de groep staat in het ontwerp iets rechts van het midden */
}
.hero__titel{
  position:relative;z-index:2;flex:none;
  display:flex;flex-direction:column;align-items:flex-start;
  font-weight:700;font-style:italic;text-transform:uppercase;line-height:.88;
}
.hero__enter{position:relative;display:block}
.hero__woord{
  position:relative;z-index:2;display:block;
  font-size:calc(clamp(57px,8.9vw,128px) + 3px);
  letter-spacing:-.005em;
}
.hero__blok{
  position:absolute;z-index:1;
  left:-3%;right:-25%;top:12%;height:62%;
  transform:skewX(-14deg);
  background:linear-gradient(96deg,#0f5fd0 0%,#3d6dc8 38%,#9d7fc0 68%,#efa6c2 100%);
  opacity:.92;
}
/* vijf blokjes onder "ENTER" */
.hero__strepen{display:flex;gap:clamp(4px,.9vw,13px);margin:.1em 0 .06em}
.hero__strepen i{
  width:clamp(13px,2.36vw,34px);height:clamp(7px,1.5vw,22px);
  background:var(--alpine-blauw-licht);
  transform:skewX(-14deg);
}
.hero__strepen i:nth-child(2){opacity:.88}
.hero__strepen i:nth-child(3){opacity:.76}
.hero__strepen i:nth-child(4){opacity:.64}
.hero__strepen i:nth-child(5){opacity:.5}
.hero__paddock{
  position:relative;left:-1.3vw;   /* steekt links buiten "ENTER", als in het ontwerp */
  font-size:calc(clamp(23px,3.38vw,49px) + 3px);
  letter-spacing:.02em;
}
/* rechts uitgelijnd onder "THE PADDOCK" */
.hero__bij{
  align-self:flex-end;
  margin:.34em clamp(8px,4vw,58px) 0 0;
  font-size:calc(clamp(13px,1.85vw,27px) + 3px);
  letter-spacing:.03em;
}
.hero__auto{
  position:relative;z-index:3;flex:none;
  width:clamp(167px,19.35vw,285px);
  margin:-3.4vw 0 0 -4.5vw;      /* overlapt "ENTER" precies als in het ontwerp */
  transform:rotate(-8deg);
  filter:drop-shadow(0 22px 40px #00000073);
  pointer-events:none;
}
/* zolang de foto ontbreekt: de nagetekende showcar in zijaanzicht */
.hero__auto.is-terugval{width:clamp(210px,26vw,380px);margin:-2vw 0 0 -7vw;transform:rotate(-13deg) scaleX(-1)}

/* --- Uitnodiging --------------------------------------------------------- */
.uitnodiging{
  position:relative;overflow-x:clip;
  padding:clamp(26px,4vw,60px) var(--rand) clamp(48px,7vw,104px);
  text-align:center;
}
/* boven de zweefzone, zodat een auto de kop nooit kan overdekken */
.uitnodiging > .titel{position:relative;z-index:2;margin-bottom:clamp(28px,4.4vw,58px)}
.uitnodiging__blok{position:relative;z-index:2;max-width:var(--kolom);margin:0 auto}

.kaart{background:var(--blauw-kaart);border:1px solid var(--wit-08)}
.kaart--tekst{
  position:relative;z-index:2;
  padding:clamp(30px,4.6vw,66px) clamp(20px,3.4vw,48px) clamp(28px,4.6vw,66px);
  text-align:center;
}
.kaart__kop{
  font-weight:700;font-size:calc(clamp(14px,1.89vw,27px) + 3px);line-height:1.4;
}
.kaart__tekst{
  font-weight:300;font-size:calc(clamp(12px,1.15vw,16.5px) + 3px);line-height:2.2;
  color:var(--wit-70);
  max-width:100%;margin:clamp(12px,1.5vw,20px) auto 0;
}

/* zwevende auto's, 15,2% van de paginabreedte */
.zweefauto{
  position:absolute;z-index:1;pointer-events:none;
  width:clamp(120px,15.2vw,224px);
  background:center/contain no-repeat;
  filter:drop-shadow(0 18px 34px #00000066);
}
/* De zone is precies zo breed als de contentkolom en staat gecentreerd. Alle
   auto's rekenen hierin, dus ze flankeren de kaart op elke schermbreedte —
   ook boven 1440px, waar de kolom zijn maximum bereikt. */
.zweefzone{
  position:absolute;top:0;bottom:0;left:50%;
  width:min(var(--kolom), 100% - 2 * var(--rand));
  transform:translateX(-50%);
  z-index:1;pointer-events:none;
}

/* Posities uit de aangeleverde uitsnede, omgerekend naar de kolombreedte.
   Verticaal in --kb omdat een percentage in `top` op de hoogte zou slaan. */
/* Deze auto staat op aanwijzing van de klant, niet op de opgemeten waarden. */
.zweefauto--links{
  background-image:url('../img/auto-a290.webp');aspect-ratio:381/353;
  top:15%;left:-165px;width:45%;
  transform:rotate(-1deg);
}
.zweefauto--rechts{
  background-image:url('../img/auto-a390.webp');aspect-ratio:430/393;
  top:65%;left:76.58%;width:40.44%;
  transform:rotate(0deg);
}
/* In deze uitsnede staat links de F1-showcar, niet een personenauto. */
.zweefauto--onder-links{
  background-image:url('../img/f1-showcar.webp');aspect-ratio:473/443;
  top:40%;left:-25.4%;width:40%;
  transform:none;
}
/* staat achter het formulier en is alleen als waas door het matglas te zien */
.zweefauto--achter-formulier{
  background-image:url('../img/auto-a390.webp');aspect-ratio:430/393;
  top:40%;left:30%;width:40%;
  transform:none;
  opacity:.55;
}
.zweefauto--onder-rechts{
  background-image:url('../img/auto-a290.webp');aspect-ratio:381/353;
  top:40%;left:87.8%;width:40%;
  transform:none;
}

/* --- Knoppen ------------------------------------------------------------- */
.knop{
  display:inline-block;
  border:0;border-radius:2px;
  padding:clamp(12px,1.35vw,17px) clamp(24px,3.4vw,44px);
  font:inherit;font-weight:700;text-transform:uppercase;
  font-size:calc(clamp(11px,1.05vw,14px) + 3px);letter-spacing:.11em;
  color:#fff;text-decoration:none;text-align:center;cursor:pointer;
  transition:transform .3s var(--soepel), box-shadow .3s ease, filter .3s ease;
}
/* Eén vlakke kleur, dezelfde als de knop in de Praktisch-kaart. Bij zweven
   gaat hij een tint donkerder in plaats van lichter: zo blijft #0000ff de
   rusttoestand en niet het lichtste puntje van een verloop. */
.knop--blauw{
  background:var(--alpine-blauw);
  box-shadow:0 12px 30px #0000ff40;
  transition:transform .3s var(--soepel), box-shadow .3s ease, background-color .2s ease;
}
.knop--blauw:hover{transform:translateY(-2px);box-shadow:0 16px 38px #0000ff5c;background:var(--alpine-blauw-donker)}
.knop--vol{width:100%}
.kaart--tekst .knop{
  margin-top:clamp(18px,3.4vw,49px);
  padding:clamp(11px,1.28vw,18.5px) clamp(30px,6.7vw,96px);
  font-size:calc(clamp(11px,1.15vw,17px) + 3px);
}

/* --- Programma ----------------------------------------------------------- */
.programma{
  position:relative;overflow:hidden;
  padding:clamp(34px,5vw,76px) var(--rand) clamp(44px,6.5vw,96px);
  margin-top: 15%;
  margin-bottom: 15%;
}
/* De baan loopt van linksonder (roze) naar rechtsboven (blauw), met de
   showcar er in dezelfde richting op. */
/* Het Alpine-teken groot als watermerk. Staat vóór de baan in de HTML, dus
   die valt eroverheen; het merk zelf blijft ver onder de tekst. */
.programma__merk{
  position:absolute;z-index:0;pointer-events:none;
  left:-14%;top:-16%;
  width:90%;
  aspect-ratio:1648/907;
  background:url('../img/alpine-a-groot.svg') center/contain no-repeat;
  opacity:.1;
}

.programma__streep{
  position:absolute;z-index:0;pointer-events:none;
  left:-35%;right:-6%;top:50%;
  height:clamp(30px,2.5vw,55px);
  transform:translateY(-50%) rotate(-38.5deg);
  background:linear-gradient(90deg,#efa6c2 0%,#9d7fc0 30%,#3d6dc8 64%,#0b3fc4 100%);
  /* Beide uiteinden doven uit. Het masker staat in dezelfde richting als het
     kleurverloop en werkt vóór de rotatie, dus 90deg is de lengterichting. */
  -webkit-mask-image:linear-gradient(90deg,#0000 2%,#000 34%,#000 62%,#0000 92%);
  mask-image:linear-gradient(90deg,#0000 2%,#000 34%,#000 62%,#0000 92%);
  opacity:.8;
}
.programma__auto{
  position:absolute;pointer-events:none;
  left:38.1%;top:15%;
  width:clamp(190px,23.78vw,320px);
  transform:rotate(1deg);
  filter:drop-shadow(0 16px 30px #00000073);
}
.programma__auto.is-terugval{width:clamp(150px,20vw,290px);transform:rotate(-44deg);left:32%}
.programma__binnen{position:relative;z-index:2;max-width:60%;margin:0 auto}
/* In het ontwerp staat de kop links en begint de tijdlijn er rechts naast op
   dezelfde hoogte, niet eronder. */
.programma__kop{position:absolute;top:0;left:0;margin:0}

/* Drie blokken met een kop en een alinea, trapsgewijs naar linksonder.
   Opgemeten op de aangeleverde uitsnede: het eerste blok eindigt 15,6% voorbij
   de rechterrand van de contentkolom, en de volgende blokken staan 12,6% en
   29,9% van de paginabreedte verder naar links. Die stappen zijn ongelijk —
   dat is zo in het ontwerp, omdat de blokken verschillend hoog zijn. */
.tijdlijn{list-style:none;display:flex;flex-direction:column;gap:clamp(18px,2.8vw,40px)}
.tijdlijn__item{
  width:clamp(180px,21.3vw,307px);
  margin-left:auto;margin-right:-15.3%;
}
.tijdlijn__item:nth-child(2){transform:translateX(-10.3vw)}
.tijdlijn__item:nth-child(3){transform:translateX(-21.6vw)}
.tijdlijn__titel{
  font-weight:700;text-transform:uppercase;
  font-size:calc(clamp(13px,1.16vw,17px) + 3px);line-height:1.25;letter-spacing:.04em;
}
.tijdlijn__tekst{
  font-weight:300;font-size:calc(clamp(11px,.94vw,13.5px) + 3px);line-height:1.85;
  color:var(--wit-70);margin-top:.7em;
}

/* ==========================================================================
   Praktische informatie — aangeleverde styling, letterlijk overgenomen.
   Alleen de plek verschilt: de regels staan hier in plaats van in een <style>
   in de body, en het lettertype komt via een <link> in de head.
   ========================================================================== */
.alpine-banner-wrapper {
  background-color: #0e161e; /* De diepe donkerblauwe/grijze achtergrond */
  padding: 36px 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  color: #ffffff;
  box-sizing: border-box;
  width: 100%;
  margin-top: 50px;
}

/* Linker Kolom: Hoofdtitel */
.alpine-banner-heading {
  font-size:calc(29px + 3px);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0;
  flex: 1 1 150px;
  letter-spacing: 0.3px;
}

/* Middelste Kolom: Locatie Informatie */
.alpine-banner-info {
  flex: 2 1 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.alpine-banner-label {
  font-size:calc(9px + 3px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
  color: #e0e0e0; /* Lichtgrijs */
}

.alpine-banner-title {
  font-size:calc(21px + 3px);
  font-weight: 700;
  margin: 0 0 5px 0;
  letter-spacing: 0.5px;
}

.alpine-banner-address {
  font-size:calc(12px + 3px);
  font-weight: 400;
  text-transform: uppercase;
  color: #e0e0e0; /* Lichtgrijs */
  letter-spacing: 0.5px;
}

/* Rechter Kolom: Knop */
.alpine-banner-action {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.alpine-btn {
  background-color: #0000ff; /* Felblauw exact zoals in de screenshot */
  color: #ffffff;
  text-decoration: none;
  font-size:calc(15px + 3px);
  font-weight: 700;
  text-transform: uppercase;
  padding: 20px 48px;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 1px;
}

.alpine-btn:hover {
  background-color: #0000cc;
  transform: translateY(-2px);
}

/* =========================================
   MOBIEL RESPONSIVE FIXES
   ========================================= */
/* De kaart heeft ongeveer 650px nodig voor de drie onderdelen naast elkaar.
   Met een programmakolom van 60% is dat bereikt rond een venster van 1150px;
   daaronder viel de knop naar een tweede regel met een gat ernaast. Wijzigt de
   kolombreedte, dan verschuift dit omslagpunt mee. */
@media screen and (max-width: 1150px) {
  .alpine-banner-wrapper {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    gap: 25px;
  }

  /* In kolomrichting slaat flex-basis op de hoogte, niet op de breedte. Zonder
     deze regel worden de drie onderdelen 200, 300 en 200px hoog en wordt de
     knop een blok van 200px. */
  .alpine-banner-heading,
  .alpine-banner-info,
  .alpine-banner-action {
    flex: 0 0 auto;
  }

  .alpine-banner-action {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }

  .alpine-btn {
    width: 100%;
    padding: 18px 20px;
  }
}

/* --- Aanmelden ----------------------------------------------------------- */
.aanmelden{
  position:relative;overflow-x:clip;
  padding:clamp(40px,6vw,96px) var(--rand) clamp(34px,4.6vw,68px);
}
.aanmelden__binnen{position:relative;z-index:2;max-width:60%;margin:0 auto}
.aanmelden__intro{
  display:grid;gap:clamp(12px,4.2vw,60px);
  grid-template-columns:1fr;
  margin-bottom:clamp(24px,3.6vw,46px);
}
.aanmelden__uitleg{
  font-weight:300;font-size:calc(clamp(11px,.95vw,13px) + 3px);line-height:1.7;
  color:var(--wit-70);
}

.formulier{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.2vw,17px) clamp(16px,2.1vw,30px);
  padding:clamp(20px,2.7vw,39px) clamp(18px,2.2vw,32px) clamp(28px,4.1vw,59px);
  background:var(--wit-08);
  border:1px solid #ffffff2e;
  border-radius:6px;
  backdrop-filter:blur(5px);
  box-shadow:0 28px 64px #00000059;
}
.veld--breed{grid-column:1/-1}
label{
  display:block;
  font-weight:700;text-transform:uppercase;
  font-size:calc(9px + 3px);letter-spacing:.15em;color:var(--wit-70);margin-bottom:13px;
}
input[type=text],input[type=email],input[type=number],textarea{
  width:100%;
  border:1px solid var(--wit-14);border-radius:3px;
  background:var(--wit-08);
  color:#fff;font:inherit;font-size:calc(16px + 3px);font-weight:300;line-height:1.2;
  padding:7px 14px;outline:none;
  transition:border-color .25s ease, background .25s ease;
}
textarea{resize:vertical;min-height:99px;line-height:1.6}
input:focus,textarea:focus{border-color:#ffffff8c;background:#ffffff1f}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#ff6b81}

.akkoord{
  display:flex;gap:10px;align-items:flex-start;
  font-weight:300;font-size:calc(12px + 3px);line-height:1.6;letter-spacing:0;
  text-transform:none;color:var(--wit-55);margin:2px 0 0;
}
.akkoord input{margin-top:2px;width:14px;height:14px;flex:none;accent-color:var(--alpine-blauw)}

.formulier__melding{
  grid-column:1/-1;
  font-weight:300;font-size:calc(13px + 3px);line-height:1.6;
  text-align:center;color:var(--wit-70);
}
/* neemt geen ruimte in zolang er niets te melden valt */
.formulier__melding:empty{display:none}
.formulier__melding.is-goed{color:#8fe3b0}
.formulier__melding.is-fout{color:#ff9aa8}

/* --- Bevestiging na aanmelden -------------------------------------------- */
.bevestiging{
  border:0;padding:0;background:none;
  /* de globale reset zet margin:0 op alles; een modale dialoog centreert de
     browser juist met margin:auto, dus die zetten we hier terug */
  margin:auto;
  max-width:min(92vw,520px);width:100%;
  color:#fff;
  overflow:visible;
}
.bevestiging::backdrop{
  background:#03081cd9;
  backdrop-filter:blur(6px);
}
.bevestiging__kaart{
  position:relative;
  background:linear-gradient(162deg,#132048 0%,#0b1332 100%);
  border:1px solid #ffffff2e;
  border-radius:6px;
  box-shadow:0 34px 80px #00000099;
  padding:clamp(30px,4.4vw,52px) clamp(24px,3.4vw,46px) clamp(26px,3.6vw,44px);
  text-align:center;
}
.bevestiging__lockup{margin-bottom:clamp(6px,1vw,12px)}
.bevestiging__kop{
  margin-top:clamp(16px,2vw,26px);
  font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:calc(clamp(19px,2.4vw,32px) + 3px);line-height:1.1;letter-spacing:.01em;
}
.bevestiging__streep{
  display:block;width:38%;height:3px;margin:clamp(14px,1.8vw,22px) auto;
  background:linear-gradient(90deg,var(--alpine-blauw),#9d7fc0 60%,var(--roze));
}
.bevestiging__tekst{
  font-weight:300;font-size:calc(clamp(13px,1.05vw,15px) + 3px);line-height:1.75;
  color:var(--wit-70);
  max-width:38ch;margin:0 auto;
}
.bevestiging .knop{margin-top:clamp(22px,2.8vw,34px)}

/* openen met een korte beweging */
@media (prefers-reduced-motion:no-preference){
  .bevestiging[open]{animation:bevestigingIn .45s var(--soepel)}
  .bevestiging[open]::backdrop{animation:sluierIn .35s ease}
}
@keyframes bevestigingIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sluierIn{from{opacity:0}to{opacity:1}}

/* --- Voet ----------------------------------------------------------------
   Donkere balk over de volle breedte: eerst het logolockup, daarna de
   contactgegevens gecentreerd eronder. Dezelfde letter als de kaart bij het
   programma, zodat de twee blokken bij elkaar horen. */
.voet{
  padding:clamp(30px,4.4vw,58px) var(--rand) clamp(38px,5vw,64px);
  font-family:'Oswald',Arial,sans-serif;
  text-align:center;
}
.voet__gegevens{
  margin-top:clamp(26px,3.4vw,44px);
  font-style:normal;                 /* <address> staat standaard cursief */
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.55;
}
.voet__adres{font-size:calc(clamp(10px,.83vw,12px) + 3px);color:var(--wit-80)}
.voet__regel{font-size:calc(clamp(10px,.83vw,12px) + 3px);color:var(--wit-80)}
.voet__label{font-weight:700;color:#fff}
.voet__site{
  margin-top:clamp(14px,1.6vw,22px);
  font-size:calc(clamp(10px,.83vw,12px) + 3px);font-weight:700;
}
.voet a{color:inherit;text-decoration:none}
.voet__site a{color:#fff}
.voet a:hover,.voet a:focus-visible{text-decoration:underline}

/* ==========================================================================
   Responsief
   ========================================================================== */
@media (min-width:760px){
  /* Kop links, uitleg rechtsboven. De linkerkolom is ruim genoeg voor
     "Reserveer uw plek" op één regel, net als in het ontwerp. */
  .aanmelden__intro{grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);align-items:start}
}

@media (max-width:1000px){
  .tijdlijn__item{margin-right:-12%}
}

@media (max-width:900px){
  /* Onder deze breedte is er te weinig ruimte voor de trap; de blokken vielen
     er links buiten. De verschuiving staat op :nth-child-regels, die zwaarder
     wegen dan een losse klasse — vandaar dezelfde selectors hier. */
  .tijdlijn__item,
  .tijdlijn__item:nth-child(2),
  .tijdlijn__item:nth-child(3){width:100%;margin-left:0;margin-right:0;transform:none}
  /* De trap is hier weg, dus de smalle kolom van 70% heeft geen doel meer en
     zou alleen maar brede marges naast de tekst geven. Hetzelfde geldt voor de
     45% van het formulier: op telefoon bleven daar velden van 121px van over. */
  .programma__binnen{max-width:none}
  .aanmelden__binnen{max-width:none}
  /* Zonder de trap staat alles onder elkaar; gecentreerd leest dat rustiger
     dan een linkerkantlijn met veel wit ernaast. */
  .programma__kop{position:static;margin-bottom:clamp(20px,3vw,34px);text-align:center}
  .tijdlijn__item{text-align:center}
  /* Geen vrije linkerkolom meer. De showcar past nu naast de kop en blijft
     daarmee van de tijdlijnregels af. */
  .programma__auto{left:auto;right:1%;top:0;width:min(20vw,130px);opacity:.8}
  .programma__auto.is-terugval{left:auto;right:-4%;width:min(34vw,220px)}
  .zweefauto{width:40%;opacity:.75}
  .zweefauto--links{top:calc(var(--kb) * .12);left:-34%}
  .zweefauto--rechts{top:calc(var(--kb) * .78);left:96%}

  /* --- leesbaarheid en aanraakvlakken op aanraakschermen -------------------
     Op het bureaublad komen deze maten uit het ontwerp. Op telefoon en tablet
     zijn labels van 9px en velden van 35px te klein om te lezen en te raken;
     vanaf hier dus ruimer, zonder het ontwerp erboven te wijzigen. */
  label{font-size:calc(12px + 3px);letter-spacing:.12em;margin-bottom:9px}
  input[type=text],input[type=email],input[type=number],textarea{padding:13px 14px;line-height:1.3}
  textarea{min-height:120px}
  .akkoord{font-size:calc(12px + 3px);line-height:1.55;gap:12px;padding:6px 0;min-height:44px}
  .akkoord input{width:22px;height:22px}
  .formulier__melding{font-size:calc(14px + 3px)}
  .knop{font-size:calc(12px + 3px);padding:15px 22px}
  .kaart--tekst .knop{font-size:calc(12px + 3px);padding:15px 22px}
  .zweefauto--onder-links{left:-34%;width:40%}
  .zweefauto--onder-rechts{left:96%;width:40%}
}

@media (max-width:680px){
  :root{--rand:18px}
  .formulier{grid-template-columns:1fr}
  /* Op telefoon is er geen ruimte over om de kop kleiner te zetten; het beeld
     loopt hier weer van rand tot rand. */
  .hero__video{width:100%}
  /* De zwevende auto's en de showcar bij het programma vervallen op telefoon:
     ze moesten toch grotendeels buiten beeld om de koppen niet te doorkruisen. */
  .zweefauto{display:none}
  .programma__auto{display:none}
  /* de gradiëntbaan vervalt; het watermerk draagt de sectie op telefoon */
  .programma__streep{display:none}
  /* het watermerk staat op telefoon verder naar links en hoger in de sectie */
  .programma__merk{left:-35%;top:4%}
  /* meer lucht tussen de tijdlijn en de Praktisch-kaart */
  /* De kaart is te smal voor drie kolommen naast elkaar; de knop viel er
     anders buiten. Onder deze breedte dus onder elkaar. */
  .alpine-banner-wrapper{margin-top:40px}
  /* De trap vervalt; de blokken komen recht onder elkaar. De verschuiving
     staat op :nth-child-regels, die zwaarder wegen dan een losse klasse —
     vandaar dezelfde selectors hier. */
  .tijdlijn__item,
  .tijdlijn__item:nth-child(2),
  .tijdlijn__item:nth-child(3){width:100%;margin-right:0;transform:none}
  .lockup__streep{height:18px}

  /* Ruimere lucht tussen de secties op telefoon: elk 52px boven en onder,
     wat neerkomt op ongeveer 100px tussen twee secties. */
  .uitnodiging{padding-top:52px;padding-bottom:52px}
  .programma{padding-top:52px;padding-bottom:52px}
  .aanmelden{padding-top:52px;padding-bottom:52px}
  .voet{padding-top:52px}
}

/* ==========================================================================
   Toegankelijkheid
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* Zonder animatie blijven de blokjes op hun beginwaarde staan en zijn ze
     nauwelijks te zien; hier dus vast in beeld. */
  .scrolltip__strepen i{opacity:.8}
}