/* Connect Machineverhuur: nagebouwd van de Elementor-site (sept 2026) */
:root {
  --zwart: #000000;
  --groen-donker: #3C6731;
  --groen-licht: #90BA3E;
  --tekst: #5D5959;
  --wit: #FFFFFF;
  --lichtgrijs: #FCFAFF;
  --verloop: linear-gradient(90deg, var(--groen-licht) 0%, var(--groen-donker) 100%);
  --verloop-om: linear-gradient(90deg, var(--groen-donker) 0%, var(--groen-licht) 100%);
  --breed: 1140px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: var(--tekst);
  background: var(--wit);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
p + p { margin-top: 18px; }

.wrap { width: 100%; max-width: calc(var(--breed) + 40px); margin: 0 auto; padding: 0 20px; }

/* Knoppen */
.knop {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 100px;
  background-image: var(--verloop);
  color: var(--wit);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
}
.knop:hover, .knop:focus { background-image: var(--verloop-om); }
.knop--klein { font-size: 16px; }

.label { color: var(--groen-licht); font-size: 16px; line-height: 36px; }
.titel { color: var(--zwart); font-size: 40px; font-weight: 600; line-height: 56px; }

/* Topbalk en header */
.topbalk { background-image: linear-gradient(135deg, var(--groen-licht) 0%, var(--groen-donker) 100%); }
.topbalk .wrap { min-height: 52px; display: flex; align-items: center; }
.topbalk p { color: var(--wit); font-size: 18px; font-weight: 500; line-height: 22px; padding-left: 25px; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 20px; }
.header .logo img { width: 88px; height: auto; }
.header .knop { font-size: 16px; }
.menu { margin-left: auto; margin-right: 40px; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; }
.menu a { color: var(--zwart); font-size: 16px; font-weight: 500; line-height: 22px; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--groen-donker); border-bottom-color: var(--groen-licht); }
.menuknop { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background-image: var(--verloop); cursor: pointer; padding: 0 12px; flex-direction: column; justify-content: center; gap: 4px; }
.menuknop span { display: block; height: 2px; background: var(--wit); border-radius: 2px; }

/* Hero */
.hero {
  position: relative;
  margin: 0 30px;
  border-radius: 30px;
  overflow: hidden;
  background: center / cover no-repeat;
  display: flex;
  align-items: center;
}
.hero::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .65; }
.hero .wrap { position: relative; padding-top: 100px; padding-bottom: 100px; }
.hero h1 { color: var(--wit); font-size: 50px; font-weight: 600; line-height: 56px; max-width: 800px; }
.hero .sub { color: var(--wit); font-size: 18px; line-height: 25px; margin-top: 0; max-width: 741px; padding: 13px 0; }
.hero--home { min-height: 570px; }
.hero--home h1 { max-width: 713px; }
.hero--breed h1 { max-width: none; }
.hero--contact h1 { font-size: 64px; line-height: 84px; }
.hero-punten { display: flex; flex-wrap: wrap; gap: 8px 34px; list-style: none; margin: 0; padding: 0 0 15px 18px; color: var(--wit); font-size: 18px; }
.hero-punten li { display: flex; align-items: center; gap: 8px; line-height: 34px; }
.hero-punten svg { width: 18px; height: 18px; fill: var(--wit); flex: none; }
.hero-punten a { font-weight: 500; }
.knoppen { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 8px; }
.knoppen .knop { font-size: 16px; }

/* Twee kolommen */
.sectie { padding: 100px 0; }
.sectie--grijs { background: var(--lichtgrijs); }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 25px; align-items: center; }
.twee .tekst { color: var(--tekst); margin-top: 0; }
.twee .titel { margin-bottom: 0; }
.twee .tekst p { line-height: 26px; }
.foto-r { width: 100%; height: 550px; object-fit: cover; border-radius: 30px; }

/* Over ons (home) */
.vinkjes { list-style: none; margin: 0; padding: 0; color: var(--zwart); }
.vinkjes li { display: flex; align-items: center; gap: 8px; line-height: 22px; padding: 7.5px 0; }
.vinkjes svg { width: 12px; height: 12px; fill: var(--groen-licht); flex: none; }
.over-rij { display: flex; align-items: center; gap: 30px; margin: 20px 0; }
.over-rij .scheiding { width: 1px; align-self: stretch; background: var(--tekst); }
.belblok { display: flex; align-items: center; gap: 16px; color: var(--zwart); }
.rondje { width: 42px; height: 42px; border-radius: 50%; background: var(--groen-donker); display: grid; place-items: center; flex: none; }
.rondje svg { width: 18px; height: 18px; fill: var(--wit); }

