/* Ensar Yufka — opmaak voor de binnenpagina's
   ==========================================================================
   De inhoud van deze pagina's komt uit de junisite en draagt de klassenamen
   van dáár. Die site is licht; deze is donker. In plaats van alle HTML te
   herschrijven zet deze laag de erfenis om naar het donkere palet.

   Dat is bewust: de teksten zijn al vertaald in vijf talen en al door de klant
   gezien. Ze opnieuw laten schrijven zou betekenen dat er ongeverifieerde
   beweringen in kunnen sluipen, en dat is bij een voedselproducent het laatste
   wat je wilt.
   ========================================================================== */

.binnen main{padding-top:clamp(6rem,14vh,9rem)}

.binnen .wrap,
.binnen .page-header,
.binnen .section > *:not(.wrap){width:var(--breed);margin-left:auto;margin-right:auto}

.binnen section{padding:clamp(2.5rem,7vh,5rem) 0;background:transparent}
.binnen .page-header{padding-bottom:clamp(1.5rem,4vh,3rem)}
.binnen .page-header h1{font-size:clamp(2.25rem,7vw,4.5rem);margin:0 0 1rem}
.binnen .page-header p,
.binnen .lead{color:var(--deeg-zacht);max-width:52ch;font-size:clamp(1rem,.95rem + .3vw,1.125rem)}

.binnen h2{font-size:clamp(1.625rem,4vw,2.5rem);margin:2.5rem 0 1rem}
.binnen h3{font-size:clamp(1.25rem,2.6vw,1.625rem);margin:2rem 0 .75rem}
.binnen p,.binnen li{color:var(--deeg-zacht)}
.binnen main a:not(.knop):not(.balk-nav a){color:var(--goud-licht)}
.binnen ul,.binnen ol{max-width:62ch;padding-left:1.25rem}
.binnen li{margin-bottom:.5rem}
.binnen strong{color:var(--deeg);font-weight:600}

/* De junisite gebruikt lichte vlakken voor kaarten en banners. Op een donkere
   grond worden dat gaten in de pagina, dus ze krijgen hier een donkere tint
   met een dunne lijn eromheen. */
.binnen .card,.binnen .product-card,.binnen .recipe-card,.binnen .client,
.binnen .b2b-banner,.binnen .stat,.binnen .step,.binnen .faq-item,
.binnen .contact-card,.binnen .login-card,.binnen .form-card{
  background:var(--grond-op);
  border:1px solid var(--lijn);
  border-radius:14px;
  color:var(--deeg-zacht);
  box-shadow:none;
}
.binnen .b2b-banner{padding:clamp(1.5rem,4vw,2.5rem);margin-top:2.5rem}
.binnen .b2b-banner h2{margin-top:0}

/* Rasters die op de junisite drie of vier kolommen hadden. */
.binnen .product-grid,.binnen .recipes-grid,.binnen .client-grid,
.binnen .stats-grid,.binnen .steps,.binnen .contact-grid{
  display:grid;gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  width:var(--breed);margin:2rem auto 0;padding:0;
}
.binnen .product-card,.binnen .recipe-card,.binnen .client,.binnen .step{padding:1.5rem}
.binnen .client{text-align:center}
.binnen .client-sub{display:block;font-size:.8125rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--deeg-zacht);margin-top:.375rem}

.binnen img{border-radius:10px}
.binnen .product-img-wrap,.binnen .recipe-img{
  border-radius:10px;overflow:hidden;background:var(--grond-op);margin-bottom:1rem}
.binnen .product-img-wrap img,.binnen .recipe-img img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0}

/* Formulieren: het inlogscherm en het contactformulier. */
.binnen input,.binnen textarea,.binnen select{
  width:100%;padding:.875rem 1rem;
  background:#100D0B;color:var(--deeg);
  border:1px solid rgba(243,235,221,.24);border-radius:10px;
  font:inherit;font-size:1rem;
}
.binnen input::placeholder,.binnen textarea::placeholder{color:rgba(201,191,175,.55)}
.binnen input:focus,.binnen textarea:focus{outline:2px solid var(--goud-licht);outline-offset:2px}
.binnen label{display:block;margin:1rem 0 .375rem;color:var(--deeg);font-weight:500;font-size:.9375rem}
.binnen input[type="checkbox"]{width:auto;margin-right:.5rem}
.binnen button[type="submit"],.binnen .btn,.binnen .btn-primary,.binnen .btn-gold{
  display:inline-block;margin-top:1.25rem;
  background:var(--goud);color:#17130C;border:0;border-radius:999px;
  padding:.9375rem 1.75rem;font:inherit;font-weight:600;cursor:pointer;
}
.binnen button[type="submit"]:hover,.binnen .btn-gold:hover{background:var(--goud-licht)}

