.toggle-input { display: none; }

  /* 1. De Inhoud: standaard beperkt in hoogte */
  .inhoud {
    max-height: 80px; /* Beginhoogte */
    overflow: hidden;
    transition: max-height 0.5s ease;
  }

  /* 2. De Fade: Verloop boven de knop */
  .fade-overlay {
    position: absolute;
    bottom: 60px; /* Net boven de knop */
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Zorgt dat je door de fade heen kunt klikken */
    transition: opacity 0.3s ease;
  }

  /* 3. De Knop Styling */
  .mooie-knop {
    display: block;
    width: 210px;
    margin: 10px auto;
    padding: 12px;
    background: #ff6600;
    color: white;
    text-align: center;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,123,255,0.3);
    transition: background 0.3s;
  }

  .mooie-knop:hover { background: #e35b00; }

  /* Tekst wisselen in de knop */
  .tekst-dicht { display: none; }

  /* --- DE MAGIE BIJ CLICK --- */

  /* Inhoud uitklappen */
  .toggle-input:checked ~ .inhoud {
    max-height: 100%; /* Groot genoeg voor alle tekst */
  }

  /* Fade laten verdwijnen */
  .toggle-input:checked ~ .fade-overlay {
    opacity: 0;
  }

  /* Knop tekst aanpassen */
  .toggle-input:checked ~ .mooie-knop .tekst-open { display: none; }
  .toggle-input:checked ~ .mooie-knop .tekst-dicht { display: inline; }
  .toggle-input:checked ~ .mooie-knop { background: #6c757d; }
  
  p {
    margin-left: 15px;
}
      ul.arrow-list2 { list-style:none; }
      ul.arrow-list2 li:before {
          content: "\274C";
          margin-left: -27px;
          margin-right: 10px;
      }
      ul.arrow-list1 { list-style:none; }
      ul.arrow-list1 li:before {
          content: "\2705";
          margin-left: -27px;
          font-size:17px;
          margin-right: 10px;
      }

      h2 {
        margin-left: 15px;
      }

      .tab-content h3 {
        margin-left: 15px;
        }

      .tab-content .col-md-4 {
        margin-left: 0px;
        }
        .tab-content .col-md-4 ul.arrow-list1 {
        list-style: none;
        margin-left: -15px;
        }
        .tab-content .col-md-4 ul.arrow-list2 {
        list-style: none;
        margin-left: -15px;
        }
        .tab-content .col-md-4 h3 {
        margin-left: 0px;
        }
        p {
          margin-left: 0px;
        }
        .tab-content p {
        margin-left: 15px;
        }
        .tab-content table {
        margin-left: 15px !important;
        }