/* Aanbod-kaarten */
.aanbod-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 40px; }
.aanbod-kop .tekst { padding-top: 13px; }
.aanbod-kop .knop { margin-top: 18px; }
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 20px; }
.kaart .beeld {
  height: 400px;
  border: 1px solid var(--groen-donker);
  border-radius: 30px;
  background: var(--wit);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.kaart .beeld img { width: 100%; height: 100%; object-fit: contain; }
.kaart .beeld img.vul { object-fit: cover; }
.kaart .onder { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 20px; }
.kaart h3 { color: var(--zwart); font-size: 20px; font-weight: 500; line-height: 22px; }
.kaart .prijs { color: var(--zwart); font-size: 14px; line-height: 16px; margin-top: 12px; }

/* Stappen */
.stappen-kop { text-align: center; max-width: 456px; margin: 0 auto 30px; }
.stap { display: flex; gap: 0; padding-bottom: 10px; border-bottom: 1px solid #D9D9D9; }
.stap + .stap { margin-top: 20px; }
.stap .nr { width: 90px; flex: none; color: var(--groen-donker); font-size: 50px; font-weight: 500; line-height: 56px; }
.stap h3 { color: var(--zwart); font-size: 25px; font-weight: 600; line-height: 34px; }
.stap p { margin-top: 10px; line-height: 36px; }
.foto-stappen { width: 100%; height: 457px; object-fit: cover; border-radius: 30px; }

/* Waarom */
.waarom { margin: 0 30px; border-radius: 30px; background-image: var(--verloop); min-height: 413px; display: flex; align-items: center; }
.waarom .inhoud { max-width: 561px; padding-right: 80px; }
.waarom h2 { color: var(--wit); font-size: 40px; font-weight: 600; line-height: 56px; }
.waarom p { color: var(--wit); margin-top: 20px; line-height: 26px; }

/* Contact-oproep */
.oproep { padding: 100px 0; }
.oproep .foto { height: 430px; border-radius: 30px; background: center / cover no-repeat; }
.oproep .tekst { padding-left: 50px; }
.oproep .tekst p { margin: 0 0 20px; line-height: 26px; }

/* Hulp-band */
.hulp { background-image: var(--verloop); padding: 80px; }
.hulp .binnen { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 150px; max-width: 1265px; margin: 0 auto; }
.hulp h2 { color: var(--wit); font-size: 50px; font-weight: 600; line-height: 56px; }
.hulp p { color: var(--wit); line-height: 36px; }
.hulp .kanalen { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 20px; }
.hulp .kanaal { display: flex; align-items: center; gap: 16px; color: var(--wit); }
.hulp .rondje { background: var(--wit); }
.hulp .rondje svg { fill: var(--groen-donker); }

/* Machinepagina */
.specs { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 15px; }
.specs caption { text-align: left; color: var(--zwart); font-weight: 600; padding-bottom: 10px; }
.specs th, .specs td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #E5E5E5; }
.specs th { color: var(--zwart); font-weight: 600; width: 38%; background: var(--lichtgrijs); }
.specs tr:first-child th, .specs tr:first-child td { border-top: 2px solid var(--groen-donker); }
.product-foto { width: 100%; max-width: 440px; height: 500px; object-fit: contain; border-radius: 30px; justify-self: end; }
.zij-foto { width: 100%; height: 650px; object-fit: cover; }
.faq { max-width: 798px; margin: 0 auto; }
.faq details + details { margin-top: 26px; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 25px;
  border: 1px solid var(--groen-donker);
  border-radius: 5px;
  background: var(--wit);
  color: #1F2124;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: #1F2124; font-size: 22px; font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq .antwoord { margin-top: 10px; padding: 25px; border: 1px solid var(--groen-donker); border-radius: 5px; background: var(--wit); line-height: 22px; }

/* Contactpagina */
.contact-links { border-radius: 30px; background: center / cover no-repeat; padding: 30px 200px 30px 30px; }
.contact-kaart { background: var(--wit); border-radius: 20px; padding: 25px 20px; }
.contact-kaart a { display: flex; align-items: center; gap: 10px; color: var(--zwart); line-height: 22px; padding: 7.5px 0; }
.contact-kaart svg { width: 18px; height: 18px; fill: var(--groen-donker); flex: none; }
.contact-titel { color: var(--zwart); font-size: 50px; font-weight: 500; line-height: 56px; }
.formulier { display: grid; gap: 16px; margin-top: 30px; }
.formulier .rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulier input, .formulier textarea {
  width: 100%;
  font: inherit;
  color: var(--zwart);
  padding: 14px 18px;
  border: 1px solid #D9D9D9;
  border-radius: 10px;
  background: var(--wit);
}
.formulier textarea { min-height: 140px; resize: vertical; }
.formulier input:focus, .formulier textarea:focus { outline: none; border-color: var(--groen-donker); }
.formulier .knop { border: 0; cursor: pointer; justify-self: start; font-family: inherit; }
.formulier .melding { color: var(--groen-donker); }

/* Footer */
.footer { background: var(--lichtgrijs); padding: 50px 0 50px; color: var(--zwart); }
.footer .kolommen { display: grid; grid-template-columns: 317px 1fr 1.2fr 1.2fr; gap: 10px; }
.footer .merk img { width: 105px; height: 105px; }
.footer .merk p { margin-top: 1px; line-height: 26px; padding-right: 32px; }
.footer h2 { font-size: 28px; font-weight: 500; line-height: 34px; margin-bottom: 20px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { line-height: 22px; padding-bottom: 13px; }
.footer li a:hover { color: var(--groen-donker); }
.footer .contact li { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.footer .contact svg { width: 16px; height: 16px; fill: var(--groen-donker); flex: none; }
.onderbalk { background-image: var(--verloop); }
.onderbalk .wrap { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.onderbalk img { width: 371px; height: auto; }
.onderbalk p { color: var(--wit); line-height: 26px; text-align: right; }

/* Tablet */
@media (max-width: 1024px) {
  .hero h1, .hero--contact h1 { font-size: 40px; line-height: 46px; }
  .titel, .waarom h2 { font-size: 32px; line-height: 38px; }
  .hulp { padding: 60px 30px; }
  .hulp .binnen { gap: 30px; }
  .hulp h2 { font-size: 36px; line-height: 42px; }
  .kaarten { grid-template-columns: repeat(2, 1fr); }
  .footer .kolommen { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-links { padding-right: 30px; }
  .contact-titel { font-size: 40px; line-height: 46px; }
}

/* Mobiel */
@media (max-width: 767px) {
  .topbalk p { font-size: 14px; padding-left: 0; text-align: center; width: 100%; }
  .hero, .waarom { margin: 0 16px; }
  .hero .wrap { padding-top: 60px; padding-bottom: 60px; }
  .hero h1, .hero--contact h1 { font-size: 32px; line-height: 38px; }
  .hero--home { min-height: 0; }
  .hero-punten { padding-left: 0; }
  .knoppen { gap: 15px; }
  .sectie, .oproep { padding: 60px 0; }
  .twee, .aanbod-kop, .hulp .binnen { grid-template-columns: 1fr; gap: 30px; }
  .twee .foto-eerst { order: -1; }
  .titel, .waarom h2 { font-size: 28px; line-height: 34px; }
  .foto-r { height: 350px; }
  .foto-stappen { height: 300px; }
  .zij-foto { height: 360px; border-radius: 30px; }
  .product-foto { height: 360px; justify-self: center; }
  .kaarten { grid-template-columns: 1fr; gap: 40px; }
  .kaart .beeld { height: 340px; }
  .stap .nr { width: 70px; font-size: 40px; }
  .stap h3 { font-size: 20px; line-height: 28px; }
  .waarom .inhoud { padding: 50px 24px; max-width: none; }
  .oproep .tekst { padding-left: 0; }
  .oproep .foto { height: 300px; }
  .hulp { padding: 50px 16px; }
  .hulp h2 { font-size: 30px; line-height: 36px; }
  .over-rij { flex-wrap: wrap; gap: 20px; }
  .over-rij .scheiding { display: none; }
  .formulier .rij { grid-template-columns: 1fr; }
  .header .wrap { flex-wrap: wrap; }
  .header .knop { display: none; }
  .menuknop { display: flex; }
  .menu { display: none; order: 3; width: 100%; margin: 12px 0 0; }
  .menu-open .menu { display: block; }
  .menu ul { flex-direction: column; gap: 0; border-top: 1px solid #E5E5E5; }
  .menu li { border-bottom: 1px solid #E5E5E5; }
  .menu a { display: block; padding: 14px 0; border-bottom: 0; }
  .contact-links { padding: 20px; }
  .contact-titel { font-size: 32px; line-height: 38px; }
  .footer { padding: 60px 0 40px; }
  .footer .kolommen { grid-template-columns: 1fr; gap: 30px; }
  .onderbalk .wrap { flex-direction: column; padding-top: 16px; padding-bottom: 16px; }
  .onderbalk img { width: 260px; }
  .onderbalk p { text-align: center; }
}