/* KNF Fact / Schritt (WPBakery)
   Layout: Icon links, Text rechts; mit Trennlinie */

:root
{
  --knf-fact-icon-size-std: 100px;
  --knf-fact-icon-size-small: 70px;
  --knf-fact-icon-size-smaller: 60px;

  --knf-fact-icon-gap-std: 35px;
  --knf-fact-icon-gap-small: 25px;
  --knf-fact-icon-gap-smaller: 25px;

  --knf-fact-padding-left-std: 35px;
  --knf-fact-padding-left-small: 0px;
  --knf-fact-padding-left-smaller: 0px;

  --vc_toggle-padding-left: 24.2px;

}

.knf-fact {
  border-bottom: 1px solid var(--knf-fact-line-color, #7b7fe0);

  --knf-fact-icon-size: var(--knf-fact-icon-size-std);
  --knf-fact-icon-gap:  var(--knf-fact-icon-gap-std);
  --knf-fact-padding-left: var(--knf-fact-padding-left-std);

  padding: var(--knf-fact-padding-left);

}

.knf-fact.small {
  --knf-fact-icon-size: var(--knf-fact-icon-size-small);
  --knf-fact-icon-gap:  var(--knf-fact-icon-gap-small);
  --knf-fact-padding-left: var(--knf-fact-padding-left-small);

  padding: 15px 30px 15px var(--knf-fact-padding-left);
}

.knf-fact.smaller {
  --knf-fact-icon-size: var(--knf-fact-icon-size-smaller);
  --knf-fact-icon-gap:  var(--knf-fact-icon-gap-smaller);
  --knf-fact-padding-left: var(--knf-fact-padding-left-smaller);

  padding: 15px 30px 15px var(--knf-fact-padding-left);
}

.vc_column_container.vc_col-sm-4 .knf-fact.small
{
  padding-right: 0;
}

.knf-fact__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--knf-fact-icon-gap);
}

/*
.knf-fact.small .knf-fact__inner {
  gap: var(--knf-fact-icon-gap-small);
}
*/

.knf-fact__icon {
  flex: 0 0 auto;
}

.knf-fact__icon-box {
  border-radius: var(--knf-fact-border-radius, 15px);
  background: var(--knf-fact-icon-bg-color, #3f6477);
  display: flex;
  align-items: center;
  justify-content: center;
}

.knf-fact__icon-img {
  object-fit: contain;
  display: block;
}

.knf-fact .knf-fact__icon-box,
.knf-fact .knf-fact__icon-img
{
  width: var(--knf-fact-icon-size);
  height: var(--knf-fact-icon-size);
}
/*
.knf-fact.small .knf-fact__icon-box,
.knf-fact.small .knf-fact__icon-img
{
  width: var(--knf-fact-icon-size-small);
  height: var(--knf-fact-icon-size-small);
}
*/

.knf-fact-padding-left
{
  padding-left: calc(var(--knf-fact-icon-size-std) + var(--knf-fact-icon-gap-std) + var(--knf-fact-padding-left-std));
}
.vc_toggle.knf-fact-info
{
  padding-left: calc(var(--knf-fact-icon-size-std) + var(--knf-fact-icon-gap-std) + var(--knf-fact-padding-left-std) - var(--vc_toggle-padding-left));  
  padding-top: 5px;
  margin-bottom: 10px !important;
}

.small-knf-fact-padding-left
{
  padding-left: calc(var(--knf-fact-icon-size-small) + var(--knf-fact-icon-gap-small) + var(--knf-fact-padding-left-small));
}
.vc_toggle.small-knf-fact-info
{
  padding-left: calc(var(--knf-fact-icon-size-small) + var(--knf-fact-icon-gap-small) + var(--knf-fact-padding-left-small) - var(--vc_toggle-padding-left));  
  padding-top: 5px;
  margin-bottom: 10px !important;
}

.smaller-knf-fact-padding-left
{
  padding-left: calc(var(--knf-fact-icon-size-smaller) + var(--knf-fact-icon-gap-smaller) + var(--knf-fact-padding-left-smaller));
}
.vc_toggle.smaller-knf-fact-info
{
  padding-left: calc(var(--knf-fact-icon-size-smaller) + var(--knf-fact-icon-gap-smaller) + var(--knf-fact-padding-left-smaller) - var(--vc_toggle-padding-left));  
  padding-top: 5px;
  margin-bottom: 10px !important;
}



.knf-fact__content {
  flex: 1 1 auto;
  min-width: 0;
}

.knf-fact__title {
  margin: 0 0 4px 0;
  line-height: 1.1;
}

.knf-fact__text {
  margin: 0;
  font-size: 1rem;
}

/* Mobile: Icon mittig über dem Text */
@media (max-width: 768px) {
  .knf-fact__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .knf-fact-padding-left,
  .small-knf-fact-padding-left
  {
    padding-left: 0;
    text-align: center;
  }


  .knf-fact__content {
    width: 100%;
  }
}

.knf-fact.small.smaller .knf-fact__title
{
  font-size: 150%;
}

.knf-fact__text > ul
{
  margin-left: 1.2em;
}