/* De junisite heeft eigen kop- en voetteksten in de meegenomen inhoud; die
   zouden dubbel staan naast die van deze site. */
.binnen main .site-header,.binnen main .site-footer,
.binnen main .usp-strip,.binnen main .hero-meta-bar{display:none}

/* Tabellen, bijvoorbeeld in het privacybeleid. */
.binnen table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.9375rem}
.binnen th,.binnen td{padding:.75rem;border-bottom:1px solid var(--lijn);text-align:left}
.binnen th{color:var(--deeg);font-weight:600}

/* ------------------------------------------------------- pictogrammen
   De HTML komt van de junisite, maar de maatvoering van die pictogrammen
   stond in dié stylesheet en die laden we hier niet. Een svg zonder maat
   rekt zich uit tot zijn container: het slot op de inlogpagina werd 1438px
   breed en op de contactpagina stonden er drie van 604px.

   Vandaar eerst een verstandige standaard voor élke svg in de inhoud, en
   daarna de paar plekken die iets anders nodig hebben. Zo kan dit niet
   opnieuw gebeuren als er later een pagina bijkomt. */
.binnen main svg{
  width:1.25em;
  height:1.25em;
  flex:none;
  vertical-align:middle;
}

/* Het ronde merkje boven het inlogformulier. */
.binnen .login-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:rgba(201,162,39,.14);
  border:1px solid rgba(201,162,39,.4);
  color:var(--goud-licht);
  margin-bottom:1.25rem;
}
.binnen .login-mark svg{width:24px;height:24px}

/* Pictogrammen naast contactgegevens en in lijstjes. */
.binnen .contact-card svg,
.binnen .contact-grid svg,
.binnen li svg{width:20px;height:20px;color:var(--goud-licht)}

/* Pijltjes in knoppen en tekstlinks. */
.binnen .btn svg,.binnen .product-link svg,.binnen .btn-link svg{width:16px;height:16px}

.binnen .login-card,.binnen .login-wrap{max-width:30rem;margin-left:auto;margin-right:auto}
.binnen .login-card{padding:clamp(1.5rem,4vw,2.5rem)}
.binnen .login-head{text-align:center}
.binnen .login-head h1{font-size:clamp(1.625rem,3.5vw,2.125rem)}
.binnen .login-note{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--lijn);
  font-size:.875rem;color:var(--deeg-zacht);
}
.binnen .form-meta,.binnen .checkbox-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:.9375rem;
}
.binnen .btn-block{display:block;width:100%;text-align:center}

/* ---------------------------------------------------------------- blog
   Geen foto's bij de artikelen: die zijn er niet, en een middelmatige
   voorraadfoto is op een donkere site slechter dan goede typografie. In
   plaats daarvan een getekend merkje, drie varianten, zodat het overzicht
   geen rij identieke blokjes wordt. */
.bloglijst{
  display:grid;gap:clamp(1rem,2.5vw,1.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  width:var(--breed);margin:0 auto;
}
.blogkaart{
  background:var(--grond-op);border:1px solid var(--lijn);border-radius:14px;
  padding:clamp(1.25rem,3vw,1.75rem);
  display:flex;flex-direction:column;
}
.blogkaart h2{font-size:clamp(1.25rem,2.4vw,1.5rem);margin:.25rem 0 .75rem}
.blogkaart h2 a{text-decoration:none;color:var(--deeg)}
.blogkaart h2 a:hover{color:var(--goud-licht)}
.blogkaart p{font-size:.9375rem}
.blogmerk{
  width:48px;height:48px;color:var(--goud);opacity:.75;
  margin-bottom:1rem;flex:none;
}
.blogmeta{
  margin-top:auto;padding-top:1rem;
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(201,191,175,.7);
}
.blogartikel{width:min(46rem,100% - 3rem);margin:0 auto}
.blogartikel .page-header .blogmerk{margin-bottom:1.25rem}
.blogartikel h2{font-size:clamp(1.375rem,3vw,1.875rem)}
.blogartikel p{max-width:none}
.blogterug{
  margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid var(--lijn);
}
.blogterug a{text-decoration:none;font-weight:600}