/* WGRCMS-Step-0054 Benefits 1:1 Polish */
:root{
  --wgr-blue:#015da8;
  --wgr-dark:#09233b;
  --wgr-muted:#40556a;
  --wgr-line:#dbe8f0;
  --wgr-box:1180px;
}

/* Vorteile-Leiste wie im Mockup */
.benefits{
  max-width:1180px!important;
  margin:26px auto 28px!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  background:#fff!important;
  border:1px solid var(--wgr-line)!important;
  border-radius:7px!important;
  overflow:hidden!important;
  box-shadow:0 10px 28px rgba(9,35,59,.07)!important;
}

.benefits div{
  min-height:118px!important;
  padding:24px 24px!important;
  display:grid!important;
  grid-template-columns:54px 1fr!important;
  column-gap:18px!important;
  align-items:start!important;
  border-right:1px solid var(--wgr-line)!important;
  background:#fff!important;
}

.benefits div:last-child{
  border-right:0!important;
}

.benefits div::before{
  content:""!important;
  width:46px!important;
  height:46px!important;
  border-radius:10px!important;
  background:#eef8fd!important;
  grid-row:1 / span 2!important;
  display:block!important;
  position:relative!important;
  box-shadow:inset 0 0 0 0 rgba(1,93,168,.08)!important;
}

.benefits div::after{
  content:""!important;
  width:30px!important;
  height:30px!important;
  background:var(--wgr-blue)!important;
  position:absolute!important;
  margin-left:8px!important;
  margin-top:8px!important;
  mask-size:contain!important;
  mask-position:center!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-size:contain!important;
  -webkit-mask-position:center!important;
  -webkit-mask-repeat:no-repeat!important;
}

/* Kachel muss relative sein für Icon */
.benefits div{
  position:relative!important;
}

/* 1 Schild */
.benefits div:nth-child(1)::after{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7Z'/%3E%3C/svg%3E")!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4L11 13.2l5.6-5.6L18 9l-7 7Z'/%3E%3C/svg%3E")!important;
}

/* 2 Menschen */
.benefits div:nth-child(2)::after{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 20a6 6 0 0 1 12 0H2Zm8.5-2.8A6 6 0 0 1 22 20h-6.5a7.9 7.9 0 0 0-5-2.8Z'/%3E%3C/svg%3E")!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM2 20a6 6 0 0 1 12 0H2Zm8.5-2.8A6 6 0 0 1 22 20h-6.5a7.9 7.9 0 0 0-5-2.8Z'/%3E%3C/svg%3E")!important;
}

/* 3 Baum */
.benefits div:nth-child(3)::after{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 5 11h4l-5 7h7v4h2v-4h7l-5-7h4L12 2Z'/%3E%3C/svg%3E")!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 5 11h4l-5 7h7v4h2v-4h7l-5-7h4L12 2Z'/%3E%3C/svg%3E")!important;
}

/* 4 Handschlag */
.benefits div:nth-child(4)::after{
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m7.5 12.4 2.1 2.1c.8.8 2 .8 2.8 0l.7-.7 3 3c.4.4 1 .4 1.4 0l3.2-3.2c.4-.4.4-1 0-1.4L16 7.5c-.7-.7-1.8-.9-2.7-.4l-1.1.6-1.1-.6c-.9-.5-2-.3-2.7.4L3.3 12.6c-.4.4-.4 1 0 1.4l3 3c.4.4 1 .4 1.4 0l1.2-1.2-2.8-2.8 1.4-.6Z'/%3E%3C/svg%3E")!important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m7.5 12.4 2.1 2.1c.8.8 2 .8 2.8 0l.7-.7 3 3c.4.4 1 .4 1.4 0l3.2-3.2c.4-.4.4-1 0-1.4L16 7.5c-.7-.7-1.8-.9-2.7-.4l-1.1.6-1.1-.6c-.9-.5-2-.3-2.7.4L3.3 12.6c-.4.4-.4 1 0 1.4l3 3c.4.4 1 .4 1.4 0l1.2-1.2-2.8-2.8 1.4-.6Z'/%3E%3C/svg%3E")!important;
}

.benefits strong{
  display:block!important;
  color:var(--wgr-blue)!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:900!important;
  margin:0 0 8px!important;
}

.benefits span,
.benefits p{
  color:var(--wgr-muted)!important;
  font-size:14px!important;
  line-height:1.45!important;
  margin:0!important;
}

/* falls Inhalte nicht in strong/span liegen */
.benefits div > *{
  grid-column:2!important;
}

/* Mobile */
@media(max-width:1100px){
  .benefits{
    grid-template-columns:repeat(2,1fr)!important;
  }

  .benefits div:nth-child(2){
    border-right:0!important;
  }

  .benefits div:nth-child(1),
  .benefits div:nth-child(2){
    border-bottom:1px solid var(--wgr-line)!important;
  }
}

@media(max-width:980px){
  .benefits{
    margin-left:22px!important;
    margin-right:22px!important;
    grid-template-columns:1fr!important;
  }

  .benefits div{
    border-right:0!important;
    border-bottom:1px solid var(--wgr-line)!important;
  }

  .benefits div:last-child{
    border-bottom:0!important;
  }
}