/* ===========================================================================
   De indeling van de pagina.

   Uitgangspunt: de tekening onderaan is heilig en wordt nooit bijgesneden.
   Hij staat onderin, op ware breedte, en houdt zijn eigen verhouding. Wat
   daarboven overblijft is voor de inhoud. Past die er niet in, dan valt de
   inhoud eroverheen — over de lucht van de tekening, waar niets staat.
   Het geheel mikt op één beeldvullende hoogte.
   =========================================================================== */

/* De hoogte moet vást zijn, niet alleen een ondergrens: anders heeft de
   1fr-rij geen ruimte om te verdelen en groeit hij gewoon mee met de
   inhoud — en dan schuift de tekening het scherm uit. */
.paneel{
  height:100vh;              /* terugval voor oudere browsers */
  height:100svh;             /* telt de adresbalk van de telefoon niet mee */
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
}

/* ── Boven: het crème van het kaartje dat naar de lucht van de tekening
      loopt, zodat er geen naad zit waar de plaat begint. ───────────────── */
.boven{
  display:flex;
  flex-direction:column;
  justify-content:safe center;   /* midden als het past, anders vanaf boven */
  min-height:0;
  padding:var(--ritme) var(--kantlijn);
  background:linear-gradient(var(--creme) 0%, var(--creme) 42%, var(--lucht) 100%);
}

/* De inhoud ligt bovenop en mag buiten zijn vak vallen. */
.inhoud{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:100%;
  max-width:36rem;
  margin-inline:auto;
  text-align:center;
}

/* ── Onder: de tekening en de voettekst. ────────────────────────────────── */
.onder{
  position:relative;
  z-index:1;
}

.landschap img{
  width:100%;
  height:auto;               /* nooit bijsnijden */
}

.voet{
  background:var(--zand);
  padding:calc(var(--ritme) * .6) var(--kantlijn) var(--ritme);
  text-align:center;
}

.voet p{
  font-size:clamp(.75rem, 1.6vh, .9rem);
  opacity:.72;
}

.voet .bliksem{ margin-bottom:.2rem; }

/* ── Het logo ───────────────────────────────────────────────────────────── */
.logo{
  width:min(15rem, 38vw, 18vh);
  margin-inline:auto;
  filter:drop-shadow(0 5px 0 rgba(21, 17, 10, .07));
}

/* ── De kop, met de stralen van het kaartje ernaast ─────────────────────── */
.kop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.5rem, 2.5vw, 1.1rem);
  margin-top:var(--ritme);
}

.kop p,
.kop h1{
  font-weight:800;
  font-size:clamp(1.15rem, min(5.6vw, 3.1vh), 2.1rem);
  line-height:1.15;
  letter-spacing:-.01em;
}

.kop em{
  font-style:normal;
  color:var(--paars);
}

.inhoud .ster{ margin-top:var(--ritme); }

.intro{
  max-width:28rem;
  margin:var(--ritme) auto 0;
  font-size:clamp(.92rem, min(3.2vw, 1.85vh), 1.1rem);
}

/* ── De knoppen ─────────────────────────────────────────────────────────── */
.knoppen{
  display:grid;
  gap:clamp(.55rem, 1.3vh, 1rem);
  max-width:26rem;
  margin:calc(var(--ritme) * 1.6) auto 0;
}

/* De maillink hangt onder de knoppen, dichterbij dan de knoppen onderling
   staan: hij hoort erbij, maar is geen vierde knop. */
.vragen{
  margin-top:clamp(.55rem, 1.5vh, 1.05rem);
}

/* ── Rustig opkomen bij het laden ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .op{ animation:op .55s both cubic-bezier(.22, .8, .3, 1); }
  .op--2{ animation-delay:.06s; }
  .op--3{ animation-delay:.12s; }
  .op--4{ animation-delay:.18s; }
  .op--5{ animation-delay:.24s; }
  .op--6{ animation-delay:.30s; }
  .op--7{ animation-delay:.36s; }
  .op--8{ animation-delay:.42s; }

  @keyframes op{
    from{ opacity:0; transform:translateY(.7rem); }
  }
}

/* ── Lage schermen: liggende telefoons, kleine toestellen, en een
      browservenster dat iemand klein heeft getrokken ───────────────────────
      Daar is één beeldvullende hoogte niet vol te houden zonder dat de
      inhoud dwars over de tekening heen op de grond belandt. Dan maar
      gewoon scrollen: de tekening blijft onderaan en blijft heel. ──────── */
@media (max-height: 640px){
  .paneel{ height:auto; }
  .boven{
    justify-content:flex-start;
    padding-block:clamp(1rem, 4vw, 2rem);
  }
  .logo{ width:min(11rem, 30vw); }
}

/* ── Lage telefoons: de ster is sier en maakt plaats voor de derde knop,
      zodat de inhoud niet tot op de grond van de tekening zakt. ────────── */
@media (max-height: 760px) and (max-width: 40rem){
  .inhoud .ster{ display:none; }
}

/* ── Ruime schermen: iets meer lucht boven het logo ─────────────────────── */
@media (min-height: 900px){
  .boven{ padding-block:calc(var(--ritme) * 2); }
}